Rückentwickelter Claude-Design-System-Prompt für KI-UI-Agenten ohne Schrott

Die meisten „Design-Assistant“-Prompts liefern generische SaaS-Vorlagen – aggressive Verläufe, Emoji-Dekorationen, abgerundete Karten und überall Inter. Trystan-SAs Claude Design System Prompt lehnt diese Muster explizit ab. Es ist ein reverse-engineertes System-Prompt (MIT-lizenziert), das eine LLM in einen meinungsstarken, barrierefreien und KI-slop-resistenten Design-Kollaborateur verwandelt.

Was ist enthalten

• claude/system-prompt.md – 20 Kapitel mit Inhaltlicher Disziplin, Ästhetischer Disziplin, Visueller Hierarchie, WCAG-Barrierefreiheit, Interaktionszuständen, Systemdenken (Komponenten + Tokens) und Respekt vor dem Medium (echtes CSS Grid, oklch(), text-wrap: pretty).
• claude/skills/ – 14 aufrufbare Prozeduren, gruppiert in Produktion (Discovery-Fragen, Frontend-Ästhetik-Richtung, Wireframe, Deck erstellen, Prototyp erstellen, Anpassbar machen, Variationen generieren), System (Design-System-Extraktion, Komponenten-Extraktion) und Review (Barrierefreiheits-Audit, KI-Slop-Check, Hierarchie-Rhythmus-Review, Interaktionszustände-Prüfung, Feinschliff-Durchlauf).
• codex/ Variante für OpenAI Codex (Single-Loop, keine Sub-Agenten).

Wie man es verwendet

Fügen Sie den Inhalt von system-prompt.md als System-Prompt für jede LLM (Claude, GPT, Gemini, lokale Modelle) ein. Der Agent folgt der Design-Philosophie und referenziert Fähigkeiten namentlich, wenn Aufgaben passen. Fähigkeiten können verknüpft werden – ein typischer Greenfield-Ablauf: discovery-questions → frontend-aesthetic-direction → wireframe → make-a-prototype → polish-pass. Ein markenbewusster Ablauf: design-system-extract → generate-variations → make-tweakable → polish-pass.

Design-Prinzipien

Der Prompt erzwingt inhaltliche Disziplin (kein Füllmaterial, jedes Element verdient seinen Platz), ästhetische Disziplin (KI-Tropen vermeiden, sich auf Palette und Ton festlegen), visuelle Hierarchie und Rhythmus (Größe, Farbe, Gewicht, Position, Dichte, Abstandsskalen), Barrierefreiheit (WCAG, semantisches HTML, Tastaturnavigation, Fokusringe, Bewegungseinstellungen), Interaktionsfeedback (Hover, Active, Disabled, Focus, Loading, Validierungszustände) und Systemdenken (Komponenten und Tokens statt einmaliger Seiten).

Für wen es geeignet ist

Entwickler, die KI-Coding-Agenten verwenden und meinungsstarke, barrierefreie Design-Outputs ohne generische SaaS-Tropen wünschen.