Copilot's customization surface, mapped
VS Code discovers several customization files, and they have different scopes. .github/copilot-instructions.md applies to the whole workspace on every request. Files matching *.instructions.md under .github/instructions/ apply selectively, via an applyTo glob in their frontmatter, so you can attach rules to just your component and styling paths. *.prompt.md files are reusable prompts you invoke as slash commands. VS Code also reads AGENTS.md, which means a project already configured for other agents brings its standing rules with it. Typing /init in chat scaffolds a starter instructions file from your codebase.
| Scope | Right for | |
|---|---|---|
.github/copilot-instructions.md | Every request in the workspace | The pointer rule: read DESIGN.md, never hardcode |
.github/instructions/*.instructions.md | Files matching its applyTo glob | UI-specific rules scoped to components and styles |
AGENTS.md | Cross-tool, every request | Shared rules when your team runs multiple agents |
*.prompt.md | On invocation | Repeatable tasks (scaffold a component the house way) |
Why instructions alone won't stop the drift
The reflex fix is to write style adjectives into the instructions file: modern, clean, consistent with our brand. That fails for the same reason it fails in every tool: adjectives don't constrain anything. Copilot fills the gap with the statistical average of the web's UI, which is the same near-black background, violet accent, and evenly rounded cards every model reaches for. Constraint requires values, and values need a home the instructions can point at.
Consistency check · Ad-hoc colors
The same plan card, built two ways in Ambient Sage.
Pricing
Everything a small team needs to ship a branded UI.
Pricing
Everything a small team needs to ship a branded UI.
The setup: three files, ten minutes
- 1
Install real tokens
Semantic CSS variables (or a Tailwind theme) in the codebase, so "use the tokens" resolves to actual values. With shadcn-style tokens this is one command; any kit installs as a registry item.
- 2
Add DESIGN.md at the repo root
The written contract: what the colors mean, the type scale, spacing, the motifs that make the product recognizable, and the do-not list. This is the file that carries identity between sessions; tokens without prose still leave layout and hierarchy to chance.
- 3
Point Copilot at both
A short section in
.github/copilot-instructions.mdplus a UI-scoped instructions file. Short is correct here: the knowledge lives in DESIGN.md, the instruction is only the pointer.
npx shadcn add https://identityforge.io/r/ambient-sage.json---
applyTo: "src/components/**,src/app/**,**/*.css"
---
# Design system
- Read DESIGN.md at the repo root before any UI work.
- Use only the semantic tokens (bg-background, text-foreground,
text-primary, ...); never a literal hex value or an arbitrary
Tailwind color.
- Typography, spacing, and radii come from DESIGN.md's scales.
- If a needed value has no token, stop and ask instead of inventing one.Optional: let agent mode apply kits itself
VS Code's agent mode speaks MCP, so Copilot can go one step further than following the files: with the Identity Forge MCP server installed it can search kits, read their full token systems, and write the DESIGN.md and tokens into the repo on request. One command configures it:
npx --yes identityforge@latest install --client vscodeThe design system Copilot follows
Every kit is a complete system: 28 semantic tokens in light and dark, typography, spacing, motifs, and rules, exportable as DESIGN.md, CSS variables, Tailwind themes, or a shadcn registry item.
Does GitHub Copilot have a design system feature?
No. Unlike v0 or Lovable, Copilot ships no native design-system ingestion. Its instructions files are the mechanism: .github/copilot-instructions.md for workspace rules and .github/instructions/*.instructions.md for glob-scoped ones. Paired with real tokens and a DESIGN.md, they do the same job with no plan gate.
What should go in copilot-instructions.md for design consistency?
A pointer, not the system: instruct Copilot to read DESIGN.md before UI work, to use only semantic tokens, and never to hardcode colors or fonts. Keep the actual values and rationale in DESIGN.md so the instruction stays short and every request pays only for the pointer.
Does Copilot read AGENTS.md?
In VS Code, yes: AGENTS.md is discovered alongside Copilot's own files. If your project already carries cross-tool agent rules there, Copilot inherits them, and you only need to add the design pointer once.
Can Copilot apply an Identity Forge kit?
Two ways. Without MCP: npx shadcn add installs any kit's tokens as a registry item, and the kit page provides the DESIGN.md. With MCP: install the Identity Forge server for VS Code and agent mode can search, preview, and apply kits as tools in the conversation.
Why does Copilot keep inventing new colors anyway?
Usually one of three gaps: the instruction says "consistent" without naming tokens, the tokens exist but DESIGN.md doesn't (so hierarchy and spacing still drift), or the UI rules sit in a scoped file whose applyTo glob misses the files being edited. Check the glob first; it fails silently.