Agentic Design System
Retningslinjeforfatter for designsystem med faste brand-tokens og en QA-tjekliste
Testet · Virker
Hvad det gør
Forfatter implementeringsklare retningslinjer for designsystem i Agentic-brandstilen: faste farve-/type-/afstandstokens, påkrævede komponenttilstande, WCAG 2.2 AA-acceptkriterier og en QA-tjekliste til kodegennemgang. Udløses ved skrivning af komponent-specs eller et designsprog for en konversationel, AI-først produkt-UI.
Testrapport
Kørte den på en Button-spec mod en no-skill baseline: skill'ens tvungne token-tabel plus dens 'flag aesthetics-vs-accessibility conflicts'-gate afslørede, at dens egen brand-primærfarve #FF5701 kun lander på 3.17:1 på hvid og fejler WCAG AA-tekstkontrast, en fejl den almindelige baseline-spec missede. Ægte mere struktureret og testbar output; svagheden er frontmatter-beskrivelsen, som læser som en UI-arketype og aldrig siger 'design system', så den risikerer at udløses forkert på agentic kodningsopgaver.
Testet: 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
Kommandoer og eksempelprompter
/agenticRetningslinjeforfatter for designsystem med faste brand-tokens og en QA-tjekliste
Skills udløses af almindelige forespørgsler — ingen kommandoer at huske. Efter installationen aktiverer prompter som disse skillen (på engelsk):
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.