Assistant Conception Web

Que fait Assistant Conception Web ?

Aperçu

Génère plusieurs styles de design distincts pour une page web dans des worktrees parallèles, laissant l'utilisateur comparer et affiner avant de s'engager dans une direction. Principe fondamental : explorer de façon divergente, puis converger vers la meilleure option.

Quand l'utiliser

• L'utilisateur souhaite explorer différents styles de design pour une page web
• L'utilisateur demande des options de design, une direction visuelle ou une comparaison de styles
• L'utilisateur souhaite plusieurs implémentations parmi lesquelles choisir

Ne PAS utiliser quand :

• L'utilisateur a déjà un design spécifique défini → utiliser saurun:react-tailwind-v4-components ou frontend-design directement
• L'utilisateur souhaite modifier un design existant, pas en créer de nouveaux

Prérequis

Toutes les compétences ci-dessous doivent être installées. Si l'une manque, arrêtez-vous et informez l'utilisateur.

Compétence	Utilisée dans	Objectif
ui-ux-pro-max	Phase 2	Génération du système de design
superpowers:using-git-worktrees	Phase 6	Configuration des worktrees parallèles
frontend-design	Phase 6	Implémentation de qualité production
vercel-react-best-practices	Phase 6	Optimisation React
copywriting	Phase 6	Amélioration des textes
nano-banana-pro	Phase 6	Génération d'images — installation : npx skills add intellectronica/agent-skills@nano-banana-pro -g -y

Workflow

digraph design_wizard {
    "Demande utilisateur" [shape=doublecircle];
    "Découverte" [shape=box];
    "Génération de styles" [shape=box];
    "Utilisateur satisfait ?" [shape=diamond];
    "Affinement" [shape=box];
    "Préférences graphiques" [shape=box];
    "Configuration projet" [shape=box];
    "Implémentation parallèle" [shape=box];
    "Vérification parallèle" [shape=box];
    "Terminé" [shape=doublecircle];

    "Demande utilisateur" -> "Découverte";
    "Découverte" -> "Génération de styles";
    "Génération de styles" -> "Utilisateur satisfait ?";
    "Utilisateur satisfait ?" -> "Affinement" [label="non"];
    "Affinement" -> "Utilisateur satisfait ?";
    "Utilisateur satisfait ?" -> "Préférences graphiques" [label="oui"];
    "Préférences graphiques" -> "Configuration projet";
    "Configuration projet" -> "Implémentation parallèle";
    "Implémentation parallèle" -> "Vérification parallèle";
    "Vérification parallèle" -> "Terminé";
}

Phase 1 : Découverte

Utilisez AskUserQuestion pour recueillir le contexte. Questions par lots — jusqu'à 4 questions par appel. Déduisez les réponses évidentes du contexte (ex. : un café est destiné aux consommateurs, probablement une ambiance chaleureuse).

Recueillir :

1. Nom du projet — détecter à partir du package.json ou du nom du dépôt git, confirmer avec l'utilisateur
2. Type de page — Landing, Portfolio, Blog, E-commerce, SaaS, Documentation
3. Public cible — Professionnels, Consommateurs, Développeurs, Industrie créative
4. Ambiance/sentiment — Professionnel, Ludique, Luxe, Minimal, Audacieux, Chaleureux, Futuriste
5. Langue du contenu — Français, Anglais, etc.
6. Préférences/anti-préférences de style — uniquement si ce n'est pas évident d'après ce qui précède

Ignorez les questions dont la réponse est évidente d'après la demande de l'utilisateur.

Phase 2 : Génération de styles

Générez les styles de design en utilisant ui-ux-pro-max :

Par défaut : 4 styles (l'utilisateur peut demander un nombre différent).

Pour chaque style :

1. Créez des mots-clés variés à partir des réponses de la découverte. Combinez : type de page + public + ambiance + esthétique unique. Assurez une variété entre tous les styles.

2. Générez le système de design : Invoquez ui-ux-pro-max via l'outil Skill avec les arguments : "[mots-clés]" --design-system --persist -p "[NomDuProjet]" --page "[nom-du-style]" Sauvegarde dans : design-system/pages/[nom-du-style].md dans le répertoire de travail courant.

3. Présentez à l'utilisateur avec : nom du style, couleurs principales, typographie, adjectifs d'ambiance et meilleur cas d'usage.

Suivez les styles générés pour éviter les mots-clés en double lors des tours d'affinement.

Phase 3 : Affinement (itératif)

L'utilisateur dit	Action
"Donne-moi N styles complètement différents"	Générer N NOUVEAUX styles avec des mots-clés différents
"Donne-moi N options supplémentaires"	Générer N NOUVEAUX (éviter les mots-clés précédents)
"J'aime X et Y, donne-moi plus de styles comme X"	Garder X et Y, générer des variations de X
"Combine les styles X et Y"	Générer 1 nouveau fusionnant ces esthétiques
"Implémente X, Y, Z" ou "Implémente tout"	Passer à la Phase 4 avec les sélections

Phase 4 : Préférences graphiques

Avant l'implémentation, posez une question sur les graphismes pour tous les styles sélectionnés en une fois :

Utilisez AskUserQuestion avec les options :

• "Beaucoup de graphismes pour tous (image héro + graphismes d'accentuation + illustrations)"
• "Graphismes minimalistes pour tous (image héro uniquement)"
• "Laisser le style de design déterminer les graphismes" (Recommandé)
• "Je veux choisir par style"

Ne posez la question par style que si l'utilisateur choisit la dernière option.

Phase 5 : Configuration du projet

Confirmer l'emplacement du projet

Suggéré : designs/[nom-du-projet]/ dans le répertoire de travail courant.

Demandez à l'utilisateur de confirmer ou de modifier.

Créer le projet

1. mkdir -p [emplacement]
2. Écrivez concept.md — voir concept-template.md pour le modèle. Remplissez à partir des réponses de la découverte. Ne remplissez que les champs pour lesquels vous avez des données — omettez les sections sans informations.
3. N'exécutez PAS git init — utilisez le dépôt existant. Validez les documents du projet sur la branche courante.

git add designs/[project-name]/concept.md
git commit -m "docs: initialiser l'exploration de design [nom-du-projet]"

Structure du projet

[racine-du-repo]/
├── designs/[nom-du-projet]/
│   └── concept.md
├── design-system/pages/
│   ├── [style-1].md
│   └── [style-2].md
└── .worktrees/
    ├── [branche-style-1]/    # Projet React + Vite + TypeScript
    └── [branche-style-2]/

Phase 6 : Implémentation parallèle

CRITIQUE : Lancez TOUS les agents d'implémentation dans un SEUL message avec plusieurs appels d'outil Task.

Pour chaque style sélectionné, lancez un sous-agent. Voir implementation-prompt.md pour le modèle de prompt complet. Remplacez [chemin-absolu-vers-racine-du-repo] par le chemin réel de la racine du dépôt pour que les sous-agents puissent résoudre les références entre worktrees.

Points clés pour chaque sous-agent :

• Utilisez superpowers:using-git-worktrees pour créer un worktree dans .worktrees/[nom-du-style]/
• Créez un projet React + Vite + TypeScript : npm create vite@latest . -- --template react-ts
• Lisez la spécification de design depuis design-system/pages/[nom-du-style].md
• Utilisez l'outil Skill pour invoquer : frontend-design, vercel-react-best-practices, copywriting, nano-banana-pro
• Générez les images selon la préférence graphique
• Compilez avec npm run build pour vérifier
• Validez toutes les modifications

Attendez que TOUS les agents aient terminé avant la Phase 7.

Phase 7 : Vérification parallèle

CRITIQUE : Lancez TOUS les agents de vérification dans un SEUL message avec plusieurs appels d'outil Task.

Pour chaque implémentation, lancez un sous-agent de vérification. Voir verification-prompt.md pour le modèle de prompt complet. Attribuez les ports séquentiellement (5173, 5174, 5175, ...) et remplacez [chemin-absolu-vers-racine-du-repo] par le chemin réel.

Vérifications :

• Le serveur de développement démarre sans erreur
• Toutes les URL/liens sont valides
• Les images existent et sont correctement référencées
• Conformité à la spécification de design (couleur, typographie, mise en page, effets) — note de 1 à 10
• La compilation de production réussit

Une fois tout terminé, affichez un récapitulatif comparatif :

Style 1 : [Nom] — ✅ Tout réussi — Design : 8.5/10
Style 2 : [Nom] — ⚠️ 2 URL cassées — Design : 9.0/10
Style 3 : [Nom] — ❌ Échec de la compilation — Voir rapport

Recommandez le style le plus performant en fonction des résultats.

Référence rapide

Phase	Action	Outil clé
1. Découverte	Recueillir le contexte via AskUserQuestion (par lots de 4)	AskUserQuestion
2. Génération de styles	Générer 4 systèmes de design via ui-ux-pro-max	Skill
3. Affinement	Itérer jusqu'à ce que l'utilisateur sélectionne les styles	AskUserQuestion
4. Graphismes	Demander la préférence graphique pour les styles sélectionnés	AskUserQuestion
5. Configuration projet	Créer concept.md, valider l'infrastructure	Write, Bash
6. Implémentation	Lancer les sous-agents parallèles par style	Task
7. Vérification	Lancer les agents de vérification parallèles, afficher la comparaison	Task

Erreurs courantes

• Régénérer les spécifications de design dans les sous-agents — les spécifications sont créées en Phase 2. Les sous-agents les LISENT, ils n'invoquent jamais ui-ux-pro-max à nouveau.
• Lancement séquentiel des sous-agents — Les phases 6 et 7 DOIVENT lancer TOUS les agents dans un seul message avec plusieurs appels Task. Jamais un par un.
• Sauter la préférence graphique — demandez toujours avant l'implémentation. Ne présumez pas.
• Utiliser git add . dans les worktrees — ne staged que les chemins spécifiques pour éviter de valider node_modules, .env ou des fichiers système.
• Mots-clés identiques entre les styles — suivez les mots-clés utilisés pour garantir la diversité. Des mots-clés en double produisent des designs identiques.

Gestion des erreurs

Erreur	Récupération
Le script ui-ux-pro-max échoue	Réessayez avec des mots-clés plus simples. Si persistant, créez manuellement le système de design à partir des mots-clés du style.
Tous les styles rejetés	Demandez à l'utilisateur une direction spécifique : "Qu'est-ce qui vous a déplu ? Les couleurs ? La mise en page ? L'ambiance générale ?"
Compétence du sous-agent introuvable	L'agent doit utiliser l'outil Skill pour l'invoquer. Si la compétence manque vraiment, sautez cette étape d'amélioration et notez-le.
La compilation de l'implémentation échoue	Corrigez dans le worktree, relancez la compilation. Signalez le problème si irrécupérable.