Design With AI

Design with AI

Protocole obligatoire pour concevoir puis implémenter un design. Ne saute aucune gate. Ne commence jamais le code de production avant que le design Figma et le plan de développement soient validés.

Lis ce fichier en entier. Charge ensuite uniquement la référence de la phase en cours :

Templates : assets/DESIGN.md.template, assets/status.yaml.template.

Skill globale : elle vit dans ce plugin (ou ~/.cursor/skills/design-with-ai/ après install.sh). Les docs de design sont toujours écrites dans le projet courant (docs/designs/…).

Pour créer le dossier : lance scripts/init-design.sh <design-name> depuis le dossier de cette skill (le script cible le git rev-parse --show-toplevel du cwd, jamais le dossier du skill).

Inputs (à collecter dès INIT)

Si un input manque, pose la question (AskQuestion si disponible). Max 7 questions. N’invente pas le type ni les exemples.

• Type de design à réaliser :
  • Inspiration : On s'inspire d'un design existant
  • Creation : On créé un design de toute pièces
• Exemples à suivre :
  • Les liens des sites / repo / photos à analyser pour comprendre l'inspiration à suivre ou les lignes de conduites de notre création
• Contenu du design

Outils

• Pour tout style générique, utilise un framework CSS/SCSS comme Tailwind.
• Style commun à la plateforme : un dossier de tokens / variables (souvent styles/).
• Styles propres à un composant : uniquement dans le composant ou la vue.
• Utilise Figma pour créer un design à valider avant le développement.

Convention par défaut, à adapter si le projet a déjà une autre organisation : variables et tokens dans styles/ (ex. styles/globals.css). Styles d’un domaine : styles/<domaine>/ (ex. styles/admin/admin.css). Classes utilitaires Tailwind dans les composants. Pas de CSS orphelin à la racine.

Machine d'états

INIT
  → DOC              (docs/designs/<slug>/ + organisation du fichier)
  → TYPE             (inspiration | creation — prompt différent)
  → GATE_BRIEF       ★ stop — type, exemples, contenu, tableau / particularités
  → FIGMA            (MCP Figma + skill figma-generate-design)
  → GATE_FIGMA       ★ stop — lien Figma à valider
  → PLAN             (mode Plan Cursor + plan dans le doc)
  → GATE_PLAN        ★ stop — plan de développement
  → BUILD            (code après validation)
  → DONE

Phases status.yaml : init | doc | type | gate_brief | figma | gate_figma | plan | gate_plan | build | done.

Reprise

1. Liste docs/designs/*/status.yaml.
2. Si le nom est donné, ouvre son status.yaml.
3. Reprends exactement à phase.
4. Si une gate est en attente, ne continue pas : réaffiche ce qui doit être validé.

Règles dures

1. Un design = un dossier docs/designs/{{designName}}/.
2. {{designName}} : slug kebab-case ASCII.
3. Document : docs/designs/{{designName}}/{{designName}}.md.
4. Stop à chaque gate. Un « ok », « valide », « continue », « go » explicite débloque.
5. Zéro implémentation UI avant GATE_FIGMA et GATE_PLAN.
6. En cas de doute (direction, lib, couleur, animation) : question à l’utilisateur. N’installe rien sans demander au préalable.
7. Mets à jour status.yaml à chaque changement de phase.

Communication pendant les gates

Chaque message de gate se termine par :

**En attente de validation — {{nom de la gate}}**

À valider :
- …

Réponds **valide** pour continuer, ou indique les corrections.

Ne commence aucun travail de la phase suivante dans le même tour.

Phase INIT

1. Collecte type, exemples (URLs / repos / photos), contenu.
2. Choisis designName (slug). Confirme-le s’il n’est pas évident.
3. Lance scripts/init-design.sh.

Phase DOC

Le script crée le dossier et copie les templates. Complète le document :

• Inputs (type, exemples, contenu)
• Tableau des éléments (inspiration) ou particularités (création)
• Placeholders Figma / plan / décisions

phase: type.

Phase TYPE

• Inspiration → charge references/inspiration.md
• Creation → charge references/creation.md

Analyse les exemples (WebFetch, navigateur, lecture de repo). En doute d’implémentation : questionne le choix du développeur.

phase: gate_brief.

GATE_BRIEF ★

Montre type, exemples, contenu, tableau ou particularités, questions ouvertes. Attends validation.

Phase FIGMA

Charge references/figma.md.

GATE_FIGMA ★

Propose le lien Figma. Attends validation / ajustements. Si correction : reboucle FIGMA puis re-gate.

Phase PLAN

Charge references/developpement.md. Passe en mode Plan Cursor (SwitchMode → Plan) pour rédiger le plan. Ajoute-le dans le document. phase: gate_plan.

GATE_PLAN ★

Montre le plan. Attends validation.

Phase BUILD

Après validation seulement. Suis les règles de references/developpement.md.

Phase DONE

Document à jour (Figma, plan, décisions). phase: done. Résume : comportement visuel, chemins docs / styles / composants, lien Figma.