Agentic Design System
Richtlinien-Autor für Designsysteme mit festen Brand-Tokens und einer QA-Checkliste
Getestet · Funktioniert
Was es kann
Erstellt implementierungsreife Designsystem-Richtlinien im Agentic-Brand-Stil: feste Farb-/Typ-/Abstands-Tokens, erforderliche Komponentenstatus, WCAG 2.2 AA Akzeptanzkriterien und eine Code-Review-QA-Checkliste. Wird ausgelöst beim Schreiben von Komponentenspezifikationen oder einer Designsprache für eine konversationelle, KI-zentrierte Produktoberfläche.
Testbericht
Auf einer Button-Spezifikation gegen eine Baseline ohne Skill ausgeführt: Die erzwungene Token-Tabelle des Skills und seine 'Ästhetik-vs-Barrierefreiheit-Konflikte'-Prüfung zeigten, dass die eigene Marken-Primärfarbe #FF5701 auf Weiß nur ein Kontrastverhältnis von 3.17:1 erreicht und den WCAG AA Textkontrast nicht erfüllt, ein Fehler, den die einfache Baseline-Spezifikation übersehen hatte. Eindeutig strukturiertere und testbarere Ausgabe; der Schwachpunkt ist die Frontmatter-Beschreibung, die wie ein UI-Archetyp klingt und nie 'Designsystem' sagt, wodurch sie bei agentischen Codierungsaufgaben fehlzünden könnte.
Getestet am: 2026-07-18 · Claude Code 2.x (agent harness)
Installation
git clone https://github.com/bergside/awesome-design-skills.git mkdir -p ~/.claude/skills cd awesome-design-skills && cp -r skills/agentic ~/.claude/skills/agentic
Befehle & Beispiel-Prompts
/agenticRichtlinien-Autor für Designsysteme mit festen Brand-Tokens und einer QA-Checkliste
Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):
I need token-based design guidelines for a primary button in our AI chat UI.Can you write component specs for a delegated-task agent interface?Help me draft a design system for my conversational AI product's UI.