AI DS Composer

Resonerar genom designsystem-metadata för att komponera UI från befintliga komponenter istället för att uppfinna ny kod.

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

Testad · Fungerar ★ 9.2/10

AI DS Composer — Resonerar genom designsystem-metadata för att komponera UI från befintliga komponenter istället för att uppfinna ny kod.

Vad den gör

Vägleder Claude att läsa ett projekts hierarkiska designsystem-metadata (filosofi på toppnivå, per-atom/molekyl/organism metadatafiler) och välja komponenter, varianter och props genom att citera selectionCriteria snarare än intuition. Utlöses vid generering eller modifiering av UI-komponenter/layouter där återanvändning och efterlevnad av ett befintligt designsystem är viktigt, och flaggar uttryckligen anti-mönster och omapade krav istället för att tyst uppfinna komponenter.

Testrapport

Bad om en framträdande hero CTA-knapp till /pricing: baslinjesvaret gav bara <Button href> utan vidare eftertanke, medan skillen lyfte fram det medföljande anti-mönstret ('Button for plain navigation → use Link') och sedan uttryckligen resonerade genom det dokumenterade undantaget för primära hero CTA:er innan den behöll Button — ett beslut som baslinjen aldrig ens övervägde.

Testad: 2026-07-14 · Claude Code 2.x (agent harness)

Installation

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

Kommandon och exempelprompter

/ai-ds-composerResonerar genom designsystem-metadata för att komponera UI från befintliga komponenter istället för att uppfinna ny kod.

Skills triggas av vanliga förfrågningar — inga kommandon att memorera. Efter installationen aktiverar prompter som dessa skillen (på engelska):

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?

Läs hela rapporten →