The design engineering workflow: from reference to working product

A design engineering workflow with AI coding agents has five stages: collect references, turn them into direction, build in the real codebase, review in the browser, and refine. The agent does most of the typing. The designer owns the stages where judgement matters: what to reference, what the direction is, and whether the result is right.

This is a practical outline rather than a fixed process. Adapt the stages to the size of the change.

Stage 1: Reference and research

Start with evidence of what good looks like for this problem. That includes products solving similar problems, patterns from unrelated products with the right feel, and your own existing screens.

The important habit is noting why you saved each reference while you still remember. “Nice dashboard” is useless a week later. “Filters collapse into a single summary line once applied” is something you, or an agent, can act on.

Stage 2: Define the creative direction

Turn the references into a short written direction for the work. It should fit on one screen and cover:

• Purpose: who uses it, and what they need to do quickly.
• Character: a few concrete descriptions of the feel, tied to references.
• Principles: rules to prefer and rules to avoid.
• Constraints: the design system, technical limits and accessibility targets.

This document is what separates directed output from average output. We go deeper in how to give AI coding agents better design taste, and there are copyable templates in how to write a design brief for AI coding agents.

Stage 3: Build with an agent

Work in the real codebase, not a separate prototype, so what you build uses real components and can ship. With Claude Code, the recommended pattern is to explore, plan, then implement. For a design task that looks like this:

Read docs/direction/team-billing.md and the references in
refs/team-billing/. Then look at how app/settings is built.
Propose a plan for the team billing page: layout, components you'll
reuse, anything new you'd need, and the states you'll handle.
Don't write code yet.

Correct the plan, then let it build. Keep each step small enough to review. If you’re new to the tool, Claude Code for designers covers setup and the basic loop.

Stage 4: Review in the browser

Judge the result where users will see it: in a browser, at real sizes, with real data. An agent can do the first pass itself. With the Chrome integration, Claude Code can open your local server, take screenshots and compare them with the references. The designer’s pass checks what an agent can’t settle alone: whether it feels right for this product and these users. To make the agent’s pass repeatable, see visual testing with Playwright.

Review in a fixed order so nothing gets skipped:

1. Does it do the job in the purpose statement?
2. Is the hierarchy right?
3. Does it follow the direction and the design system?
4. Does it hold up with empty, long and broken content?
5. Is it accessible?

Stage 5: Refine

Refinement is where most of the quality comes from. Work in focused passes with specific instructions, and keep the diff small. The guide to improving AI-generated UI has prompts and a checklist for this stage.

One habit pays off over time: when you make the same correction twice, write it into the direction as a principle. Next time it’s in the input, not the review.

Worked example: a usage dashboard

Here’s how the stages map onto a common task.

• Reference: three dashboards with good density, plus your current settings page for visual style.
• Direction: “Finance leads check this weekly. The question is ‘are we over budget?’ Answer it in the first line.”
• Build: plan first, then a page using existing table and chart components.
• Review: screenshots at two widths, a test with 300 rows, a keyboard pass.
• Refine: tighten rows, mute secondary figures, add an empty state for new workspaces.

Dashboards have enough specific pitfalls that we wrote a separate guide: how to build better SaaS dashboards with AI.

Where the context lives

Stages 1 and 2 produce the most valuable material in the workflow, and they’re the easiest to lose. References end up in a dozen tools; direction ends up in chat history. Keeping them somewhere your agents can reach is what lets this workflow scale across projects.

That’s the part Attuna handles: a reference library with your notes, Taste Profiles with your principles, and an MCP connection so Claude Code and other agents can retrieve the relevant parts in stage 3. For the mechanics, see how to give Claude Code visual design references.