Agentic Design System

Retningslinjeforfatter for designsystem med faste merkevare-tokens og en QA-sjekkliste

av bergside · bergside/awesome-design-skills

Bestått ★ 8.0/10

Agentic Design System — Retningslinjeforfatter for designsystem med faste merkevare-tokens og en QA-sjekkliste

Hva den gjør

Forfatter implementeringsklare retningslinjer for designsystem i Agentic-merkevarestilen: faste farge-/skrift-/avstands-tokens, nødvendige komponenttilstander, WCAG 2.2 AA akseptkriterier, og en QA-sjekkliste for kodegjennomgang. Utløses ved skriving av komponentspesifikasjoner eller et designspråk for et samtalebasert, AI-først produkt-UI.

Testrapport

Kjørte den på en Button-spesifikasjon mot en baseline uten ferdigheter: ferdighetens tvungne token-tabell pluss dens 'flag aesthetics-vs-accessibility conflicts'-port avdekket at dens egen merkevareprimærfarge #FF5701 kun oppnår 3.17:1 på hvitt og feiler WCAG AA tekstkontrast, en defekt den vanlige baseline-spesifikasjonen overså. Virkelig mer strukturert og testbar utdata; svakheten er frontmatter-beskrivelsen, som leser som en UI-arketype og aldri sier 'design system', så den risikerer å utløses feil på agentiske kodeoppgaver.

Testet på: 2026-07-18 · Claude Code 2.x (agent harness)

Installer

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 merkevare-tokens og en QA-sjekkliste

Skills utløses av vanlige forespørsler — ingen kommandoer å huske. Etter installasjonen 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.