AI DS Composer

Raisonnement à travers les métadonnées du système de conception pour composer l'interface utilisateur à partir de composants existants au lieu d'inventer du nouveau code.

par cris-achiardi · cris-achiardi/claude-skills

Testé · Fonctionne ★ 9.2/10

AI DS Composer — Raisonnement à travers les métadonnées du système de conception pour composer l'interface utilisateur à partir de composants existants au lieu d'inventer du nouveau code.

Ce que fait

Guide Claude à lire les métadonnées hiérarchiques du système de conception d'un projet (philosophie de haut niveau, fichiers de métadonnées par atome/molécule/organisme) et à choisir les composants, variantes et propriétés en citant les selectionCriteria plutôt que l'intuition. Se déclenche lors de la génération ou de la modification de composants/layouts d'interface utilisateur où la réutilisation et l'adhésion à un système de conception existant sont importantes, et signale explicitement les anti-modèles et les exigences non mappées au lieu d'inventer silencieusement des composants.

Rapport de test

Demandé un bouton CTA de héros proéminent vers /pricing : la réponse de base a simplement émis <Button href> sans autre réflexion, tandis que la compétence a mis en évidence l'anti-modèle intégré ('Button for plain navigation → use Link') et puis a explicitement raisonné à travers l'exception documentée pour les CTA de héros primaires avant de conserver Button — une décision que la base de référence n'avait même jamais envisagée.

Testé le: 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

Commandes et exemples de prompts

  • /ai-ds-composerRaisonnement à travers les métadonnées du système de conception pour composer l'interface utilisateur à partir de composants existants au lieu d'inventer du nouveau code.

Les skills se déclenchent sur des demandes en langage courant — aucune commande à retenir. Après installation, des prompts comme ceux-ci l'activent (en anglais) :

  • 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?