---
name: design-loop
description: Boucle d'évaluation esthétique d'une page/section web par 3 agents critiques en contexte neuf (jamais impliqués dans la construction) — un Brief Critic (objectif fonctionnel), un System Critic (respect mécanique de design-system.md), un Craft Critic (rendu visuel réel vs bar.md, sur captures d'écran). Se déclenche via /design-loop une fois qu'une page/composant existe et doit être jugé objectivement avant livraison. Reproduit la méthode "Design Loop" (Gauntlet Loop appliqué au design web) de Jack Roberts, d'après Matt Shumer.
metadata:
  source: reconstruit depuis NotebookLM "videos Claude design" (2026-08-22) — aucun dépôt officiel public trouvé pour la variante web (celle de Matt Shumer/duolahypercho est un skill jeux vidéo, pas design web)
  imported: 2026-08-22
---

# Design Loop

Une IA a du goût mais ne peut pas juger objectivement son propre travail — demander à un modèle d'évaluer le code qu'il vient d'écrire revient à demander à un chef de noter son propre restaurant. Le Design Loop déplace le jugement vers des agents en **contexte neuf**, qui n'ont jamais vu le code en cours de construction, et qui ne partagent jamais leur mémoire avec l'agent constructeur.

## Pré-requis (une fois par projet)

1. **`design-system.md`** — la charte graphique consolidée (couleurs, polices, spacing, composants). Pour Sales Experienz, voir `creer-brief-page-web/references/design-system-salesexperienz.md` ou `cerveau/charte-graphique.md`.
2. **`bar.md`** — la barre de qualité visuelle, exprimée en critères **mesurables**, jamais en adjectifs. Un critère subjectif ("moderne", "premium", "bon usage de l'espace blanc") sera toujours validé par un critique IA — il faut le rendre vérifiable :
   - ❌ "Design premium et épuré"
   - ✅ "Le titre principal fait exactement 5× la taille du texte de paragraphe"
   - ✅ "Trois tailles de police au total, pas une de plus"
   - ✅ "Une seule couleur d'accentuation, affichée au maximum deux fois par écran"
   - ✅ "Aucune animation ne dure moins de 400ms"

## Les 3 critiques (jamais 1 seul, jamais l'agent constructeur)

| Critique | Évalue | Ignore | Modèle recommandé |
|---|---|---|---|
| **Brief Critic** | Le respect strict de l'objectif fonctionnel du brief | L'esthétique | Modèle rapide (ex. Sonnet) — jugement logique, pas de vision poussée nécessaire |
| **System Critic** | L'adhérence mécanique à `design-system.md` (couleurs, polices, spacing utilisés = ceux déclarés) | Le jugement esthétique | Modèle économique (ex. Haiku) — vérification factuelle/structurelle |
| **Craft Critic** | Le rendu visuel réel, sur captures d'écran, comparé aux critères de `bar.md` | Le code source (ne le lit jamais) | **Le modèle le plus puissant disponible — ne jamais dégrader.** Un critique esthétique bon marché valide n'importe quoi, ce qui tue la boucle dès le premier tour |

Règle d'or : **aucun critique ne partage sa mémoire avec l'agent qui a construit** — chacun est un sous-agent frais, briefé uniquement sur son rôle et le livrable à juger.

## Déroulé de `/design-loop`

1. **Preflight check** — vérifier que `design-system.md` et `bar.md` existent et sont à jour ; vérifier que les 3 critiques auront bien accès à des captures d'écran réelles (pas seulement au code).
2. **Poser 3 questions** si elles ne sont pas déjà répondues : quel composant/page cibler, quel est le budget de tours (voir coûts ci-dessous), quand arrêter (satisfaction visuelle vs nombre de tours max).
3. **Boucle** : générer/ajuster le composant → capturer des screenshots des rendus réels → soumettre en parallèle aux 3 critiques → si un critique rejette, corriger et relancer un tour. S'arrête sur validation des 3 critiques ou sur interruption humaine.

## Coût — lire avant de lancer

Cette boucle consomme énormément de tokens (chaque tour = 1 génération + 3 évaluations séparées). Le cas extrême documenté (un jeu 3D complet, cas différent d'une simple page) : 19h, 137 agents, 1,7 milliard de tokens, ~1200$. Pour un usage sur une page web :

- **Vous êtes le frein** — surveiller l'exécution et arrêter dès que le résultat visuel convient, ne pas laisser tourner en autonomie complète.
- **Cibler uniquement les composants clés** (hero, carrousel phare) — pas les pages secondaires.
- **Limiter à 3-4 composants testés en simultané maximum.**

## Quand l'utiliser dans le process Sales Experienz

Après le handoff Claude Design → Claude Code (voir `creer-brief-page-web`), une fois la page construite et avant de la considérer finie — en particulier sur le hero et les sections à forte valeur visuelle. Complète, ne remplace pas, la checklist manuelle de `creer-brief-page-web/references/template-brief-12-sections.md` (section 12).