Design Factory - From idea to product

A gated, six-stage pipeline that lets Claude Code and Codex draw, correct, and ship a product's screens: from a one-line spec to production components, without drifting from that product's design system.

Role :

Design systems lead

Product Strategy

Runtime & Canvas:

Claude code, Codex

Penpot

Timeline :

May 2026

Skills :

Product Design & Strategy

AI automation

The problem

Speed and fidelity to the design system are two different axes

AI agents move fast, but they don't remember the rules: CTA placement, spacing tokens, contrast minimums. A design system nobody's forced to read isn't a constraint, it's a suggestion nobody enforces.

Three decisions the system is built on

Everything below follows from these three calls.

One contract,
two runtimes

One contract, two runtimes

Claude Code and Codex read the same reference doc. Update one rule, both agents inherit it.

Nothing advances without a gate

Every stage carries an approval bar. Can't clear it, can't hand it forward.

Penpot is shared, not handed off

The agent draws, layers named after real components, so the next stage reads it directly.

The system

A claude plugin with series of skills to connect all this together

Claude Code (or Codex) talks to Penpot/Figma through MCP, then draws inside the real file.

Every skill checks for this first.

Claude Code (or Codex) through MCP, generates design

The constitution

One capability at a time

The 14 sections give every AI skill the same context, from design system and interaction patterns to quality checks and implementation details. This reduces guesswork, keeps outputs consistent, and makes review faster.

The pipeline

Five stages, one branch, seven skills

Each stage owns a single Penpot page and can't touch the others. A stage that isn't ready to advance has to name exactly what's missing.

Three artifacts, not just a workflow diagram

What it ships

The same tokens, from Penpot frame to production screen

Recreated, not a live capture, but every colour, pill, and spacing value here is pulled straight from the tokens in REFERENCE.md.

What's next

A living document

REFERENCE.md carries its own debt ledger: a table of known design-system violations still in the codebase, fixed opportunistically whenever a skill touches that file rather than in a dedicated cleanup sprint. Every full-page design also has to produce 768px and 375px companions before it counts as approved, so the pipeline can't quietly ship desktop-only work. As a product adds surfaces, the reference doc grows with it: the constitution updates, both runtimes inherit the update on their next read.

"AI doesn't make one bad decision. It makes the same one, a hundred times, before anyone notices."