设计与多媒体

design

naiersaidane/cl…-mastery

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).

  • 509 次安装
  • 63 星标
  • 收录于

安装命令

npx skills add https://github.com/naiersaidane/claude-mastery --skill design

SKILL.md

/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 :