Mapeamento da superfície de customização do Copilot
O VS Code detecta vários arquivos de customização, e eles possuem escopos diferentes. O .github/copilot-instructions.md aplica-se a todo o workspace em cada requisição. Arquivos que correspondem a *.instructions.md dentro de .github/instructions/ aplicam-se seletivamente, via um glob applyTo em seu frontmatter, permitindo que você anexe regras apenas aos caminhos de componentes e estilização. Arquivos *.prompt.md são prompts reutilizáveis que você invoca como comandos de barra (slash commands). O VS Code também lê o AGENTS.md, o que significa que um projeto já configurado para outros agentes traz suas regras permanentes consigo. Digitar /init no chat gera um arquivo de instruções inicial a partir da sua base de código.
| Escopo | Ideal para | |
|---|---|---|
.github/copilot-instructions.md | Toda requisição no workspace | A regra de ponteiro: ler DESIGN.md, nunca fazer hardcode |
.github/instructions/*.instructions.md | Arquivos que correspondam ao seu glob applyTo | Regras específicas de UI com escopo para componentes e estilos |
AGENTS.md | Entre ferramentas, toda requisição | Regras compartilhadas quando sua equipe utiliza múltiplos agentes |
*.prompt.md | Na invocação | Tarefas repetíveis (gerar um componente seguindo o padrão da empresa) |
Por que apenas instruções não impedirão a divergência visual
A reação instintiva é escrever adjetivos de estilo no arquivo de instruções: moderno, limpo, consistente com nossa marca. Isso falha pelo mesmo motivo que falha em qualquer ferramenta: adjetivos não impõem restrições. O Copilot preenche a lacuna com a média estatística da UI da web, que é aquele mesmo fundo quase preto, acento violeta e cards com cantos arredondados que todo modelo utiliza. Restrição exige valores, e valores precisam de um lugar para onde as instruções possam apontar.
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.
A configuração: três arquivos, dez minutos
- 1
Instale design tokens reais
Variáveis CSS semânticas (ou um tema Tailwind) no codebase, para que "use the tokens" resolva para valores reais. Com tokens no estilo shadcn, isso é feito com um único comando; qualquer kit é instalado como um item de registry.
- 2
Adicione o DESIGN.md na raiz do repositório
O contrato escrito: o que as cores significam, a escala tipográfica, espaçamento, os motivos que tornam o produto reconhecível e a lista do que não fazer. Este é o arquivo que mantém a identidade entre as sessões; tokens sem prosa ainda deixam o layout e a hierarquia ao acaso.
- 3
Aponte o Copilot para ambos
Uma seção curta em
.github/copilot-instructions.mdsomada a um arquivo de instruções com escopo de UI. Ser curto é o ideal aqui: o conhecimento reside no DESIGN.md, a instrução é apenas o ponteiro.
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.Opcional: deixe o modo agente aplicar os kits
O modo agente do VS Code fala MCP, então o Copilot pode ir além de apenas seguir os arquivos: com o servidor MCP do Identity Forge instalado, ele pode pesquisar kits, ler seus sistemas completos de tokens e escrever o DESIGN.md e os tokens no repositório sob demanda. Um comando configura tudo:
npx --yes identityforge@latest install --client vscodeO design system que o Copilot segue
Cada kit é um sistema completo: 28 tokens semânticos em light e dark, tipografia, espaçamento, motivos e regras, exportáveis como DESIGN.md, variáveis CSS, temas Tailwind ou um item de registry do shadcn.
O GitHub Copilot possui um recurso de design system?
Não. Diferente do v0 ou Lovable, o Copilot não possui ingestão nativa de design system. O mecanismo são os arquivos de instruções: .github/copilot-instructions.md para regras do workspace e .github/instructions/*.instructions.md para aquelas com escopo glob. Combinados com design tokens reais e um DESIGN.md, eles cumprem a mesma função sem a necessidade de um plano específico.
O que deve constar no copilot-instructions.md para consistência de design?
Um ponteiro, não o sistema: instrua o Copilot a ler o DESIGN.md antes de qualquer trabalho de UI, a usar apenas tokens semânticos e a nunca fixar cores ou fontes no código. Mantenha os valores reais e a justificativa no DESIGN.md para que a instrução permaneça curta e cada requisição consuma apenas o ponteiro.
O Copilot lê o AGENTS.md?
No VS Code, sim: o AGENTS.md é descoberto junto com os próprios arquivos do Copilot. Se o seu projeto já possui regras de agente para múltiplas ferramentas lá, o Copilot as herdará, e você só precisará adicionar o ponteiro de design uma única vez.
O Copilot pode aplicar um kit do Identity Forge?
Duas formas. Sem MCP: npx shadcn add instala os design tokens de qualquer kit como um item de registro, e a página do kit fornece o DESIGN.md. Com MCP: instale o servidor do Identity Forge para VS Code e o modo de agente poderá buscar, visualizar e aplicar kits como ferramentas na conversa.
Por que o Copilot continua inventando cores novas?
Geralmente, isso ocorre por uma de três falhas: a instrução pede "consistência" sem nomear os tokens, os tokens existem mas o DESIGN.md não (fazendo com que a hierarquia e o espaçamento continuem variando), ou as regras de UI estão em um arquivo de escopo cujo glob applyTo não abrange os arquivos que estão sendo editados. Verifique o glob primeiro; ele falha silenciosamente.