Guide
How to build an app with AI and keep your brand, with Copilot
GitHub Copilot is very good at matching a pattern. The whole question is whether the pattern it matches is your design system or the average of everything on GitHub.
Why Copilot-built apps drift
Completion is imitation. Copilot reproduces whatever precedent it can see - in your file, in your repository, or failing that, in its training data.
It copies the nearest precedent
One component with a hardcoded colour becomes the template for the next ten, and the drift compounds silently.
Accepting is faster than deciding
A suggestion arrives already written. Rejecting it costs more effort than taking it, so near-enough values get merged.
Nothing enforces the system
Type checks catch a wrong prop. They say nothing about a 10px radius where the system says 14px.
Five steps
Building with Copilot and keeping one brand
None of this slows Copilot down. It removes the design decisions it should never have been making on your behalf.
- 01
Decide the brand before you open the editor
Copilot completes what you started; it does not decide what you meant. Settle the handful of things every screen depends on first - one core colour and its accessible pairings, a display and a body typeface, corner radius, spacing rhythm, focus state. Those five answers stop the same button being invented five different ways.
- 02
Put the decisions in one token file
Copilot is strongly influenced by what already exists in the file and the repository. A single theme file of named CSS custom properties - colour, type scale, radius, spacing - becomes the pattern it copies. Scattered hex literals become the pattern it copies instead, so remove them early.
- 03
Write repository instructions Copilot reads
GitHub Copilot supports repository custom instructions, commonly a `.github/copilot-instructions.md` file, alongside your own BRAND.md. Keep it short and imperative: use tokens, never raw hex, radius from the scale, 1px rules instead of shadows, contrast minimums, and an explicit list of what never to do.
- 04
Keep the token file open while you work
Copilot Chat and inline completions weight open files and referenced context heavily. Having the theme file and a representative component open - or attaching them in chat - changes what gets suggested far more reliably than restating the rules in each prompt.
- 05
Review suggestions before you accept them
Tab-completion makes drift cheap: a plausible `#575ECF` is one keystroke away from being merged. Scan accepted blocks for values with no token behind them, and make “no raw colour or radius literals” something a linter or a reviewer actually checks.
The same component, twice
Context in the buffer beats instructions in your head
Unanchored suggestion
// pricing card component
Copilot fills in indigo, Inter, 12px radius and a soft drop shadow - the statistical centre of every pricing card it has ever seen, not yours.
Anchored suggestion
// pricing card. Use tokens from theme.css only: surface paper-2, 1px rule borders, radius-md, display font for plan names. No shadows, no raw hex.
A component that matches the rest of the app on the first accept, because the constraints were in the buffer before the completion was generated.
Where Stylaform fits
Stylaform is where step one gets decided and tested - and where steps two and three come out as files Copilot can read.
Explore and compare
Judge your identity on a real interface instead of a swatch, before a component library is built on the wrong colour.
Test it
Contrast and accessibility feedback while the decision is still cheap to change.
Lock it
A decided version becomes the reference every later suggestion is measured against.
Export it
Tokens and a BRAND.md you can commit next to your repository instructions - the precedent Copilot copies from.
GitHub Copilot is a separate product from Stylaform and is not affiliated with it. Stylaform produces the rules; the tool you already use does the building.
Common questions
- Where do I put the rules so Copilot sees them?
- Repository custom instructions - commonly .github/copilot-instructions.md - plus a BRAND.md in the repo root. Keeping the token file open in the editor also has a large effect on inline suggestions.
- Does this only work with Copilot?
- No. Tokens and a written spec are plain files. Claude, Cursor and other agents that read your repository can follow exactly the same rules.
- What if Copilot keeps suggesting raw hex values?
- That usually means raw hex still exists somewhere in the repository. Replace the literals with tokens, and the suggestions follow the new precedent.
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.