# Design With AI

> Conçoit un design (inspiration ou création), documente le suivi dans docs/designs, propose une maquette Figma à valider, puis un plan de développement avant le code. Use when the user asks to design a page, screen, UI, landing, maquette, moodboard, Figma, or invoke /design-with-ai; when they say "design with AI", "inspire-toi de ce site", "crée un design", or "maquette avant de coder".

- Skill: `axelvm/design-with-ai` (Agent Skill, multi-file: 8 files)
- Install (CLI): `npx skillmds@latest add axelvm/design-with-ai`
- Raw SKILL.md: https://api.skillmd.com/api/skills/axelvm/design-with-ai/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: axelvm (https://skillmd.com/u/axelvm)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/axelvm/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 :

| Phase | Fichier |
| --- | --- |
| Inspiration | [references/inspiration.md](references/inspiration.md) |
| Création | [references/creation.md](references/creation.md) |
| Figma | [references/figma.md](references/figma.md) |
| Développement | [references/developpement.md](references/developpement.md) |

Templates : [assets/DESIGN.md.template](assets/DESIGN.md.template),
[assets/status.yaml.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

```text
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 :

```markdown
**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](references/inspiration.md)
- **Creation** → charge [references/creation.md](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](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](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](references/developpement.md).

## Phase DONE

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