Writing / AI Engineering
Design to code, under contract.
A smaller contract helps AI agents use the right design system—and prove the code follows it.
Article
AI agents can write polished interfaces that use the wrong design system.
The code may compile and the screen may look convincing, but the details drift: public components, hard-coded colours, incorrect tokens, and patterns that do not belong to the product.
The model is not incapable. It is missing the internal rules that define the finish line.
The problem
A polished result can still be wrong.
The model is not incapable. It is uninformed.
What it actually shipped
The prior wins when the contract is missing.
The short version
A prompt describes what to build. A contract defines what the result must obey.
Instead of loading an entire design system into the model, retrieve only the relevant component, variants, tokens, and guidance. Then validate the generated code independently.
The turn
The fix is not a better prompt. It is a smaller contract.
The goal is focused context, not maximum context. Give the agent enough information to make the next decision correctly, while leaving room to reason.
Deck
Download the complete presentation as a PDF.
Design to code, under contractPDF · 17 pagesDownload PDF ↓How the system works
An internal search returns one small contract for the requested component. Validators check imports, tokens, icons, APIs, and other explicit rules. Failures return structured guidance the agent can fix and rerun.
Figma provides the visual reference. A compact semantic specification adds hierarchy, component identity, copy, props, and tokens without sending the entire layer tree.
System architecture
Four controls. One governed loop.
The agent orchestrates. The surrounding system supplies control.
The operating path is simple: picture, intent, contract, code, proof. Each handoff is visible and testable.
Try the tools
Screen Spec MD on FigmaGenerate compact semantic context from a Figma frame.Open link ↗
Screen Spec MD on GitHubView the source, documentation, and implementation.Open link ↗Reliable AI is inspectable AI.
Can a copy-paste agent beat retrieval?
I built a custom test harness to compare how AI agents assembled the same interface. Across 122 runs, only one approach kept the small behaviours users rely on.
Workflow design: turning templates into leverage.
How a well-organised template library makes recurring work faster, clearer, and easier to improve.
Design reviews as a delivery mechanism.
Treat reviews as a repeatable decision system that creates momentum, clarity, and a visible record of what changes next.
Planning and prioritisation as a two-level design system.
A practical system for connecting product bets with the delivery decisions that keep design work moving.
