Blueprint: Gate UI/UX Design in the Browser Before You Build

Where this fits

Sara is mid-sprint on a settings redesign when she tells her agent to run /blueprint. The agent renders interactive proposal screens in the project's real design language — actual buttons, cards, and spacing pulled from the codebase. Sara clicks preferred options, pastes the assembled prompt back, and the agent revises until she approves. The design is agreed before a single line of implementation code is written.

Why agents benefit

• Harvests the project's real design language from the codebase, so proposals look like the product, not a generic mockup.
• Runs a state-free companion server: the browser never talks back to the agent, and a server crash mid-session loses nothing.
• Assembles user clicks into a structured response prompt that becomes the next revision or the final implementation spec.
• Gates the full UI/UX arc — brainstorm, approve, specify, hand off to plans, tickets, or orchestration.
• Keeps interaction one-way, avoiding the state-sync and security complexity of bidirectional agent-browser channels.

Practical scenarios

Redesigning a dashboard's information hierarchy

A developer asks the agent to rework a cluttered metrics dashboard. Blueprint renders proposals with the real sidebar, colors, and typography. The developer clicks preferred layouts and pastes the assembled response; the agent adjusts the next round until the hierarchy is approved.

Verifying a new feature's visual consistency

Before implementing dark mode, the agent pushes side-by-side screens: current light mode, proposed dark mode, and mixed states. The user clicks contrast and accent options, and the approved output becomes the ticket-level spec.

Agreeing on a checkout flow revision

A product owner wants a lighter checkout. Blueprint shows three layout options in the project's design system. Clicks assemble a spec of selected elements, which the agent writes into a plan the orchestrator executes.

Add it to your agent workflow

Install the skill:

npx skills add radimsem/forge-skills --skill blueprint

Run /blueprint, then drive rounds through clipboard pasting. The interactive machinery lives in scripts/serve.mjs and is never reimplemented inline; each session only authors HTML fragments per references/screens.md.

Compare before adopting

Check three signals before committing. Quality: how well are scripts/ and references/screens.md maintained, and does the README match actual behavior? Alternatives: static mockups or pure text proposals lack real design-language fidelity, so compare against them deliberately. Workflow fit: ensure the clipboard round-trip and one-way browser channel match how your agent harness handles long-running interactive sessions.

Why it is worth tracking

At 15 stars, blueprint is early but sharp — the zero-state server, one-way channel, and spec handoff are well-considered for interactive design work. The "blueprint → forge → blacksmith-orchestrate" pipeline is a memorable mental model. Evaluate it when you need agreed, visible designs before implementation. For the full listing and README, see https://www.openagentskill.com/skills/radimsem-blueprint.