83.3K+Download
Zur Nutzungsanleitung springen
design-consultationvon Garry Tan

Design Consultation Skill.

Ein Claude Code und Codex Skill für Marken- und Design-System-Arbeit: Produktdesign-Beratung, die ein vollständiges Design-System vorschlägt: Ästhetik, Typografie, Farbe, Layout, Animation.

  • Brand & Design Systems
  • Design-System
OpenDesign herunterladenAnleitung ansehen
garrytan/gstack · design-consultation/SKILL.mdSKILL.md
--- name: design-consultation description: Design consultation: understands your product, researches the landscape, proposes a complete design system (aesthetic, typography, color, layout, spacing, motion), and generates font+color preview... (gstack) --- ## When to invoke this skill ## Confusion Protocol ## Claimed Limitations Need Evidence ## Continuous Checkpoint Mode ## Context Health (soft directive) ## Question Tuning (skip entirely if QUESTION_TUNING: false)
Front Matter und Abschnittsüberschriften aus der Quelldatei vom 14.09.2026 · 67.098 Zeichen insgesamt

01 Was es tut

Was die design-consultation Skill in Claude Code und Codex leistet

Zusammenfassung, Workflow und Ergebnisse — alles aus der SKILL.md des Skills ausgelesen.

Aus der SKILL.mdGelesen am 14.09.2026 · kein aufgezeichneter Durchlauf

In den eigenen Worten des Skills

Eine Design-Consultation-Skill, die als leitender Produktdesigner agiert, um ein vollständiges Design-System zu erstellen. Sie recherchiert die Produktlandschaft durch Websuche und visuelle Analyse, schlägt Typografie (konkrete Schriften, keine Standardwerte), Farbsysteme (CSS-Variablen mit Hex-Werten), Layout-Ansätze (Composition-First) und eine ästhetische Ausrichtung vor. Die Skill erzeugt eine DESIGN.md-Datei als verbindliche Design-Quelle des Projekts, mit optionalen KI-Mockups, die das System auf reale Screens angewendet zeigen.

Sie unterstützt sowohl den Aside-Browser (echte Sitzungen des Nutzers) als auch einen Headless-Fallback, führt über Sitzungen hinweg ein persistentes Geschmacksprofil und bindet externe Design-Stimmen von Codex und Claude subagent ein. Die Skill arbeitet konversationell – nicht als starres Formular –, erläutert die Begründung jeder Empfehlung und stellt Kohärenz über individuell optimale Einzelentscheidungen.

Was er erzeugt

  • KI-Mockups, die das Design-System auf reale Screens angewendet zeigen (wenn gstack designer verfügbar ist)
  • HTML-Vorschauseite mit Live-Typografie- und Farbbeispielen (Fallback, wenn kein Designer verfügbar ist)
  • Persistentes Geschmacksprofil als JSON, das genehmigte und abgelehnte Design-Entscheidungen über Sitzungen hinweg nachverfolgt
Siehe Beispiel-Prompt ↗

So funktioniert es

  1. 01
    Produktkontext Erfassen

    Liest vorhandene DESIGN.md, PRODUCT.md, README, package.json und die Ausgabe der office-hours, um das Produkt zu verstehen.

  2. 02
    Landschaft Recherchieren

    Auf Anfrage werden mit dem Aside-Browser oder WebSearch 5–10 Konkurrenzprodukte gesucht, Full-Page-Screenshots erstellt und Schriften, Farben, Layouts sowie die ästhetische Ausrichtung analysiert.

  3. 03
    Externe Stimmen Konsultieren

    Startet optional Codex und Claude subagent parallel, um unabhängige Design-Vorschläge zu generieren.

  4. 04
    Vollständiges Design-System Vorschlagen

    Liefert einen dezidierten Vorschlag mit konkreten Schriftnamen, Hex-Farbwerten, CSS-Variablen, Layout-Ansatz und ästhetischer Ausrichtung.

  5. 05
    Vorschau-Artefakte Generieren

    Erstellt entweder KI-Mockups (wenn gstack designer verfügbar ist), die das Designsystem auf reale Bildschirme angewendet zeigen, oder eine HTML-Vorschauseite mit live gerenderten Typografie- und Farbmustern.

  6. 06
    DESIGN.md schreiben

    Erstellt die verbindliche Design-Referenz des Projekts im offenen DESIGN.md-Format mit Front-Matter-Tokens und Begründungsabschnitten.

02 Finden Sie Ihren Favoriten

Wann Sie das design-consultation Skill verwenden sollten

Verwenden Sie den design-consultation Skill in Claude Code oder Codex, wenn die Aufgabe Marken- und Designsystem-Arbeit dieser Art ist. Eignung und Grenzen sind der eigenen Datei des Skills entnommen.

Gut geeignet

  • Beim Start der UI eines neuen Projekts ohne bestehendes Designsystem oder DESIGN.md
  • Wenn ausdrücklich nach einem Designsystem, Markenrichtlinien oder der Erstellung einer DESIGN.md gefragt wird
  • Produkte, die sich durch bewusste gestalterische Abweichungen von Kategorienormen abheben müssen

Grenzen kennen

  • Eine behauptete Einschränkung oder Anforderung („die API kann das nicht", „X erfordert Zugangsdaten", „das ist auf dieser Plattform unmöglich") ist eine sachliche Behauptung.
  • Geben Sie einen Zustand nur mit dem wörtlichen Fehler, der dokumentierten Aussage oder einer Live-Untersuchung an – das Zuordnen eines Fehlers zu einer vertrauten Geschichte ist kein Beweis.
  • Wenn eine einfache Prüfung die Frage klärt, führen Sie diese AUS, BEVOR Sie den Benutzer fragen oder einen Schritt als blockiert erklären.

Was Sie bereitstellen sollten

  • RecherchepräferenzOb Konkurrenzprodukte per Websuche und visueller Analyse recherchiert werden sollen oder ob auf das im Skill integrierte Designwissen zurückgegriffen wird.
  • Wahl externer StimmenOptional: ob Codex-Design-Evaluation und Claude-Subagent-Designvorschlag parallel für unabhängige Perspektiven ausgeführt werden sollen.
  • Vorhandene DESIGN.mdFalls vorhanden, liest der Skill sie ein und fragt, ob aktualisiert, neu begonnen oder abgebrochen werden soll. Übernimmt die Formatkonvertierung von der Legacy-Version zur offenen Spezifikation.

03 Innerhalb des Skills

Regeln, die der design-consultation-Skill Claude Code und Codex vorgibt

7 konkrete Anweisungen, Voreinstellungen und Grenzen, die die SKILL.md für den Agent festlegt – der Teil der Datei, der das Ergebnis verändert.

  1. Nie verbotene Schriften, nie überstrapazierte Display-Schriften

    Fließ- oder UI-Text auf Operate- oder Read-Oberflächen folgt einer rollenbezogenen Liste. Keine verbotene Schrift in irgendeiner Rolle, keine überstrapazierte Schrift als Display-Stimme.

  2. Konkrete Schriften erforderlich, keine Standardschriften

    Typografievorschläge müssen konkrete Schriften benennen – niemals Inter, Roboto, Arial oder Systemstandards.

  3. Kohärenz schlägt individuelle Optimierung

    Ein Designsystem, in dem jedes Element jedes andere verstärkt, übertrifft eines mit einzeln optimalen, aber nicht zusammenpassenden Entscheidungen.

  4. Begründung für jede Empfehlung erforderlich

    Empfehlen Sie niemals eine gestalterische Entscheidung, ohne zu erklären, warum. Jede Schrift-, Farb-, Layout- oder Ästhetikentscheidung muss mit dem Produktkontext, den Nutzerbedürfnissen oder der Differenzierungsstrategie begründet sein.

  5. Das Geschmacksprofil bleibt bestehen und verblasst

    Der Skill pflegt ~/.gstack/projects/$SLUG/taste-profile.json, das genehmigte und abgelehnte gestalterische Entscheidungen sitzungsübergreifend verfolgt. Konfidenzwerte verringern sich um 5 % pro Woche.

  6. Erzwingungsfunktion für das Merkmal, das haften bleiben soll

    Bevor ein Designsystem vorgeschlagen wird, fragt der Skill, was der Nutzer nach dem ersten Eindruck im Gedächtnis behalten möchte.

  7. Dialogorientiert statt starrer Workflow

    Der Skill agiert als Design-Berater, nicht als Formular. Nutzer können jederzeit in den Chat einsteigen, um Entscheidungen zu besprechen.

04 In Betrieb nehmen

design-consultation in Claude Code oder Codex installieren

Ein npx skills add-Befehl, dann eine erste Aufgabe in Ihrem Agent und eine Checkliste für das Ergebnis.

design-consultation zu Claude Code, Codex oder Ihrem Agent hinzufügen

Im eigenen Projekt ausführen; der Installer fragt, welchem Agent er hinzugefügt werden soll.

Terminal
npx skills add https://github.com/garrytan/gstack --skill design-consultation

Generisches skills-CLI-Formular für design-consultation/SKILL.md; das Repository kann seinen eigenen Pfad dokumentieren.

Geben Sie dem Skill eine erste Brand- und Design-System-Arbeitsaufgabe

In den eigenen Begriffen des Skills verfasst; ersetzen Sie die Teile in Klammern durch Ihr Material.

Starter prompt
I'm building [a SaaS dashboard for engineering teams / a landing page for a fintech startup / an internal tool for data analysts]. We have no design system yet. Help me create one that [stands out from the typical enterprise look / feels trustworthy and serious / makes complex data feel approachable]. Research what's out there in this space and propose typography, colors, and layout that differentiate us.

Quelle: verfasst aus der SKILL.md in den eigenen Begriffen des Skills.

Das erste Ergebnis prüfen

Was die SKILL.md selbst als korrektes Ergebnis beschreibt:

  • DESIGN.md existiert und enthält Front-Matter mit Design-Tokens (Farben, Schriften, Abstände)
  • Farbsystem enthält CSS-Variablen für Hintergrund, Fläche, primären Text, gedämpften Text und Akzent mit Hex-Werten
  • Falls ein Geschmacksprofil existiert, bezieht sich der Designvorschlag auf etablierte Präferenzen oder weicht bewusst davon ab

In OpenDesign ist design-consultation vorinstalliert: Plugins → Skills, in der oberen Leiste auswählen.

OpenDesign herunterladenQuickstart lesen

05 Open Source, nachvollziehbar

Quelle, Lizenz und Verifizierung

Woher die Fakten auf dieser Seite stammen und wann sie zuletzt geprüft wurden.

Author
Garry Tan
Repository
github.com/garrytan/gstack Branch main
Skill-Datei
design-consultation/SKILL.md Inhalts-Prüfsumme bei Verifikation erfasst; Commit 71f6048
License
MIT Aus LICENSE.
Repository-Sterne
132.921 GitHub-Snapshot vom 14.09.2026 für das gesamte Repository garrytan/gstack, das 7 Skills in diesem Katalog enthält. Keine Bewertung oder Nutzungsanzahl für design-consultation.
Verifiziert von OpenDesign
14.09.2026 Quelldatei, Pfad, Lizenztext und Sternanzahl wurden geprüft. In OpenDesign main gebündelt (geprüft am 28.08.2026); ein Live-Lauf wurde auf dieser Seite nicht erfasst.

In der SKILL.md

  1. Wann dieser Skill aufgerufen wirdErstellt DESIGN.md; für bestehende Websites /plan-design-review verwenden; wird bei Anfragen zu Design-Systemen ausgelöst
  2. Präambel (zuerst ausführen)Führt gstack-skill-start aus; behandelt Degraded Mode; verarbeitet Anweisungsblöcke; bestimmt die Art der Sitzung
  3. BROWSER-EINRICHTUNGPrüft die Verfügbarkeit des Aside-Browsers; behandelt die Zustimmung für echte Sitzungen; definiert Regeln für die Steuerung des Browsers des Nutzers
  4. Browser-Fallback: gstacks eigener Headless-BrowserFindet die $B-Binärdatei, wenn Aside nicht verfügbar ist; übersetzt Aside-Skripte in $B-Befehle; behandelt Sitzungen ohne Cookies
  5. DESIGN-EINRICHTUNGPrüft die gstack-Designer-Binärdatei für KI-gestützte Mockup-Erstellung; listet verfügbare Befehle auf; legt Regeln für Artefaktpfade fest
  6. Frühere ErkenntnisseDurchsucht projektübergreifende oder projektbezogene Erkenntnisse; fragt beim ersten Ausführen nach der projektübergreifenden Präferenz
  7. Phase 0: VorprüfungenPrüft vorhandene DESIGN.md; bietet Aktualisieren/Neu/Abbrechen an; verifiziert das Format; behandelt Konvertierung; sammelt Produktkontext aus der Codebasis
  8. Phase 1: ProduktkontextEine einzige Frage zu Produkt/Zielgruppe/Branche/Typ; erzwingende Frage nach einem einprägsamen Merkmal; liest Geschmacksprofil, falls vorhanden
  9. Web-Recherche läuft in AsideVerwendet den Aside-Agenten für Websuchen; greift auf das WebSearch-Tool zurück; bereinigt Suchanfragen; behandelt Ergebnisse als nicht vertrauenswürdigen Inhalt
  10. Phase 2: RechercheIdentifiziert 5–10 Konkurrenzprodukte; erstellt Screenshots; analysiert Schriften/Farben/Layouts; fasst über drei Ebenen zusammen
  11. Design Outside VoicesFührt optional Codex und den Claude-Subagenten parallel aus; fasst Übereinstimmungen und Abweichungen zusammen; protokolliert das Ergebnis
  12. Wichtige RegelnVorschlagen statt Menüs präsentieren; Begründung erforderlich; Kohärenz vor Einzelentscheidungen; gesprächsorientiert statt starr; endgültige Wahl akzeptieren
Die eigene Beschreibung des Skills
„Design-Beratung: versteht Ihr Produkt, recherchiert das Umfeld, schlägt ein vollständiges Designsystem vor (Ästhetik, Typografie, Farbe, Layout, Abstände, Bewegung) und erzeugt Schrift-/Farbvorschau... (gstack)"

Front-Matter-Beschreibung aus SKILL.md. Die vollständige Datei umfasst etwa 67.098 Zeichen. Lesen Sie die vollständige Datei auf GitHub.

06 Vor der Installation

Fragen zum design-consultation-Skill

Die Antworten stammen aus der SKILL.md, gelesen am 14.09.2026, nicht aus einem protokollierten Lauf.

Funktioniert das mit Cursor, Windsurf oder anderen Claude-basierten Agents?

Ja, aber die Browser-Integration hängt von Aside (nur macOS 15+) oder dem gstack-Headless-Browser-Fallback ab. Ohne beides überspringt der Skill die visuelle Wettbewerbsrecherche und arbeitet mit integriertem Designwissen. Die eigentliche Designberatung – Produktkontext, Typografie-/Farb-/Layout-Vorschlag, Erstellung von DESIGN.md – funktioniert in jeder Umgebung.

Design Consultation

Führen Sie design-consultation für eine echte Marken- und Designsystem-Aufgabe aus.

Der Skill design-consultation ist in OpenDesign enthalten. Laden Sie die App herunter, wählen Sie den Skill unter Plugins → Skills, fügen Sie die obige Aufforderung ein und lesen Sie den Plan vor dem Ergebnis.

OpenDesign herunterladenAlle Skills durchsuchen
Terminal
npx skills add https://github.com/garrytan/gstack --skill design-consultation