The case, the operating model, and the playbook for designing in code with AI agents: from brand file to shipped PR without a handoff layer. Summarized from the full playbook in 13 slides.
Design in Figma, spec for engineering, rebuild from scratch: every stage loses fidelity, and two sources of truth drift permanently. Designing in code eliminates the translation layer entirely. The screen the designer builds is the screen engineering reviews and ships.
With an agent harness (Claude Code, Codex, Hermes), a designer goes from idea to live URL in an hour and a complete flow in a day. No HTML/CSS prerequisite: the designer directs in design language; the agent implements against a tokenized system.
Generating five directions costs minutes. Knowing which is right is the designer's moat. The workflow instruments judgment: audits, critique loops, decision logs, and quality gates keep taste, not typing speed, as the limiting factor.
A mockup that looks like the product but does not behave like it
Interactions, states, and edge cases documented secondhand
Every decision re-solved from scratch in a different medium
QA against the mockup; designer re-enters after the fact
Working screens against real tokens and components from day one
Hover, loading, error, empty: built, not deferred to QA
Engineering reviews a diff it can run, not a picture
One source of truth in git; nothing drifts because nothing is duplicated
| Dimension | Traditional | This model |
|---|---|---|
| Artifact | Figma mockup that must be rebuilt | Running screens in a browser; the prototype is the product |
| Source of truth | Figma file and codebase, drifting apart | One codebase: tokens, components, decisions, screens in git |
| Handoff | A moment; designer involvement drops off | Continuous; designer submits PRs, engineering reviews and merges |
| Design system | Library in a tool engineering cannot import | tokens.css + shadcn components + skill files; imported directly |
| States & edge cases | Discovered during QA | Designed at build time, verified by the agent in a browser |
The middle column is where designer time lives. Setup is behind you after week one; maintenance is largely agent-run. The first week is slower than Figma; every week after compounds.
Claude Code (the pick) · Codex · Hermes · Cursor
One markdown file per domain (brand, a11y, copy, performance, components): the rules, the exceptions, and what good looks like. Plain markdown, readable by any agent, versioned in git.
CLAUDE.md / AGENTS.md: stack rules, folder structure, absolute constraints ("never hardcode values, never push to main"), and current status. Read automatically at every session start.
The agent responds to visual, spatial, felt vocabulary: contrast, density, hierarchy, tone. Interaction patterns are complete instructions: "apply progressive disclosure" needs no elaboration.
The industry now calls this context engineering. The setup is the heavy lifting; prompting is steering. Without design context loaded, every agent produces the same generic UI.
| Engineering review gate | Applies to |
|---|---|
| Blocking approval | Shared components, new dependencies, auth/payments/data, API shape changes |
| Awareness only | New screens on existing components, copy changes, token-scale adjustments |
| Designer merges directly | Design-repo tooling, skill files, decision log, documentation |
The cross-tool instruction standard. Write project rules once; every harness reads them. Claude Code bridges via a one-line import.
Vendor-neutral tool connections (Figma, shadcn registries, browser, analytics) supported across Claude, OpenAI, and Google. Config travels in the repo.
The W3C community token format, stable since 2025. Consumed by Style Dictionary, Tokens Studio, and Figma variables; legible to any agent.
All accumulated expertise is plain text in git. Works pasted into any model or read by any CLI. No export, no lock-in.
The payoff is daily, not hypothetical: harness choice is per-task and per-designer, and the repo is the session state (branch, current status, decision log, skills), so work started in one harness resumes in another with no seam. Vendor risk falls out for free: if a harness disappeared tomorrow (one major consumer CLI did in 2026), the team loses a driver, not the system.
| Team size | Governance model |
|---|---|
| Solo / 1–2 | One owner. Second designer contributes to skill files via PR. Instruction file doubles as the onboarding doc. |
| 3 | Ownership split by domain: brand + tokens, components, governance. One reviewer on shared files. |
| 4–5 | CODEOWNERS on /skills and system files; monthly consistency audit; quarterly ownership rotation. |
Build one flow while a second agent audits, documents, or localizes. Defined specialists, git worktrees for isolation, and agent teams with debate-and-vote councils for critique.
The autoresearch pattern applied to flows: agents propose variants inside design system constraints, previews serve them, analytics scores them. ~700 experiments found ~20 real improvements in the reference run.
A separate competency clients now ask for: generative UI assembled at runtime, plus agentic UX patterns (planning visibility, tool disclosure, streaming states, recovery, memory surfacing).
Write brand.md. Convert your brand guidelines to one plain-text file: colors, type scale, iconography, motion, voice.
Scaffold the system. One prompt: shadcn + Tailwind v4 themed from brand.md, with a living style guide at /design-system.
Write the instruction file and skills. Absolute rules, folder structure, a11y and copy standards. This is the onboarding doc for every future agent and designer.
Build one flow end-to-end. Every state, agent-verified in the browser, deployed to a preview URL, shared as a link.
Open the first PR. Let engineering review a diff instead of a spec. Then set the weekly rhythm: sync, audit, merge, changelog.