Guide
How to build an app with AI without losing your brand
Claude and other coding agents will build the app. The question is whose design decisions they build it with - yours, or the average of everything they were trained on.
Why AI-built apps drift toward the same look
A coding agent answers every question you leave open. Colour, radius, type pairing, density, focus state - each answer is reasonable on its own, and none of them were your decision.
The prompt is shorter than the design
A one-line request cannot carry a design system, so the model supplies the missing 95% from its priors.
Sessions have no memory of your taste
A new chat rebuilds the same component with a slightly different blue. Nothing in the repo says which blue was right.
Nothing checks the result
Reviews catch broken logic. They rarely catch a 10px radius where the system says 14px.
Five steps
Building with Claude and keeping one brand
None of this is about limiting the agent. It is about removing the decisions it should never have been making.
- 01
Decide the brand before the first prompt
An agent cannot follow a decision you have not made. Before you ask Claude for a screen, settle the small set of things every screen depends on: one core colour and its accessible pairings, a display and a body typeface, corner radius, spacing rhythm, and how a focus state looks. That is a morning of work, and it is the difference between one app and forty variations of one app.
- 02
Turn the decisions into tokens
Named values travel; hex codes do not. `--color-signal` survives a refactor, a new page and a new chat session. `#A3392C` pasted into a component survives until the next prompt. Export your palette, type scale, radii and spacing as CSS custom properties or a theme file, and make that file the single place any colour is allowed to come from.
- 03
Write a BRAND.md the agent reads
Coding agents are good at following explicit written constraints and bad at inferring taste. A short BRAND.md at the repo root - tokens, when to use each one, component rules, accessibility minimums, and an explicit list of what never to do - gives Claude something to comply with instead of something to guess.
- 04
Prompt against the system, not the screenshot
“Make it look modern” is a request for the average of the training data. “Build this table using the tokens in BRAND.md, density comfortable, no shadows, 1px rules” is a specification. The second prompt is longer and produces a result you do not have to redo.
- 05
Review each build against the spec
Drift is not one bad commit; it is fifty reasonable ones. Every time the agent invents a value that has no token behind it, the codebase moves a little further from the brand. Check new components against the token list before merging, and replace every raw literal with the token it is nearest to.
The same request, twice
A prompt is a specification or it is a guess
Vague prompt
Build a clean, modern pricing page for my SaaS.
Indigo gradient, Inter, 12px radius, three cards with a glowing “most popular” badge. Competent, and identical to the last thousand pricing pages.
Specified prompt
Build a pricing page using the tokens in BRAND.md. Surfaces paper-2, 1px rules instead of shadows, radius-md, display font for plan names, serif for the lede. Signal colour only on the primary action.
A page that looks like your product on the first attempt, because every open question was already answered.
Where Stylaform fits
Stylaform is where the decisions in step one get made, tested and locked - and where steps two and three come out as files.
Explore and compare
See your identity applied to a real interface before committing to it, instead of judging a palette on a swatch.
Test it
Contrast and accessibility feedback while you decide, not after a component library has been built on the wrong colour.
Lock it
A decided version becomes the reference. Later work is measured against it rather than negotiated again.
Export it
Tokens and a BRAND.md your agent can read - the artefacts steps two and three ask for, generated from the version you locked.
Claude, Cursor, Copilot and Lovable are separate products from Stylaform. Stylaform produces the rules; the agent you already use does the building.
Common questions
- Do I need a finished brand before I start building?
- No. You need decisions, not a brand book. A colour, a type pairing, a radius and a spacing rhythm are enough to keep an agent consistent from the first screen.
- Does this only work with Claude?
- No. Tokens and a written spec are plain files. Any agent that reads your repository can follow them.
- What if the agent ignores the rules?
- It usually complies when the rules are explicit and in the repo rather than in a past chat. When it does not, the fix is mechanical: find the raw value, replace it with the token.
Stop letting the prompt choose your brand.
Decide what your product should look like once. Give every human and AI developer the same rules from then on.