La superficie de personalización de Copilot, mapeada
VS Code detecta varios archivos de personalización, cada uno con un alcance distinto. .github/copilot-instructions.md se aplica a todo el espacio de trabajo en cada solicitud. Los archivos que coinciden con *.instructions.md dentro de .github/instructions/ se aplican selectivamente mediante un glob applyTo en su frontmatter, lo que permite asignar reglas solo a sus rutas de componentes y estilos. Los archivos *.prompt.md son prompts reutilizables que se invocan como comandos de barra diagonal (slash commands). VS Code también lee AGENTS.md, lo que significa que un proyecto ya configurado para otros agentes aporta sus reglas establecidas. Escribir /init en el chat genera un archivo de instrucciones inicial a partir de su codebase.
| Alcance | Para | |
|---|---|---|
.github/copilot-instructions.md | Cada solicitud en el espacio de trabajo | La regla de referencia: lee DESIGN.md, nunca escribas colores manualmente |
.github/instructions/*.instructions.md | Archivos que coinciden con su glob applyTo | Reglas específicas de UI con alcance en componentes y estilos |
AGENTS.md | Multiherramienta, cada solicitud | Reglas compartidas cuando su equipo utiliza múltiples agentes |
*.prompt.md | Al invocarse | Tareas repetibles (generar un componente al estilo de la casa) |
Por qué las instrucciones por sí solas no detendrán la deriva
La solución rápida es escribir adjetivos de estilo en el archivo de instrucciones: moderno, limpio, consistente con nuestra marca. Esto falla por la misma razón que falla en cualquier otra herramienta: los adjetivos no imponen restricciones. Copilot llena el vacío con el promedio estadístico de la UI de la web, que es ese mismo fondo casi negro, acento violeta y tarjetas con bordes redondeados uniformes que todos los modelos utilizan. La restricción requiere valores, y los valores necesitan un lugar al que las instrucciones puedan apuntar.
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.
La configuración: tres archivos, diez minutos
- 1
Instalar design tokens reales
Variables CSS semánticas (o un tema de Tailwind) en el código base, para que la instrucción "use the tokens" se resuelva en valores reales. Con tokens al estilo de shadcn esto se hace con un comando; cualquier kit se instala como un elemento del registro.
- 2
Añada DESIGN.md en la raíz del repositorio
El contrato escrito: qué significan los colores, la escala tipográfica, el espaciado, los motivos que hacen reconocible al producto y la lista de prohibiciones. Este es el archivo que mantiene la identidad entre sesiones; los tokens sin prosa dejan el diseño y la jerarquía al azar.
- 3
Vincule Copilot a ambos
Una sección breve en
.github/copilot-instructions.mdmás un archivo de instrucciones limitado a la UI. En este caso, la brevedad es lo correcto: el conocimiento reside en DESIGN.md, la instrucción es solo el puntero.
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: permita que el agente de código aplique los kits por sí mismo
El modo agente de VS Code habla MCP, por lo que Copilot puede ir un paso más allá de seguir los archivos: con el servidor MCP de Identity Forge instalado, puede buscar kits, leer sus sistemas de tokens completos y escribir el DESIGN.md y los tokens en el repositorio bajo petición. Un comando lo configura:
npx --yes identityforge@latest install --client vscodeEl sistema de diseño que sigue Copilot
Cada kit es un sistema completo: 28 tokens semánticos en modo claro y oscuro, tipografía, espaciado, motivos y reglas, exportables como DESIGN.md, variables CSS, temas de Tailwind o un elemento del registro de shadcn.
¿Tiene GitHub Copilot una función de sistema de diseño?
No. A diferencia de v0 o Lovable, Copilot no incluye una ingesta nativa de sistemas de diseño. Sus archivos de instrucciones son el mecanismo: .github/copilot-instructions.md para las reglas del espacio de trabajo y .github/instructions/*.instructions.md para aquellas limitadas por glob. Combinados con tokens reales y un DESIGN.md, cumplen la misma función sin restricciones de plan.
¿Qué debe incluirse en copilot-instructions.md para mantener la consistencia del diseño?
Un puntero, no el sistema: indique a Copilot que lea DESIGN.md antes de trabajar en la UI, que utilice únicamente tokens semánticos y que nunca escriba colores o fuentes a mano. Mantenga los valores reales y la justificación en DESIGN.md para que la instrucción sea breve y cada solicitud consuma solo el puntero.
¿Lee Copilot el archivo AGENTS.md?
En VS Code, sí: AGENTS.md se detecta junto con los archivos propios de Copilot. Si su proyecto ya contiene reglas de agentes transversales a varias herramientas en ese archivo, Copilot las hereda y solo necesitará añadir el puntero de diseño una vez.
¿Puede Copilot aplicar un kit de Identity Forge?
De dos maneras. Sin MCP: npx shadcn add instala los tokens de cualquier kit como un elemento del registro, y la página del kit proporciona el DESIGN.md. Con MCP: instale el servidor de Identity Forge para VS Code y el modo agente podrá buscar, previsualizar y aplicar kits como herramientas dentro de la conversación.
¿Por qué Copilot sigue inventando colores nuevos?
Normalmente se debe a una de estas tres carencias: la instrucción pide ser "consistente" sin nombrar los tokens, los tokens existen pero no hay un DESIGN.md (por lo que la jerarquía y el espaciado siguen variando), o las reglas de UI están en un archivo limitado cuyo glob applyTo no incluye los archivos que se están editando. Compruebe primero el glob; si falla, lo hace silenciosamente.