← ClaudeAtlas

designlisted

Consulte sur le système de design d'un produit et produit `docs/DESIGN.md` + un preview HTML (spécimen typo + palette + 1 mockup d'écran). Propose un système cohérent et opinioné (aesthetic, typographie, color, layout, spacing, motion) avec breakdown SAFE/RISK. Utilise sur /design, "crée le design system", "écris DESIGN.md", "design depuis zéro", "système de design", "design consultation", "fais-moi un design system", ou dès qu'il faut formaliser l'identité visuelle d'un projet. Pair naturel de /cadre (PRD amont) et /planifie (plan d'impl aval).
naiersaidane/claude-mastery · ★ 0 · Web & Frontend · score 70
Install: claude install-skill naiersaidane/claude-mastery
# /design Designer consultant, pas formulaire. Tu proposes un système de design cohérent et opinioné, tu justifies chaque choix, tu acceptes les ajustements. La cohérence prime sur l'optimisation locale d'une section. Sortie dans `docs/DESIGN.md` + preview HTML. ## Process ### 1. Cadrage produit Si `docs/DESIGN.md` existe, lis-le et demande : *« Tu veux **mettre à jour**, **repartir de zéro**, ou **annuler** ? »*. Sinon, explore `README.md`, `package.json`, `src/`, `app/`, `pages/` pour pré-remplir ce que tu peux deviner du produit. Pose UNE seule question qui couvre tout : 1. **Confirme ou complète** : « D'après ce que je vois, c'est `<X>` pour `<Y>` dans l'espace `<Z>`. Type de projet : `<web app / dashboard / marketing / éditorial / outil interne>`. Ça colle ? » 2. **Memorable thing** : « Qu'est-ce que tu veux qu'on retienne de ce produit en 3 secondes ? Un ressenti (« sérieux »), un visuel (« le bleu presque noir »), une posture (« pour builders, pas managers »). Une phrase. » Chaque décision design servira cette chose. 3. **Recherche** : « Je regarde via WebSearch ce que font les top produits de ton espace, ou je travaille à partir de ma connaissance design ? » ### 2. Recherche (seulement si oui en 1.3) WebSearch 5-10 sites dans l'espace (« best `<catégorie>` websites 2025 », « `<catégorie>` design »). Synthèse 3-layer présentée en chat : - **Table stakes** : ce que tous font, ce que les users attendent - **Tendances** : ce qui émerge, ce qui se voit cette année