Design as artifact

Design used to be a separate discipline with a separate tool (Figma, Sketch, Adobe XD) and a discrete handoff between designer and engineer. That arrangement is dissolving.

If code is an artifact of the spec, so is design: another projection of the same refined concept, shaped by the same evergreen spec.

Mockups are specification

Design artifacts sit on the fidelity spectrum of specification itself. A standalone HTML mockup of one screen, in your styling, is often the fastest way to make a product decision: generate three directions, react, pick one, then fold the choice into the spec and implement it for real. The mockup is disposable; the decision is durable.

This scales up to full clickable prototypes on realistic mock data when the interaction itself is the question. What stays constant underneath every visual iteration is the invariant core: the capabilities, the flows’ outcomes, the rules. The surface is free to change because the spec pins down what isn’t.

The pivot

A working setup today:

• Voice dictation into the terminal. Wispr Flow (or macOS native dictation) streams your thinking into Claude Code without the typing tax. Describe the change, don’t type it.
• A design-aware Claude. Loaded with a design skill (e.g. frontend-design, canvas-design, theme-factory) so the model reasons in visual-design terms, not just code terms.
• Your codebase as the style source. Claude reads your existing components, tokens, and patterns directly. It doesn’t invent a fresh visual system; it extends the one you’ve got.
• A live preview browser. Changes reflect immediately. Voice-driven iteration: describe what you want, watch it appear, describe the next tweak.

That loop replaces the designer/developer handoff for most product UI. You talk about what you want, Claude builds it, the browser shows it, you talk about the next change. There’s no export-to-code step and no mismatch between mockup and implementation.

What this means

Design is no longer:

• A discrete phase blocking implementation
• Separated from code by a tool boundary
• A handoff artifact that may or may not match what gets built

Design is now:

• Part of specification, at whatever fidelity the decision needs
• Congruent with your existing code by default (same tokens, same components, same patterns)
• Revised the same way code is: prompt, regenerate, review
• Part of the implementation loop, not a phase in front of it

Design judgment still matters as much as it ever did. What to build, who it’s for, what should feel right. What’s gone is the tool-level separation that made expressing those decisions expensive.

Where dedicated design tools still earn their place

Some cases still reach for Figma or equivalent:

• Visual branding and marketing. Poster-style work, brand systems, illustration.
• Collaborative review with non-builders. Stakeholders commenting on a static artifact.
• Animation and motion design. Richer than a prompt-and-refresh loop produces easily.
• Design systems published for external consumption. A canonical Figma library other teams import.

For most in-product UI, you’re better off skipping the intermediate file.

The workflow end-to-end

A typical voice-driven design session:

1. Open Claude Code in the repo; open the app’s local preview in a browser tab next to it.
2. Describe the change you want, freely, in English.
3. Claude reads the relevant component files, extends them, writes the change.
4. The preview updates. Look at it. Describe the next tweak.
5. Repeat until the result matches what you wanted.

You converge on good design the way you converge on good writing: by iterating on drafts. The loop is fast enough to make dozens of tweaks in an hour.

Resources

• Wispr Flow: wisprflow.ai
• The frontend-design skill documentation