Que fait Générateur de Prompt pour Site Web ?
Cette compétence convertit une idée d'utilisateur — ou un ensemble d'images de référence téléchargées — en un prompt de construction complet et très détaillé qui peut être transmis à un assistant de codage IA (Cursor, Lovable, Bolt, v0, etc.) pour construire le site.
⚡ Sélection du Mode : À Lire en Premier
Avant de faire quoi que ce soit, décidez quel mode s'applique :
| Situation | Mode |
|---|---|
| L'utilisateur décrit une idée uniquement par des mots | [Mode Texte] — générer à partir de la description |
| L'utilisateur télécharge 1+ image(s) / capture(s) d'écran / maquette(s) | [Mode Plan d'Image] — analyser les images d'abord, puis générer |
| L'utilisateur télécharge des images ET donne une description | [Mode Plan d'Image] — les images ont la priorité ; utiliser la description comme contexte |
Si des images sont présentes mais que vous ne pouvez pas les voir, demandez à l'utilisateur de les télécharger à nouveau ou de les coller avant de continuer. Ne construisez pas de plan à partir de l'imagination lorsque des images ont été fournies.
💬 Étape 0A : Questionnaire de Pré-Génération (Sessions Interactives Uniquement)
Dans les conversations actives (sessions interactives), avant d'exécuter le script UI/UX ou de générer le prompt/plan de construction, vous DEVEZ présenter un court questionnaire à choix multiples et convivial pour clarifier les exigences du projet. Cela aide à adapter le système de conception et la pile technique à leurs besoins exacts.
Demandez à l'utilisateur de répondre aux questions suivantes (par exemple en répondant "1A, 2B, 3C, 4A, 5F, 6C") :
-
Quel type de site web construisez-vous ?
- Option A : Portfolio / Site Personnel (présentation de projets, CV, compétences et contact)
- Option B : Page d'Atterrissage SaaS / Produit (marketing d'un produit logiciel, fonctionnalités, tarifs, témoignages)
- Option C : Site d'Entreprise / Agence (services professionnels, équipe, logos clients, contact)
- Option D : E-commerce / Boutique en Ligne (listings de produits, panier d'achat, expérience de paiement)
- Option E : Vitrine Créative / Immersive (hautement visuel, éléments 3D, animations interactives ou affichages 3D)
- Option F : Autre (veuillez préciser)
-
Quelle est votre pile technique cible ?
- Option A : HTML + CSS (Vanilla avec Tailwind CSS, page unique légère)
- Option B : React + Vite + Tailwind CSS + Framer Motion (SPA dynamique moderne)
- Option C : Next.js (App Router) + Tailwind CSS + shadcn/ui (Modèle prêt pour le full-stack)
- Option D : SvelteKit ou Vue / Nuxt + Tailwind CSS
- Option E : Autre (veuillez préciser, par exemple Astro, framework mobile)
-
Quelle est la préférence de mise en page et de structure principale ?
- Option A : Page d'atterrissage défilante à page unique (meilleure pour les conversions rapides/produits simples)
- Option B : Site multi-pages (Accueil, À propos, Services, Contact, Blog, etc.)
- Option C : Tableau de bord / Interface d'Application Web (graphiques interactifs, tableaux, barre latérale de navigation, profils)
- Option D : Centre de Documentation / Ressources (barre de recherche, menu latéral imbriqué, grille d'articles, mise en page de documentation)
- Option E : Page "En Construction" / Link-in-bio minimaliste (héros sur un seul écran avec CTA/liens rapides)
-
Quel style typographique correspond le mieux à la marque ?
- Option A : Sans-Serif Moderne (Inter, Roboto, Outfit - propre, neutre, standard tech/SaaS)
- Option B : Serif Élégant (Instrument Serif, Playfair Display - éditorial, luxe, mode, boutique)
- Option C : Mono Technique (JetBrains Mono, Fira Code - outils développeur, Web3, portails de bases de données)
- Option D : Géométrique & Amical (Lexend, Montserrat, Poppins - marketing, SaaS, startups, éducation)
- Option E : Affiché / Stylisé (Syne, Clash Display - agence créative, design haut de gamme, artistique, titres audacieux)
-
Y a-t-il des intégrations tierces nécessaires dans le plan ?
- Option A : Capture de Leads Simple (formulaires de contact par e-mail, inscriptions à la newsletter via Resend/Mailchimp)
- Option B : E-commerce & Paiements (paiement Stripe, paiements de produits, redirections de niveaux de tarification)
- Option C : Authentification & Base de Données (connexion Clerk / Supabase, profils utilisateur, stockage backend)
- Option D : CMS Headless (Sanity, Strapi, Contentful pour articles de blog/articles/éléments de portfolio)
- Option E : Données / Analytiques Interactifs (graphiques Recharts/Chart.js, suivi Google Analytics)
- Option F : Aucune / Construction statique uniquement (composants/mises en page frontend purs)
-
Quel comportement de thème/mode souhaitez-vous implémenter ?
- Option A : Mode Sombre Forcé uniquement (élégant, axé développeur, jeu, divertissement, créatif)
- Option B : Mode Clair Forcé uniquement (propre, médical, entreprise, accessibilité WCAG élevée)
- Option C : Bascule de Mode Dynamique (l'utilisateur peut basculer entre les modes Clair et Sombre à l'aide d'un bouton/interrupteur)
- Option D : Commutation Automatique par Défaut du Système (s'adapte automatiquement en fonction des préférences de thème de couleur du système d'exploitation de l'utilisateur)
🎨 Étape 0B : Récupération et Application de l'Intelligence de Conception UI/UX (REQUIS)
Avant d'écrire un prompt ou un plan de construction, exécutez le script de recherche fourni dans cette compétence pour récupérer les recommandations de mise en page, de typographie et de couleurs. Se fier à cette base de données organisée garantit que le système de conception généré est testé par l'industrie, conforme à l'accessibilité et parfaitement adapté au domaine commercial du produit, plutôt que de s'appuyer sur des choix de couleurs devinés ou génériques.
1. Extraire les Attributs Clés
À partir de la description de l'utilisateur ou des images de référence, identifiez :
- Type de Produit / Secteur : (par exemple, SaaS, fintech, beauté/spa, éducation, portfolio, médical, e-commerce)
- Mots-Clés Visuels / Ambiance : (par exemple, minimal, glassmorphisme, mode sombre, brutalisme, UI douce, luxe)
- Pile Cible : (par exemple,
html-tailwind(par défaut),react,nextjs,vue,svelte,swiftui,react-native,flutter,shadcn,jetpack-compose,astro,nuxt-ui,nuxtjs)
2. Exécuter les Commandes CLI de UI/UX Pro Max
Exécutez les commandes terminal suivantes dans l'espace de travail à l'aide de l'outil run_command pour récupérer les paramètres du système de conception et les directives de la pile :
-
Générer le Système de Conception Complet :
py .agents/skills/website-prompt-generator-skill-main/scripts/search.py "<type_de_produit> <secteur> <mots-clés visuels>" --design-system -p "Nom du Projet"Astuce : S'il s'agit d'une application web multi-pages ou nécessitant de la persistance, ajoutez
--persistpour enregistrer le système de conception globalement dansdesign-system/MASTER.md(Source de Vérité Globale) et les remplacements spécifiques aux pages dansdesign-system/pages/[slug-page].md. Dans le prompt de construction généré, demandez explicitement à l'outil développeur de vérifier et de suivre ces fichiers markdown. -
Récupérer les Directives de la Pile (exécutez ceci si une pile technique spécifique est demandée ou choisie) :
py .agents/skills/website-prompt-generator-skill-main/scripts/search.py "<mots-clés de mise en page/composant/responsive>" --stack <nom_de_la_pile> -
Récupérer les Directives du Domaine (si vous avez besoin de directives spécifiques sur
ux,accessibilité,animation,atterrissageougraphique) :py .agents/skills/website-prompt-generator-skill-main/scripts/search.py "<mots-clés du sujet>" --domain <nom_du_domaine>
3. Analyser et Fusionner les Résultats
Analysez la sortie console de ces scripts et appliquez-les comme suit :
- Palette : Mappez les couleurs exactes primaire, secondaire, d'arrière-plan, de texte et CTA HEX/HSL de la sortie du script directement dans le modèle de variable CSS.
- Typographie : Appliquez les appairages Google Fonts recommandés (y compris les poids spécifiques et les liens d'importation CSS) aux polices de titres et de corps.
- Effets Clés : Implémentez les effets spécifiques renvoyés par la base de données (par exemple "verre givré", "ombres de profondeur subtiles", "anneaux de focus clairs de 3px").
- Contraintes / Anti-Patterns : Extrayez les avertissements "À ÉVITER" (par exemple "pas de couleurs néon", "pas de flux de réservation déroutants", "pas de transformations d'échelle qui provoquent un décalage de mise en page") et listez-les sous une section Contraintes.
4. Appliquer les Directives de Qualité Visuelle
Votre prompt/plan de sortie doit explicitement demander à l'outil développeur de respecter ces règles de base de la liste de contrôle ui-ux-pro-max, qui sont essentielles pour obtenir un design visuel de qualité supérieure :
- Icônes et Éléments Visuels : Utilisez Lucide, Heroicons ou les SVG officiels de marque provenant de Simple Icons. Les emojis ne doivent pas être utilisés comme icônes d'interface utilisateur, car ils semblent peu soignés et non professionnels dans un design premium.
- Transitions et Survol : Standardisez les vitesses de transition entre 150 ms et 300 ms (par exemple,
transition-colors duration-200). Les transitions en dehors de cette plage semblent soit lentes, soit trop brusques. Assurez-vous que chaque élément survolable ou cliquable a uncursor-pointerpour signaler l'interactivité à l'utilisateur. Les effets de survol doivent éviter les transformations d'échelle qui déplacent d'autres éléments dans la mise en page. - Contraste Claire/Sombre : Assurez un rapport de contraste minimum de 4,5:1 pour le texte du corps normal afin de garantir la lisibilité. Pour les éléments en verre en mode clair, utilisez un calque de haute opacité (
bg-white/80ou plus) et une bordure gris clair visible (border-gray-200) pour éviter que la carte ne se fonde dans un fond clair. - Mise en Page et Espacement : Les barres de navigation flottantes doivent avoir des marges décalées (comme
top-4 left-4 right-4) pour éviter qu'elles ne semblent à l'étroit contre les bords de la fenêtre. Évitez les éléments qui se chevauchent, sauf s'ils sont intentionnellement superposés avec des valeurs z-index explicites. Maintenez une largeur de conteneur cohérente (par exemple,max-w-6xloumax-w-7xl). - Accessibilité : Assurez-vous que les anneaux de focus du clavier sont visibles pour faciliter la navigation au clavier uniquement. Tous les champs de formulaire doivent avoir des étiquettes descriptives, toutes les images doivent avoir un texte alternatif et les transitions doivent respecter les paramètres
prefers-reduced-motionde l'utilisateur. - Pas de Wireframes Sci-Fi / Cyberpunk HUD : N'utilisez pas de graphiques de nœuds/constellations décoratifs, de lignes de connexion en fil de fer en polygone en pointillés ou de diagrammes de style HUD futuriste. Ces éléments semblent peu soignés et datés. Utilisez plutôt des hiérarchies typographiques propres, des graphiques structurés, de vraies maquettes d'interface utilisateur ou des surfaces de dégradé / chatoyantes de qualité supérieure.
- Adaptabilité aux Appareils : Chaque mise en page, section et composant DOIT être entièrement responsive et optimisé pour être superbe sur tous les écrans (mobile, tablette, bureau). La mise en page doit être construite en mobile-first, en utilisant des unités relatives/fluides (comme
clamp(),vw,%,dvh) au lieu de largeurs en pixels fixes, en utilisant CSS Grid et Flexbox pour une mise à l'échelle adaptative, et en implémentant des requêtes de conteneur (@container) pour la réactivité au niveau des composants. Assurez-vous qu'il n'y a aucun débordement horizontal, que les tailles de police s'adaptent avec élégance et que les cibles tactiles mesurent au moins 44x44 px sur les appareils mobiles.
5. Sélection et Aperçu Interactifs (Sessions Interactives Uniquement)
Dans les conversations actives, présentez un bref résumé des tokens de conception (couleurs primaires/secondaires/CTA récupérées, appairage typographique, motif de mise en page et une liste de contrôle) à l'utilisateur pour approbation ou ajustements avant de générer le prompt/plan de construction final complet. Cela garantit l'alignement avec l'utilisateur.
📝 Mode Texte
À utiliser lorsqu'aucune image n'est téléchargée.
Approche
Agissez en tant que concepteur UI/UX technique expert et architecte frontend. Le prompt résultant ne doit rien laisser à l'imagination — spécifiez la pile technique exacte, les couleurs, la typographie, la mise en page, les animations et la structure du contenu. Incorporez toutes les conclusions de l'Étape 0B : Récupération de l'Intelligence de Conception UI/UX.
ÉTAPE CRITIQUE : Cette compétence est fournie avec une bibliothèque universelle de prompts de composants dans references/core/animated-web-prompts.md. Avant de générer, utilisez grep_search ou view_file pour trouver 1 à 3 entrées qui correspondent au style ou au domaine demandé par l'utilisateur. Analysez-les — étudiez leur structure, le niveau de spécificité technique, la convention de crochets/espaces réservés et les techniques d'animation — puis générez un prompt complètement nouveau avec vos propres composants et animations. Ne COPIEZ PAS un exemple textuellement et ne renvoyez pas le texte de la bibliothèque comme résultat : les exemples établissent la barre de qualité et démontrent le format, ils ne sont pas la livraison. Ne sautez pas cette étape !
De plus, si Anime.js est demandé ou est optimal pour les exigences d'animation (comme le morphing/tracé SVG, les grilles stagger complexes ou les timelines personnalisées), chargez references/animations/animejs/animejs-api-reference.md et references/animations/animejs/animejs-examples.md pour garantir une syntaxe correcte, des importations tree-shakeables et des structures de composants React propres (en utilisant createScope pour le nettoyage du cycle de vie des composants).
De même, si GSAP ScrollTrigger est demandé ou est optimal pour les actions avancées basées sur le défilement (comme l'ancrage, les timelines de défilement complexes, le scrutation de défilement ou le traitement par lots de rappels), chargez references/animations/gsap/gsap-scrolltrigger-reference.md pour garantir un enregistrement correct du plugin et un nettoyage approprié à l'aide des hooks @gsap/react / useGSAP().
Format de Sortie (Mode Texte)
Encadrez l'intégralité de votre sortie dans un seul bloc ```markdown pour faciliter le copier-coller :
Prompt de Construction : [Titre Accrocheur du Site Web]
Construisez un [type de site] avec [caractéristiques visuelles clés].
## Référence du Système de Conception Global
- Remarque : S'il est persisté, l'outil développeur doit inspecter `design-system/MASTER.md` et les remplacements de page sous `design-system/pages/` comme source unique de vérité pour les tokens de conception.
## Justification de la Conception UI/UX et Accessibilité
- Expliquez la logique cognitive derrière la palette de couleurs sélectionnée (par exemple, "Le bleu profond communique la sécurité de la fintech ; le contraste WCAG est de 5,2:1").
- Détaillez pourquoi l'appairage typographique correspond au domaine du produit (par exemple, "Instrument Serif ajoute une sensation éditoriale de luxe, équilibrée par un texte de corps Barlow propre").
- Expliquez le rythme d'espacement et le choix des transitions interactives (par exemple, "200 ms ease-out sur les cartes pour que les réponses restent rapides mais fluides").
Pile Technique
- React + Vite + TypeScript
- Tailwind CSS
- Framer Motion / Motion, Anime.js (v4), GSAP + ScrollTrigger, Spline 3D / React Three Fiber / 3D WebGL, et React Spring. Remarque : Le prompt généré doit inclure toutes ces technologies d'animation et 3D, avec au moins 2 composants, sections ou séquences d'animation ou plus pour chaque technologie.
- Lucide React
Polices
- Spécifiez les polices Google exactes (par exemple, Instrument Serif + Barlow:300;400;500;600). Incluez l'utilisation du poids.
Système de Couleurs / Thème
- Définissez des variables CSS ou des tokens Tailwind avec des valeurs HEX/HSL précises pour bg, fg, accent, muted.
...
🖼️ Mode Plan d'Image
À utiliser lorsque des images sont téléchargées.
Approche
Analysez les images de référence téléchargées pour extraire les décisions de conception existantes, puis créez un plan de construction qui reproduit ou inspire du design observé tout en appliquant les principes de conception professionnels d'ui-ux-pro-max.
- Analyser les Images : Examinez les images fournies pour identifier la palette de couleurs, les choix typographiques (polices, tailles, espacement des lignes), les motifs de mise en page (grille, flex, largeur du conteneur), le style visuel (minimal, glassmorphisme, interfaces 3D, etc.) et les schémas de composants répétés. Notez tout ce qui est unique ou frappant dans la référence.
- Identifier la Pile Technique : Déduisez ou confirmez la pile technique prévue (par exemple, React, Next.js, Tailwind). Si les images suggèrent un cadre particulier, utilisez-le comme base.
- Récupérer et Appliquer les Tokens de Conception : Exécutez les scripts de l'Étape 0B comme décrit ci-dessus. Utilisez les attributs extraits de l'image comme entrée pour les paramètres de script.
- Rédiger le Plan : Rédigez un plan de construction détaillé qui décrit chaque composant et section, en faisant explicitement référence aux décisions de conception extraites des images (par exemple, "En-tête avec logo en haut à gauche, navigation en haut à droite, barre de recherche au centre, comme le montrent les images de référence"). Utilisez un langage clair et sans ambiguïté adapté à un prompt de construction.
Format de Sortie (Mode Plan d'Image)
Utilisez le même format ```markdown que le Mode Texte, mais incluez un préambule Analyse de l'Image dédié avant la section du prompt de construction :
Analyse de l'Image :
[Description structurée de ce qui a été observé dans chaque image. Incluez les couleurs, styles, motifs de mise en page, etc.]
---
Prompt de Construction : [Titre Accrocheur du Site Web]
[Le prompt de construction réel suit...]
⚠️ Note Importante sur l'Exécution
- Sessions Interactives : Présentez le questionnaire et l'aperçu de conception interactive à l'utilisateur. Incorporez les commentaires avant de générer le prompt/plan final.
- Conversations Non Interactives / Planifiées : Sautez l'étape interactive du questionnaire et de la présentation d'aperçu. Utilisez l'intelligence de conception récupérée pour générer directement la meilleure sortie supposée. Si des images sont fournies, analysez-les et utilisez-les pour éclairer le plan.
- Images Non Visibles : Si l'utilisateur a téléchargé des images mais que l'outil ne peut pas les analyser visuellement, demandez à l'utilisateur de fournir une description textuelle de ce qui se trouve dans les images, puis traitez-la comme un mode texte avec une entrée visuelle enrichie. Ne devinez pas.
📋 Liste de Contrôle de Qualité Finale
Avant de finaliser le prompt ou le plan, assurez-vous qu'il répond à tous les critères suivants :
- Aucune Technologie Manquante : Toutes les technologies d'animation et 3D énumérées (Framer Motion, Anime.js, GSAP + ScrollTrigger, React Three Fiber, Spline 3D) ont au moins 2 de leurs composants ou séquences dédiés dans le prompt.
- Directives d'Accessibilité : Les rapports de contraste, les anneaux de focus et les paramètres
prefers-reduced-motionsont explicitement traités. - Contraintes Appliquées : Les avertissements "À ÉVITER" de la base de données sont répertoriés dans une section Contraintes en haut du prompt.
- Le prompt est prêt à être copié-collé dans un outil comme Cursor, v0, Lovable ou Bolt.