Agentic Design System
Författare av riktlinjer för designsystem med fasta varumärkestokens och en QA-checklista
Testad · Fungerar
Vad den gör
Författar implementeringsfärdiga riktlinjer för designsystem i Agentic-varumärkesstilen: fasta färg-/typ-/avstånds-tokens, nödvändiga komponenttillstånd, WCAG 2.2 AA acceptanskriterier och en QA-checklista för kodgranskning. Utlöses vid skrivning av komponentspecifikationer eller ett designspråk för ett konversationsbaserat, AI-först-produktgränssnitt.
Testrapport
Körde den på en Button-specifikation mot en baslinje utan färdighet: färdighetens påtvingade token-tabell plus dess 'flag aesthetics-vs-accessibility conflicts'-grind visade att dess eget varumärkes primärfärg #FF5701 endast uppnår 3.17:1 på vitt och misslyckas med WCAG AA textkontrast, en defekt som den vanliga baslinjespecifikationen missade. Verkligen mer strukturerad och testbar utdata; den svaga punkten är frontmatter-beskrivningen, som läser som en UI-arketype och aldrig säger 'design system', så den riskerar att felaktigt utlösas vid agentiska kodningsuppgifter.
Testad: 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
Kommandon och exempelprompter
/agenticFörfattare av riktlinjer för designsystem med fasta varumärkestokens och en QA-checklista
Skills triggas av vanliga förfrågningar — inga kommandon att memorera. Efter installationen aktiverar prompter som dessa skillen (på engelska):
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.