AI DS Composer
Argumentiert anhand von Design-System-Metadaten, um UI aus bestehenden Komponenten zusammenzusetzen, anstatt neuen Code zu erfinden.
Getestet · Funktioniert
Was es kann
Leitet Claude an, die hierarchischen Design-System-Metadaten eines Projekts (Top-Level-Philosophie, Metadaten-Dateien pro Atom/Molekül/Organismus) zu lesen und Komponenten, Varianten und Props unter Berufung auf selectionCriteria statt Intuition auszuwählen. Wird beim Generieren oder Modifizieren von UI-Komponenten/Layouts ausgelöst, wo Wiederverwendung und Einhaltung eines bestehenden Design-Systems wichtig sind, und kennzeichnet explizit Anti-Patterns und nicht zugeordnete Anforderungen, anstatt stillschweigend Komponenten zu erfinden.
Testbericht
Habe nach einem prominenten Hero-CTA-Button zu /pricing gefragt: Die Baseline-Antwort gab einfach <Button href> aus, ohne weitere Überlegung, während der Skill das gebündelte Anti-Pattern ('Button für einfache Navigation → Link verwenden') aufzeigte und dann explizit die dokumentierte Ausnahme für primäre Hero-CTAs durchdachte, bevor er Button beibehielt – eine Entscheidung, die die Baseline nie in Betracht gezogen hatte.
Getestet am: 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
Befehle & Beispiel-Prompts
/ai-ds-composerArgumentiert anhand von Design-System-Metadaten, um UI aus bestehenden Komponenten zusammenzusetzen, anstatt neuen Code zu erfinden.
Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):
I need a button for the hero section, what fits our design system?Build this card using our existing design system componentsDoes this new Modal fit our design system or should I reuse something?