design

Files (1)

• SKILL.md

SKILL.md (first lines)

# /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
- **First principles** : où la convention de la catégorie est *fausse* pour CE produit, vu sa positioning et son public

Termine par *« Voici où je jouerais safe et où je prendrais un risque. »*

### 3. Proposition complète + preview

Présente d'un coup, dans un seul message, le système entier :

```
AESTHETIC: <direction> — <rationale 1 ligne>
DECORATION: <minimal / intentionnel / expressif> — <pourquoi ça matche>
LAYOUT: <grid-disciplined / creative-editorial / hybrid> — <pourquoi>
COLOR: <approche> + palette (hex) — <rationale>
TYPOGRAPHY: <display / body / data> (3 fonts précises) — <pourquoi celles-ci>
SPACING: <unité base + densité> — <rationale>
MOTION: <minimal-fonctionnel / intentionnel / expressif> — <rationale>

Le système est cohérent parce que <comment les choix se renforcent>.

SAFE (standards catégorie, ce que tes users attendent) :
  • <choix 1> — <pourquoi safe est bon ici>
  • <choix 2> — <idem>

RISKS (où le produit gagne sa propre face) :
  • <risque 1> : ce que c'est, pourquoi ça marche, ce que tu gagnes, ce que ça coûte
  • <risque 2> : idem
```

Génère ensuite le preview HTML selon `<preview-template>` et écris-le dans `docs/design-preview.html` (crée `docs/` au besoin), puis ouvre-le avec la commande adaptée à la plateforme — `open` (macOS), `xdg-open` (Linux), `start` (Windows). Demande : *« Validation globale, ou tu veux drill-down sur une section ? »*

### 4. Drill-downs + écriture

Si le user demande à ajuster une section, propose 2-3 alternatives pour CETTE section avec rationale courte. Re-vérifie la cohérence avec le reste après changement — flag les mismatches en une ligne (jamais bloquer). Régénère le preview si un changement visuel le justifie.

Quand le user valide, écris `docs/DESIGN.md` selon `<design-template>` (crée `docs/` au besoin) et confirme *« ✓ écrit dans `docs/DESIGN.md` »*. Le preview HTML reste dans `docs/design-preview.html` (artefact jetable, ignorable par git).

## Design Knowledge (informe tes propositions, ne présente JAMAIS comme un menu)

Cette palette curée est ton book : pioche dedans pour construire la proposition de Phase 3. Ne la présente jamais sous forme de tableau ou de liste au user — la posture est conseil opinioné, pas catalogue.

**Aesthetic directions** (choisis celle qui fait sens pour ce produit, ne les énumère pas) :
- **Brutally Minimal** — Type et whitespace, point. Pas de décoration. Modernist.
- **Maximalist Chaos** — Dense, en couches, motifs lourds. Y2K rencontre le contemporain.
- **Retro-Futuristic** — Nostalgie tech vintage. Lueur CRT, grilles pixel, monospace chaud.
- **Luxury/Refined** — Serifs, haut contraste, whitespace généreux, accents métalliques.
- **Playful/Toy-like** — Arrondi, rebondi, primaires saturés. Accessible, fun.
- **Editorial/Magazine** — Hiérarchie typographique forte, grilles asymétriques, pull quotes.
- **Brutalist/Raw** — Structure exposée, fonts système, grille visible, zéro polish.
- **Art Deco** — Précision géométrique, accents métalliques, symétrie, bordures décoratives.
- **Organic/Natural** — Tons terre, formes arrondies, texture dessinée, grain.
- **Industrial/Utilitarian** — Fonction d'abord, data-dense, monospace en accents, palette sourde.

**Decoration levels** : minimal (la typo fait tout le travail) / intentional (texture subtile, grain, traitement de fond) / expressive (direction créative complète, profondeur en couches, motifs).

**Layout approaches** : grid-disciplined (colonnes strictes, alignement prévisible) / creative-editorial (asymétrie, chevauchement, grid-breaking) / hybrid (grid pour l'app, créatif pour le marketing).

**Color approaches** : restrained (1 accent + neutres, la couleur est rare et signifiante) / balanced (primaire + secondaire, couleurs sémantiques pour la hiérarchie) / expressive (la couleur est un outil primaire, palettes audacieuses).

**Motion approaches** : minimal-functional (uniquement transitions qui aident la compréhension) / intentional (entrées subtiles, transitions d'état signifiantes) / expressive (chorégraphie complète, scroll-driven, joueuse).

**Fonts par rôle** (pioche dedans, n'invente pas) :
- **Display/Hero** : Satoshi, General Sans, Instrument Serif, Fraunces, Clash Grotesk, Cabinet Grotesk
- **Body** : Instrument Sans, DM Sans, Source Sans 3, Geist, Plus Jakarta Sans, Outfit
- **Data/Tables** : Geist (tabular-nums), DM Sans (tabular-nums), JetBrains Mono, IBM Plex Mono
- **Code** : JetBrains Mono, Fira Code, Berkeley Mono, Geist Mono

## Anti-slop (jamais dans tes recommandations)

- **Fonts blacklist** : Papyrus, Comic Sans, Impact, Lobster, Bradley Hand, Trajan, Courier New (en body)
- **Fonts overused** (jamais en primary sauf demande explicite du user) : Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Montserrat, Poppins, **Space Grotesk** (le piège « alternative safe à Inter »)
- **Patterns visuels interdits** : gradient purple/violet par défaut, grid 3-col avec icônes en cercles colorés, centered-everything, border-radius bubble partout, gradient buttons en CTA primaire, hero stock-photo générique, `system-ui` / `-apple-system` en display ou body (le signal « j'ai abandonné la typo »)
- **Copy interdite** : « Built for X », « Designed for Y »

<design-template>
# Design System — <nom du projet>

## Product Context
- **Quoi** : <1-2 phrases>
- **Pour qui** : <utilisateurs cibles>
- **Espace** : <catégorie, références>
- **Type** : <web app / dashboard / marketing / éditorial / outil interne>
- **Memorable thing** : <la phrase du user en Phase 1>

## Aesthetic Direction
- **Direction** : <nom — ex. Brutally Minimal, Editorial, Industrial>
- **Décoration** : <minimal / intentionnel / expressif>
- **Mood** : <1-2 phrases sur le ressenti>
- **Références** : <URLs, si recherche>

## Typography
- **Display/Hero** : <font> — <rationale>
- **Body** : <font> — <rationale>
- **Data/Tables** : <font, supporte tabular-nums>
- **Code** : <font>
- **Loading** : <Google Fonts URL ou self-hosted>
- **Scale** : <ex. 12 / 14 / 16 / 20 / 24 / 32 / 48 / 64 px>

From naiersaidane/claude-mastery, MIT.

More from naiersaidane/claude-mastery