Agentic Design System
Auteur van design-system richtlijnen met vaste merktokens en een QA-checklist
Getest · Werkt
Wat het doet
Stelt implementatieklare design-system richtlijnen op in de Agentic merkstijl: vaste kleur-/type-/spatiëringstokens, vereiste componentstatussen, WCAG 2.2 AA acceptatiecriteria en een code-review QA-checklist. Activeert bij het schrijven van component specificaties of een ontwerptaal voor een conversationele, AI-first product-UI.
Testrapport
Uitgevoerd op een Button-specificatie tegen een no-skill baseline: de gedwongen tokentabel van de skill plus de 'flag aesthetics-vs-accessibility conflicts'-poort bracht aan het licht dat de eigen merk primaire kleur #FF5701 slechts 3.17:1 contrast heeft op wit en faalt voor WCAG AA tekstcontrast, een defect dat de gewone baseline-specificatie miste. Echt gestructureerdere en beter testbare output; het zwakke punt is de frontmatter-beschrijving, die leest als een UI-archetype en nooit 'design system' zegt, dus het risico bestaat dat het misgaat bij agentic coding taken.
Getest op: 2026-07-18 · Claude Code 2.x (agent harness)
Installatie
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
Commando's en voorbeeldprompts
/agenticAuteur van design-system richtlijnen met vaste merktokens en een QA-checklist
Skills reageren op gewone verzoeken — geen commando's om te onthouden. Na installatie activeren prompts zoals deze de skill (in het Engels):
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.