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.
Every stage of the traditional pipeline is a translation, and every translation loses something. In the playbook there is nothing to translate: the artifact the designer builds is the artifact that ships.
| 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 |
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 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.
| 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: a lead session that delegates to independent teammate instances, each with its own context, for parallel 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.