WEITERE LEKTÜRE
Weiterführende Informationen zu Copilot
Tutorials, Dokumentation und Walkthroughs für das Design mit Copilot, wie im veröffentlichten Guide aufgeführt.
Copilot 
OpenDesign Mit Copilot
in OpenDesign
gestalten.
Wie Sie Interfaces mit GitHub Copilot CLI in OpenDesign gestalten: ein Screenshot als Eingabe, wiederverwendete Komponenten Ihres Repositorys, eine Launch-Page-Aufgabe vom Briefing bis zur geprüften Datei – und die Grenzen, die Sie vorher kennen sollten.
Vom Briefing zum Interface01 / Copilot
SIE BRINGEN DIE IDEE EIN↗
„Eine Launch-Seite, erstellt aus
dem Screenshot, mit unseren Komponenten.“
DREI WEGE IN DIESEN COPILOT-GUIDE
Wählen Sie Ihren Einstieg mit Copilot
DIESER LEITFADEN · UI-DESIGN
Erstellen Sie ein Produktinterface mit Copilot
Dieser Leitfaden: Briefing, Referenzen, Designregeln und ein überprüftes HTML-Ergebnis.
Diese Anleitung lesen EINRICHTUNGRichten Sie Copilot von Null an ein
Hier ist der vollständige Weg von einer sauberen Maschine bis zu einer Copilot CLI, die UI bauen und prüfen kann.
Zum Setup VERGLEICHVergleichen Sie Copilot mit anderen Agenten
Wie sich Copilot bei Design-Arbeit von Codex, Claude Code, Cursor unterscheidet – und wann Sie einen anderen Workflow wählen sollten.
Zum VergleichAuf dieser Seite Beispiel
Eine vollständige Copilot-Design-Aufgabe
Eine Copilot-Design-Aufgabe, vom Briefing bis zum Interface
Eine einzelne Aufgabe, end-to-end gezeigt: das Briefing und die Vorgaben, die Sie übergeben, das Artefakt, das zurückkommt, und die Prüfungen, die Sie vor dem Abschluss noch durchführen. Das Interface unten ist ein illustratives Beispiel für diese Seite, kein aufgezeichneter Copilot-Lauf.
1Design-Briefing und Vorgaben
BriefingGestalten Sie die Launch-Landingpage für ein CLI-Produkt anhand des angehängten Screenshots einer Konkurrenzseite: Hero mit Installationsbefehl, drei Feature-Blöcke und Proof Points. Verwenden Sie die Komponenten des Repositorys wieder. Desktop und Smartphone.
- Design-SystemRepository-Komponenten und Tokens; Albert Sans, ein grüner Akzent
- Breakpoints1440px Desktop und 390px Mobil, kein horizontales Scrollen
- InteraktionenInstallationsbefehl kopieren, primärer und sekundärer CTA, Anker-Navigation
- AusgabeEine in sich geschlossene HTML-Datei mit stabilen
data-od-id-Hooks
2Arbeitsteilung: Sie, Copilot und OpenDesign
- Sie
Schreiben Sie das Briefing, wählen Sie das Design-System aus und definieren Sie die Abnahmekriterien.
- Copilot
Plant das Layout, schreibt HTML, CSS und JavaScript und überarbeitet es auf Anfrage.
- OpenDesign
Stellt das Design-System und den Skill bereit, rendert die Vorschau und speichert jede Version als Datei im Projekt.
- Prüfung
Visuelle Hierarchie, Abstände im 8px-Raster, beide Breakpoints und jede Interaktion werden vor der Übergabe geprüft.
3Copilot-Artefakt: Die Launch-Seite bei 1440px und 390px
4Überprüfung vor der Übergabe
Layout
Raster und Abstände
Hero, Features und Proof teilen sich das 8px-Raster; die Bildspalte drängt den Text nie unter den Sichtbereich.
Hierarchie
Visuelle Hierarchie
Headline, Installationsbefehl, dann Features; der Akzent markiert nur den Installations-Button.
Responsive
Mobiles Layout
Text zuerst, Bild danach, Features gestapelt; der Installationsbefehl bleibt kopierbar.
Interaktion
Interaktionsprüfungen
Kopieren Sie den Befehl, folgen Sie beiden CTAs, springen Sie zu einem Feature-Anker.
Eignung
Wann Copilot zur Aufgabe passt – und wann nicht
Copilot passt, wenn
- Screenshot → UI. Wählen Sie ein starkes multimodales Modell und verwandeln Sie ein Referenzbild in responsives Markup, prüfen Sie das Ergebnis anschließend dagegen.
- Auswahl mehrerer Modelle. Wechseln Sie je Aufgabe mit /model zwischen führenden Modellen von Anthropic, OpenAI und Google, alles über Ihr Copilot-Abonnement.
- Anweisungen + MCP. Custom Instructions und AGENTS.md tragen Ihre Konventionen weiter; der Figma-MCP-Server bringt echten Designkontext in den Code.
- Tiefe GitHub-Integration. Integrierter GitHub-MCP-Server und Zugriff auf Ihre Repositories, Issues und PRs, authentifiziert mit Ihrem bestehenden GitHub-Konto.
Wählen Sie einen anderen Workflow, wenn
- Sie benötigen bearbeitbare Vektordateien. Das Artefakt ist HTML, kein bearbeitbares Design-Dokument. Prüfen Sie einen separaten Vektor-Workflow für Ihr benötigtes Asset-Format.
- Sie haben weder Referenz noch Vorgaben. Ohne Designsystem oder Beispiele tendiert die Ausgabe zu einem generischen Look; schreiben Sie zuerst das Briefing.
- Sie besitzen die Anmeldedaten nicht, die dieser Agent benötigt. Erforderlich: GitHub Copilot-Abonnement. OpenDesign stellt keine Anmeldedaten bereit und leitet sie nicht weiter.
- Ihr Team arbeitet mit Codex oder Claude Code. Diese Agents haben eigene Seiten; der Workspace ist derselbe, die Einrichtung unterscheidet sich. Siehe verwandte Agents.
Kompatibilität
Copilot-Voraussetzungen vor dem Start
Dieser Leitfaden behandelt Copilot, wie es über die OpenDesign-Desktop-App angebunden wird. Veröffentlichte Referenzen geprüft am 6. September 2026.
Tool-UmfangCopilot, von GitHub
GitHub Copilot CLI ist GitHubs terminal-nativer Coding-Agent, angetrieben vom selben agentenbasierten Harness wie der Copilot Coding Agent. Er liest Ihre Codebasis, bearbeitet Dateien, führt Befehle aus und arbeitet mit Ihren GitHub-Issues, PRs und Repositories. Diese Seite behandelt das Gestalten von Interfaces mit Copilot über OpenDesign, nicht die Oberfläche von Copilot selbst. OpenDesigns Setup-Hinweise listen die verfügbaren Agents auf.
Konten und AuthentifizierungGitHub Copilot-Abonnement
GitHub Copilot-Abonnement. Authentifizieren Sie sich mit Ihrem GitHub Copilot-Abonnement — die Zugangsdaten bleiben auf Ihrem Rechner. Diese Seite sagt kein Kontingent oder Preis zu.
System und VersionenDesktop-App oder Quellcode
Prüfen Sie die Download-Seite auf Desktop-Builds. Die Node.js- und pnpm-Anforderungen im Source-Quickstart betreffen das Ausführen aus dem Quellcode, nicht die Installation eines Desktop-Pakets. Mindestens kompatible Copilot-Version: hier nicht verifiziert.
VerbindungsprüfungDas Erfolgssignal
Folgen Sie den Verbindungsanweisungen Ihrer installierten Version und führen Sie anschließend eine kleine Aufgabe aus. Bestätigen Sie, dass Copilot sie ausgeführt hat und dass sich das Artefakt öffnet. Ein reiner Download stellt noch keine funktionierende Verbindung her.
Mit der Desktop-App beginnen
Copilot-Setup in drei Schritten
Laden Sie zuerst herunter, schließen Sie das Copilot-Setup für Ihre installierte Version ab und prüfen Sie anschließend ein kleines Ergebnis. Sie müssen OpenDesign nicht aus dem Quellcode bauen, um diesen Weg zu gehen.
- 1
Die OpenDesign-Desktop-App herunterladen
Wählen Sie das Paket für Ihren Computer, installieren Sie es und öffnen Sie die App.
OpenDesign herunterladenMEILENSTEINDie Desktop-App öffnet sich. Bereits installiert? Fahren Sie mit dem nächsten Schritt fort; ein erneuter Download ist nicht erforderlich. - 2
Bereiten Sie Ihre Copilot-Verbindung vor
Folgen Sie den Copilot-Anweisungen in Ihrer installierten Version. Authentifizieren Sie sich mit Ihrem GitHub Copilot-Abonnement — die Zugangsdaten bleiben auf Ihrem Rechner.
Verwendung von GitHub Copilot CLI# 1. Install Copilot CLI (Node.js required) npm install -g @github/copilot # 2. Start it in your project and authenticate on first run cd your-project copilot # run /login and follow the prompts to sign inAus den Copilot-Setup-Hinweisen im veröffentlichten Leitfaden; prüfen Sie die Herstellerdokumentation für den aktuellen Befehl.
MEILENSTEINBestätigen Sie den vorgesehenen Agent und das Konto. Ist er nicht verfügbar, prüfen Sie die Kompatibilität, bevor Sie eine größere Aufgabe versuchen. - 3
Führen Sie eine kleine Copilot-Aufgabe aus
Verwenden Sie ein kleines Briefing, damit Sie den gesamten Ablauf beurteilen können, einschließlich einer Überarbeitung.
Start-BriefingErstellen Sie einen Einstellungsbildschirm mit einem Profilformular und einer Speicherbestätigung. Verwenden Sie meine Designregeln. Prüfen Sie ihn bei Desktop- und Mobilbreiten.
MEILENSTEINÖffnen Sie das Ergebnis, testen Sie den Speicherstatus und fordern Sie eine konkrete Änderung an. Eine generierte Datei ist der Beginn der Überprüfung, nicht das Ende.
Um OpenDesign aus dem Quellcode auszuführen, folgen Sie stattdessen dem technischen Schnellstart.
Der Copilot-Design-Workflow
Der Copilot-Design-Workflow in fünf Schritten
Die gleiche Launch-Seiten-Aufgabe, verfolgt vom Briefing bis zur verifizierten Datei. Jeder Schritt listet auf, was Sie beisteuern, was Copilot übernimmt, was OpenDesign beiträgt und was Sie prüfen.
- 1
Design-Briefing
Klare Sprache, drei bis sechs Zeilen. Benennen Sie die Zielgruppe, die Aufgabe des Screens und die Plattformen.
- SieSchreiben Sie das Briefing; hängen Sie einen Referenz-Screenshot an, falls vorhanden.
- CopilotLiest das Briefing und die Anweisungsdatei des Projekts; fragt nach, wenn etwas unklar ist.
- OpenDesignStellt das Projekt, die Prompt-Oberfläche und das Skill für den Artefakttyp bereit.
- PrüfenStellen Sie sicher, dass das Briefing die Abnahmekriterien enthält. Diese jetzt hinzuzufügen ist günstiger als nach der Generierung.
- 2
Design-Vorgaben
Ein Design-System und ein paar feste Regeln. Das unterscheidet markenkonforme Ergebnisse von einem generischen Look.
- SieWählen Sie ein Design-System; legen Sie Breakpoints und verbindlich zu verwendende Komponenten fest.
- CopilotLädt die DESIGN.md-Tokens und Posture-Regeln in den Kontext, bevor eine Zeile geschrieben wird.
- OpenDesignLiefert die Design-System-Bibliothek und bindet das ausgewählte System in die Skill-Vorlage ein.
- PrüfenDie Token entsprechen Ihrer Marke. Ein Akzent, die richtigen Schriften, der richtige Radius.
- 3
Die Oberfläche generieren
Copilot schreibt eine eigenständige HTML-Datei: Layout, Styles, Interaktionen und stabile Hooks.
- SieWarten Sie, oder beantworten Sie eine Rückfrage. Nichts zu konfigurieren.
- CopilotPlant die Abschnitte, schreibt das HTML, CSS und JavaScript, führt die Datei aus und behebt Fehler.
- OpenDesignSpeichert das Artefakt im Projektordner und indexiert es für die Vorschau.
- PrüfenNoch nichts. Beurteilen Sie die Datei nach dem Rendern, nicht anhand des Quellcodes.
- 4
Vorschau
Die Datei wird innerhalb von OpenDesign in den angeforderten Breiten dargestellt. Hier wird das Design beurteilt.
- SieWechseln Sie zwischen Breiten, klicken Sie sich durch die Interaktionen, hinterlassen Sie Kommentare zu Elementen.
- CopilotLiest Ihre Kommentare zur Vorschau und bereitet die nächste Überarbeitung vor.
- OpenDesignRendert die Vorschau, stellt
data-od-id-Ziele für Kommentare und Änderungen bereit. - PrüfenHierarchie, Kontrast, Überlauf bei 390px, Fokuszustände und ob der Akzent sparsam eingesetzt wird.
- 5
Überarbeiten und Verifizieren
Fordern Sie Änderungen an, indem Sie auf Elemente in der Vorschau zeigen. Jede Überarbeitung ist eine neue Datei; nichts wird stillschweigend überschrieben.
- SieVerwandeln Kommentare in Anfragen; entscheiden, wann die Aufgabe abgeschlossen ist.
- CopilotWendet die Änderungen direkt an und führt die Datei erneut aus.
- OpenDesignBehält Versionen nebeneinander; exportiert ein Bild oder das HTML, wenn Sie fertig sind.
- PrüfenNur den geänderten Bereich erneut prüfen, dann die gesamte Seite einmal bei jedem Breakpoint.
Ressourcen
Copilot-Design-Ressourcen
Skills Skills durchsuchen Design-Systeme Systeme durchsuchen Vorlagen Vorlagen durchsuchen
Design Skills
Die Artefakttypen, die Copilot in OpenDesign erzeugen kann, ein Skill pro Typ.
Design Systems
Marken-Tokens und Komponenten, die vor der Generierung durch Copilot gebunden werden müssen.
Vorlagen
Ausgangspunkte für Decks, Landingpages und Produktbildschirme.
Einschränkungen
Einschränkungen von Copilot, manuelle Prüfungen und Fallbacks
- UmfangEs liest benutzerdefinierte Anweisungsdateien und AGENTS.md automatisch und lässt Sie je Aufgabe zwischen Frontier-Modellen von Anthropic, OpenAI und Google wechseln. Diese Seite behandelt Copilot als mit OpenDesign verbundenen Agent, nicht jede Copilot-Funktion.
- NutzungslimitsNutzungslimits und Kosten richten sich nach dem verwendeten Zugang (GitHub Copilot-Abonnement). Diese Seite macht keine Angaben zu kostenlosen Kontingenten.
- NetzwerkLokale Projektdateien bedeuten nicht, dass die Inferenz offline erfolgt. Prüfen Sie die Anbietereinstellungen und Datenrichtlinien Ihres Agents, bevor Sie sensible Eingaben teilen.
- Ausgabe ist HTMLArtefakte sind HTML-Dateien, keine Vektor-Designdateien.
- Manuelle ÜberprüfungBarrierefreiheit, echte Inhalte, Markenkonformität und korrekte Interaktionen werden von Ihnen in der Vorschau geprüft. Betrachten Sie jede Selbstprüfung des Agents als ersten Durchgang.
- FallbackWenn der Agent nicht verfügbar ist oder eine Aufgabe fehlschlägt, prüfen Sie die Verbindungsanleitung und Authentifizierung der installierten Version. Bewahren Sie den Fehler und das letzte funktionierende Artefakt auf, bevor Sie die Konfiguration ändern.
FAQ
Häufige Fragen zu Copilot und OpenDesign
Kann GitHub Copilot CLI wirklich Designarbeit leisten?
Ja — mit einem Aesthetic Skill, einem Design System und echten Referenzbildern im Kontext erzeugt Copilot CLI produktionsreife, responsive UI, und Sie können das Modell wählen, das die Ausgabe am besten gegen Referenzen prüft. Ohne diesen Kontext tendiert es zu einem generischen Look — genau diese Lücke schließt OpenDesign.
Benötigen Sie ein Abonnement, um mit Copilot CLI zu designen?
Ja — Copilot CLI läuft mit einem aktiven GitHub Copilot-Abonnement (Pro, Pro+, Business oder Enterprise); es ist kein Bring-your-own-Key-Modell. Sie authentifizieren sich mit Ihrem GitHub-Konto. OpenDesign leitet Ihre Zugangsdaten niemals über einen Proxy — Ihr Abonnement wird direkt von Ihrem Agent genutzt.
Was macht Copilot CLI speziell für Design gut?
Zwei Dinge: Es liest Repository-Anweisungen und AGENTS.md automatisch, sodass Ihre Designkonventionen mit dem Repository mitreisen; und es lässt Sie je Aufgabe zwischen Frontier-Modellen von Anthropic, OpenAI und Google wechseln. Beides hilft — aber der Geschmack kommt weiterhin aus dem Design System, dem Skill und den Referenzen, die Sie bereitstellen.
Copilot CLI oder Claude Code für Frontend-Design?
Beide sind stark. Claude Code ist bekannt für spezifische, codebase-bewusste Design-Entscheidungen; die Stärke von Copilot CLI ist die Modellauswahl über verschiedene Anbieter hinweg und die tiefe GitHub-Integration im Rahmen eines Abonnements, das Sie möglicherweise schon haben. Viele Teams nutzen beide – mit OpenDesign können Sie Agents wechseln, ohne Ihren Design-Workflow zu ändern.
Wie verbinde ich Copilot CLI mit Figma?
Fügen Sie den Figma MCP Server mit dem Befehl /mcp add hinzu; die Einstellungen werden in mcp-config.json unter ~/.copilot gespeichert. Copilot kann dann echten Design-Kontext abrufen – Komponenten, Variablen, Layout-Daten –, sodass der generierte Code der Quelle entspricht, statt sie nur anzunähern.
Starten Sie eine erste Design-Aufgabe mit Copilot
Beginnen Sie mit einer kleinen Aufgabe, bewerten Sie den Ablauf, und bringen Sie dann das eigentliche Briefing ein. Wählen Sie die Option, die zu Ihrem Setup passt; die Seite erkennt dies nicht automatisch.