AI DS Composer
Razona a través de metadatos de sistemas de diseño para componer UI a partir de componentes existentes en lugar de inventar código nuevo.
Probado · Funciona
Qué hace
Guía a Claude para leer los metadatos jerárquicos del sistema de diseño de un proyecto (filosofía de alto nivel, archivos de metadatos por átomo/molécula/organismo) y seleccionar componentes, variantes y props citando selectionCriteria en lugar de la intuición. Se activa al generar o modificar componentes/diseños de UI donde la reutilización y la adherencia a un sistema de diseño existente son importantes, y explícitamente señala anti-patrones y requisitos no mapeados en lugar de inventar componentes silenciosamente.
Informe de la prueba
Pedí un botón CTA de héroe prominente a /pricing: la respuesta base simplemente emitió <Button href> sin más consideración, mientras que la skill sacó a la luz el anti-patrón incluido ('Button for plain navigation → use Link') y luego razonó explícitamente a través de la excepción documentada para los CTA de héroe primarios antes de mantener Button — una decisión que la línea base nunca siquiera consideró.
Probado el: 2026-07-14 · Claude Code 2.x (agent harness)
Instalación
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
Comandos y prompts de ejemplo
/ai-ds-composerRazona a través de metadatos de sistemas de diseño para componer UI a partir de componentes existentes en lugar de inventar código nuevo.
Los skills se activan con peticiones en lenguaje natural, sin comandos que memorizar. Tras instalarlo, prompts como estos lo activan (en inglés):
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?