AI DS Composer

Resonnerer gjennom designsystem-metadata for å komponere UI fra eksisterende komponenter i stedet for å finne opp ny kode.

av cris-achiardi · cris-achiardi/claude-skills

Bestått ★ 9.2/10

AI DS Composer — Resonnerer gjennom designsystem-metadata for å komponere UI fra eksisterende komponenter i stedet for å finne opp ny kode.

Hva den gjør

Veileder Claude til å lese et prosjekts hierarkiske designsystem-metadata (filosofi på toppnivå, metadatafiler per atom/molekyl/organisme) og velge komponenter, varianter og props ved å sitere selectionCriteria i stedet for intuisjon. Utløses ved generering eller modifisering av UI-komponenter/layouter der gjenbruk og overholdelse av et eksisterende designsystem er viktig, og flagger eksplisitt anti-mønstre og udefinerte krav i stedet for å stille oppfinne komponenter.

Testrapport

Ba om en fremtredende hero CTA-knapp til /pricing: baseline-svaret sendte bare ut <Button href> uten ytterligere tanke, mens skill-en avdekket det medfølgende anti-mønsteret ('Button for plain navigation → use Link') og deretter eksplisitt resonnerte gjennom det dokumenterte unntaket for primære hero CTA-er før den beholdt Button — en beslutning baseline aldri engang vurderte.

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

Installer

git clone https://github.com/cris-achiardi/claude-skills
cd claude-skills
mkdir -p ~/.claude/skills
cp -r skills/ai-ds-composer ~/.claude/skills/ai-ds-composer

Kommandoer og eksempelprompter

/ai-ds-composerResonnerer gjennom designsystem-metadata for å komponere UI fra eksisterende komponenter i stedet for å finne opp ny kode.

Skills utløses av vanlige forespørsler — ingen kommandoer å huske. Etter installasjonen aktiverer prompter som disse skillen (på engelsk):

I need a button for the hero section, what fits our design system?
Build this card using our existing design system components
Does this new Modal fit our design system or should I reuse something?

Full rapport →