Design to code needs a contract, not a better prompt.

Everyone working with coding agents has seen the same failure. The agent writes polished, competent UI, but it belongs to someone else's design system.

The spacing is plausible. The components are familiar. The code is clean. It is also full of public component imports, hard-coded values and conventions that do not exist inside the company.

That is not mainly a model capability problem. The model is following a strong public prior because the internal system is invisible.

Giving the model a larger prompt does not solve this reliably. More documentation creates more context to search, more instructions to forget and more room for details to drift between requests.

The same screen can come back one prompt later with different radii, spacing, alignment and emphasis. It may still compile. Nothing blocks the merge.

The fix is a smaller contract

A prompt describes what to make. A contract defines the small set of rules the result must obey.

That distinction changes the job. Instead of asking a model to remember an entire design system, the system retrieves the exact source, tokens and guidance for the component in front of it. It expands the context only when complexity demands it, then checks the result independently.

The loop has four controls. A start hook begins the workflow. An index retrieves the relevant contract. A recipe adds detail for complex components. A Doctor validates the generated output after the model finishes.

The coding agent remains the orchestration surface. Reliability comes from the controls around it.

Retrieve the exact contract

The index should answer one narrow request at a time.

For a data grid, it can return the internal source package, the approved surface and border tokens, and focused guidance for columns, density, selection and keyboard behaviour. The agent does not need the whole system. It needs the contract for this component.

That contract is small enough to inspect and specific enough to verify.

Expand only where complexity demands it

A button should not carry the same context as a data grid or chart.

Simple components can move directly from contract to code. Complex components can branch through a recipe that adds states, behaviour, accessibility and data-shape rules. Complexity becomes opt-in instead of ambient.

This keeps the common path fast while giving difficult components enough structure.

Make done mean green

Generation is a claim. Validation is proof.

An independent end hook can check imports, tokens, component APIs and design rules. The result is complete only when those checks pass. This catches failures that a model may not notice in its own output and turns design-system compliance into something a team can inspect.

The Doctor does not need to judge whether the screen is good. It only needs to verify the parts that can be made explicit.

Turn Figma noise into implementation intent

The raw Figma tree is not a useful contract. It contains frames, groups, rectangles, gridlines and generated layer names that describe how the file was built, not what the interface means.

A small semantic screen spec can preserve the useful parts: component identity, position, copy, props and tokens. The transformation removes layer noise without replacing exact values with a vague summary.

The model receives implementation intent instead of a serialized drawing tool.

Define once, execute repeatedly

A stronger model can help define the framework: component contracts, complex recipes and Doctor checks. Once those parts are stable, smaller models can execute a narrow contract repeatedly.

This is not a promise that every task belongs on a smaller model. It is an operating strategy. Move durable reasoning into inspectable contracts, then spend model capability where judgement is still required.

Start with one component

This does not need to become a platform programme.

Start with one component. Write its contract, connect it to the index and prove that the Doctor catches a violation. Then use that component in one complete screen and add the first recipe. Only after the workflow works end to end should it expand to a team.

Coverage should grow through use. A contract earns its place by helping ship a real interface.

What the system cannot decide

A contract governs construction. It does not replace design judgement.

It cannot decide whether a screen should exist. It cannot retrieve a contract for a genuinely novel component. A green check also does not remove the need for review. It narrows review by clearing the mechanical questions first.

Designers and engineers can spend their attention on the decisions that remain open instead of repeatedly checking imports, tokens and known component rules.

The operating model

The full path is simple: picture, intent, contract, code, proof.

Figma provides the picture. A semantic screen spec extracts intent. The CLI retrieves the contract. The model writes the code. The Doctor provides proof.

Every handoff can be inspected. That is the real advantage. Reliable design-to-code does not depend on one perfect prompt or one perfect generation. It depends on a system that makes the model's inputs and outputs visible, narrow and testable.

Reliable AI is inspectable AI.