Die Anpassungsmöglichkeiten von Copilot im Überblick
VS Code erkennt mehrere Anpassungsdateien mit unterschiedlichen Scopes. .github/copilot-instructions.md gilt bei jeder Anfrage für den gesamten Workspace. Dateien, die unter *.instructions.md auf .github/instructions/ passen, werden selektiv über einen applyTo-Glob im Frontmatter angewendet, sodass Regeln gezielt nur für Komponenten- und Styling-Pfade festgelegt werden können. *.prompt.md-Dateien sind wiederverwendbare Prompts, die als Slash-Commands aufgerufen werden. VS Code liest zudem AGENTS.md, was bedeutet, dass ein Projekt, das bereits für andere Agents konfiguriert ist, seine bestehenden Regeln mitbringt. Die Eingabe von /init im Chat erstellt eine Starter-Instruktionsdatei basierend auf der Codebasis.
| Scope | Geeignet für | |
|---|---|---|
.github/copilot-instructions.md | Jede Anfrage im Workspace | Die Verweis-Regel: DESIGN.md lesen, niemals hart codieren |
.github/instructions/*.instructions.md | Dateien, die dem applyTo-Glob entsprechen | UI-spezifische Regeln, scoped auf Komponenten und Styles |
AGENTS.md | Tool-übergreifend, jede Anfrage | Gemeinsame Regeln, wenn das Team mehrere Agents einsetzt |
*.prompt.md | Bei Aufruf | Wiederholbare Aufgaben (eine Komponente nach internem Standard erstellen) |
Warum Instruktionen allein den Drift nicht stoppen
Der erste Reflex ist es, Stil-Adjektive in die Instruktionsdatei zu schreiben: modern, clean, konsistent mit unserer Marke. Das scheitert aus demselben Grund wie in jedem anderen Tool: Adjektive schränken nichts ein. Copilot füllt die Lücke mit dem statistischen Durchschnitt der Web-UIs – was meist der fast schwarze Hintergrund, violette Akzente und gleichmäßig abgerundete Cards sind, auf die jedes Modell zurückgreift. Einschränkung erfordert Werte, und Werte benötigen einen Ort, auf den die Instruktionen verweisen können.
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.
Das Setup: drei Dateien, zehn Minuten
- 1
Echte Tokens installieren
Semantische CSS-Variablen (oder ein Tailwind-Theme) in der Codebasis, sodass „Tokens verwenden“ zu tatsächlichen Werten aufgelöst wird. Bei Tokens im shadcn-Stil geschieht dies mit einem einzigen Befehl; jedes Kit wird als Registry-Element installiert.
- 2
DESIGN.md im Repository-Root hinzufügen
Der schriftliche Vertrag: Was die Farben bedeuten, die Typografie-Skala, Abstände, die Motive, die das Produkt erkennbar machen, und die Liste der Verbote. Diese Datei bewahrt die Identität über verschiedene Sessions hinweg; Tokens ohne begleitenden Text überlassen Layout und Hierarchie weiterhin dem Zufall.
- 3
Copilot auf beides verweisen
Ein kurzer Abschnitt in
.github/copilot-instructions.mdplus eine auf die UI beschränkte Instructions-Datei. Kürze ist hier richtig: Das Wissen liegt in der DESIGN.md, die Anweisung ist lediglich der Verweis.
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: Agent-Modus Kits selbst anwenden lassen
Der Agent-Modus von VS Code spricht MCP, sodass Copilot einen Schritt weiter gehen kann, als nur Dateien zu lesen: Mit dem installierten Identity Forge MCP-Server kann er Kits suchen, deren vollständige Token-Systeme lesen und die DESIGN.md sowie die Tokens auf Anfrage in das Repository schreiben. Ein Befehl konfiguriert dies:
npx --yes identityforge@latest install --client vscodeDas Designsystem, dem Copilot folgt
Jedes Kit ist ein vollständiges System: 28 semantische Tokens für Light- und Dark-Mode, Typografie, Abstände, Motive und Regeln, exportierbar als DESIGN.md, CSS-Variablen, Tailwind-Themes oder als shadcn-Registry-Element.
Hat GitHub Copilot eine Designsystem-Funktion?
Nein. Im Gegensatz zu v0 oder Lovable bietet Copilot keine native Funktion zur Einbindung von Designsystemen. Die Instructions-Dateien sind der Mechanismus: .github/copilot-instructions.md für Workspace-Regeln und .github/instructions/*.instructions.md für glob-basierte Bereiche. In Kombination mit echten Tokens und einer DESIGN.md erfüllen sie denselben Zweck, unabhängig vom gewählten Tarif.
Was sollte für Design-Konsistenz in die copilot-instructions.md?
Ein Verweis, nicht das System: Weisen Sie Copilot an, vor UI-Arbeiten die DESIGN.md zu lesen, ausschließlich semantische Tokens zu verwenden und niemals Farben oder Schriftarten hart zu codieren. Behalten Sie die tatsächlichen Werte und Begründungen in der DESIGN.md, damit die Anweisung kurz bleibt und jede Anfrage nur den Verweis laden muss.
Liest Copilot die AGENTS.md?
In VS Code ja: AGENTS.md wird zusammen mit den eigenen Dateien von Copilot erkannt. Wenn das Projekt dort bereits toolübergreifende Agent-Regeln enthält, übernimmt Copilot diese, und der Design-Verweis muss nur einmal hinzugefügt werden.
Kann Copilot ein Identity Forge Kit anwenden?
Auf zwei Arten. Ohne MCP: npx shadcn add installiert die Tokens eines Kits als Registry-Element, und die Kit-Seite stellt die DESIGN.md bereit. Mit MCP: Installieren Sie den Identity Forge Server für VS Code, sodass der Agent-Modus Kits als Tools innerhalb der Konversation suchen, vorschauen und anwenden kann.
Warum erfindet Copilot trotzdem ständig neue Farben?
Meist liegt eine von drei Lücken vor: Die Anweisung fordert „Konsistenz“, ohne Tokens zu benennen; die Tokens existieren, aber die DESIGN.md fehlt (wodurch Hierarchie und Abstände weiterhin Drift aufweisen); oder die UI-Regeln stehen in einer beschränkten Datei, deren applyTo-Glob die bearbeiteten Dateien nicht erfasst. Prüfen Sie zuerst den Glob; Fehler treten hier lautlos auf.