# Esquisseur de maquettes HTML > Générez 2 à 3 variantes de maquettes HTML interactives pour comparer différentes directions de conception UI/UX avant de vous engager sur une seule approche. Explorez rapidement différentes orientations visuelles et recueillez des commentaires. - Canonical: https://nanoskill.ai/fr/skills/html-mockup-sketcher - Markdown: https://nanoskill.ai/fr/skills/html-mockup-sketcher.md - Author: NousResearch - Published: 2026-06-04T05:30:00.000Z - Updated: 2026-07-21T18:34:02.819Z - Language: fr - Source type: github - Popularity signal: 2137 ## Sources - https://github.com/NousResearch/hermes-agent ## Install ```shell npx skills add https://github.com/NousResearch/hermes-agent/tree/main/skills/creative/sketch ``` ## About L'Esquisseur de maquettes HTML est une compétence puissante conçue pour aider les utilisateurs à explorer et comparer rapidement différentes directions de conception UI/UX grâce à des maquettes HTML jetables. Au lieu de s'engager dans une seule conception, cet outil génère 2 à 3 variantes interactives, permettant une comparaison côte à côte de différentes orientations visuelles. Il est idéal pour l'exploration de conception en phase précoce, vous aidant à visualiser les concepts et à recueillir des commentaires avant un investissement de développement important. Cette compétence se concentre sur la création de maquettes HTML fonctionnelles et interactives qui vont au-delà des images statiques. Chaque variante est un fichier HTML autonome doté de CSS en ligne, de polices système et d'un contenu réaliste. Fondamentalement, les maquettes incluent une interactivité de base telle que des liens cliquables, des états de survol et au moins une transition d'état, offrant une sensation plus tangible de l'expérience utilisateur. Des outils de navigateur intégrés permettent une vérification visuelle, garantissant que les maquettes sont propres et sans bugs. Pour faciliter la prise de décision éclairée, l'Esquisseur de maquettes HTML fournit une comparaison structurée. Chaque variante est accompagnée d'un fichier \`README.md\` détaillé décrivant ses principes de conception, ses choix clés, ses compromis et ses cas d'utilisation les mieux adaptés. Après la génération, un tableau comparatif résume les différences selon diverses dimensions de conception, accompagné d'une analyse avisée pour vous aider à sélectionner un gagnant, à combiner des éléments ou à itérer davantage. ## Key features - **Générer plusieurs variantes de conception**: Produit simultanément 2 à 3 variantes de maquettes HTML distinctes, chacune explorant une approche de conception différente (par exemple, densité, accent, esthétique, mise en page) pour une comparaison côte à côte. - **Maquettes HTML interactives**: Crée des fichiers HTML autonomes avec du CSS en ligne, des polices système et un contenu factice réaliste. Les maquettes sont interactives, avec des liens cliquables, des survols et au moins une transition d'état. - **Vérification visuelle avec des outils de navigation**: Utilise des outils de navigation et de vision intégrés pour inspecter et vérifier visuellement chaque maquette HTML, en s'assurant que les mises en page sont propres, lisibles et exemptes de bogues avant la présentation. - **Documentation structurée des variantes**: Chaque variante de maquette HTML inclut un fichier \`README.md\` détaillant son approche de conception, les choix clés (mise en page, typographie, couleur, interaction), les compromis et les cas d'utilisation idéaux pour faciliter une comparaison éclairée. - **Tableau d'analyse comparative**: Présente toutes les variantes de maquettes HTML générées dans un tableau comparatif, mettant en évidence les différences selon des dimensions clés telles que la densité, la visibilité des actions principales, la lisibilité et l'ambiance générale, avec un résumé orienté. ## Use cases - **Explorer des pistes de conception UI/UX**: Générez et comparez rapidement plusieurs variantes de maquettes HTML pour explorer différentes idées de conception d'interface utilisateur et d'expérience utilisateur avant d'investir un temps de développement important. - **Recueillir des retours sur des concepts visuels**: Présentez des maquettes HTML interactives aux parties prenantes ou aux utilisateurs pour recueillir des retours précoces sur différentes orientations visuelles, aidant à affiner les concepts et à prendre des décisions de conception éclairées. - **Prototypage rapide pour de nouvelles fonctionnalités**: Créez des maquettes HTML jetables pour prototyper rapidement de nouvelles fonctionnalités ou écrans, en vous concentrant sur la fonctionnalité principale et le flux visuel plutôt que sur du code prêt pour la production. ## Result preview Découvrez de véritables pages HTML de sites d'hôtels-boutiques générées par cette compétence d'agent. ![the demo of HTML mockup Agent Skill](https://file.nanoskill.ai/HTML-mockup-demo-1.jpg) ![the demo of HTML mockup Agent Skill](https://file.nanoskill.ai/HTML-mockup-demo-2.jpg) ![the demo of HTML mockup Agent Skill](https://file.nanoskill.ai/HTML-mockup-demo-3.jpg) ![the demo of HTML mockup Agent Skill](https://file.nanoskill.ai/HTML-mockup-demo-4.jpg) ## Result walkthrough ### Étape 1：Installer Ajoutez la compétence à votre agent. ![a simple demonstration of the first step in using HTML mockup](https://file.nanoskill.ai/HTML-mockup-step-1.jpg) ### Étape 2：Décrivez votre site web Expliquez les informations détaillées (par exemple, le style, le type) du site web que vous souhaitez créer. ![a simple demonstration of the second step in using HTML mockup](https://file.nanoskill.ai/HTML-mockup-step-2.jpg) ### Étape 3：Examinez le résultat Examinez et comparez les maquettes HTML générées. ![a simple demonstration of the third step in using HTML mockup](https://file.nanoskill.ai/HTML-mockup-step-3.jpg) ## Skill definition # Esquisse Utilisez cette compétence lorsque l'utilisateur souhaite **voir une direction de conception avant de s'engager** sur une seule — en explorant une idée UI/UX sous forme de maquettes HTML jetables. L'objectif est de générer 2 à 3 variantes interactives pour que l'utilisateur puisse comparer les directions visuelles côte à côte, et non de produire du code livrable. Chargez-la lorsque l'utilisateur dit des choses comme « esquisse cet écran », « montre-moi à quoi X pourrait ressembler », « compare la disposition A vs B », « donne-moi 2-3 versions de cette UI », « laisse-moi voir quelques variantes », « fais une maquette avant que je construise ». ## Quand NE PAS utiliser cette compétence - L'utilisateur veut un composant de production — utilisez `claude-design` ou construisez-le correctement - L'utilisateur veut un artefact HTML ponctuel et soigné (page de destination, présentation) — `claude-design` - L'utilisateur veut un diagramme — `excalidraw`, `architecture-diagram` - La conception est déjà verrouillée — construisez-la simplement ## Si l'utilisateur a le système GSD complet installé Si `gsd-sketch` apparaît comme compétence sœur (installée via `npx get-shit-done-cc --hermes`), préférez **`gsd-sketch`** pour le flux de travail complet : dossier persistant `.planning/sketches/` avec MANIFEST, analyse en mode frontière, audits de cohérence sur les esquisses passées, et intégration avec le reste de GSD. Cette compétence est la version autonome légère — esquisse ponctuelle sans la machine d'état. ## Méthode de base ``` intake → variants → head-to-head → pick winner (or iterate) ``` ### 1. Prise d'informations (ignorer si l'utilisateur vous a déjà donné suffisamment) Avant de générer des variantes, obtenez trois choses — une question à la fois, pas toutes en même temps : 1. **Ressenti.** « Quelle sensation cela doit-il donner ? Adjectifs, émotions, une ambiance. » — *« calme, éditorial, comme Linear »* vous en dit plus que *« minimal »*. 2. **Références.** « Quelles applications, sites ou produits capturent la sensation que vous imaginez ? » — les références concrètes valent mieux que les descriptions abstraites. 3. **Action principale.** « Quelle est la chose la plus importante qu'un utilisateur fait sur cet écran ? » — les variantes doivent toutes bien servir cela ; sinon, ce ne sont que des décorations. Réfléchissez brièvement à chaque réponse avant la question suivante. Si l'utilisateur vous a déjà donné les trois dès le départ, passez directement aux variantes. ### 2. Variantes (2-3, jamais 1, rarement 4+) Produisez **2-3 variantes** en une seule fois. Chaque variante est un fichier HTML complet et autonome. Ne décrivez pas les variantes — construisez-les. L'intérêt est la comparaison. Chaque variante doit adopter une **position de conception différente**, pas des valeurs de pixels différentes. Trois bons axes de variation : - **Densité :** compact / aéré / ultra-dense (choisissez deux pôles contrastés) - **Accentuation :** contenu d'abord / action d'abord / outil d'abord - **Esthétique :** éditorial / utilitaire / ludique - **Disposition :** colonne unique / barre latérale / volet divisé - **Ancrage :** basé sur des cartes / contenu brut / style document Choisissez un axe et écartez-vous de celui-ci. Deux variantes qui ne diffèrent que par la couleur d'accent sont un effort inutile — l'utilisateur ne peut pas les distinguer. **Nommage des variantes :** décrivez la position, pas le nombre. ``` sketches/ ├── 001-calm-editorial/ │ ├── index.html │ └── README.md ├── 001-utilitarian-dense/ │ ├── index.html │ └── README.md └── 001-playful-split/ ├── index.html └── README.md ``` ### 3. Rendez-les en HTML réel Chaque variante est un **fichier HTML unique et autonome** : - ` ``` ### 4. README de la variante Le `README.md` de chaque variante répond : ```markdown ## Variante : {stance name} ### Position de conception Une phrase sur le principe qui motive cette variante. ### Choix clés - Disposition : ... - Typographie : ... - Couleur : ... - Interaction : ... ### Compromis - Fort pour : ... - Faible pour : ... ### Idéal pour - Le type d'utilisateur ou de cas d'utilisation que cette variante sert réellement ``` ### 5. Comparaison directe (Head-to-head) Une fois toutes les variantes construites, présentez-les sous forme de comparaison. Ne vous contentez pas de lister — **donnez votre avis** : ```markdown ## Trois versions de l'écran d'accueil | Dimension | Éditorial calme | Utilitaire dense | Divisé ludique | |-----------|-----------------|------------------|----------------| | Densité | Faible | Élevée | Moyenne | | Visibilité de l'action principale | Faible | Élevée | Moyenne | | Scannabilité | Élevée | Moyenne | Faible | | Ressenti | Calme, fiable | Tranchant, comme un outil | Invitant, énergique | **Mon avis :** Utilitaire dense pour les utilisateurs avancés, éditorial calme pour les publics axés sur le contenu. Divisé ludique est le plus faible — essaie de faire les deux et ne s'engage dans aucun. ``` Laissez l'utilisateur choisir un gagnant, ou combinez deux en un hybride, ou demandez un autre tour. ## Thématisation (quand le projet a une identité visuelle) Si l'utilisateur a un thème existant (couleurs, polices, jetons), placez les jetons partagés dans `sketches/themes/tokens.css` et `@import`ez-les dans chaque variante. Gardez les jetons minimaux : ```css /* sketches/themes/tokens.css */ :root { --color-bg: #fafafa; --color-fg: #1a1a1a; --color-accent: #0066ff; --color-muted: #666; --radius: 8px; --font-display: "Inter", sans-serif; --font-body: -apple-system, BlinkMacSystemFont, sans-serif; } ``` Ne sur-tokenisez pas une esquisse jetable — trois couleurs et une police sont généralement suffisantes. ## Barre d'interactivité Une esquisse est suffisamment interactive lorsque l'utilisateur peut : 1. **Cliquer sur une action principale** et quelque chose de visible se produit (changement d'état, modale, toast, feinte de navigation) 2. **Voir une transition d'état significative** (filtrer une liste, basculer un mode, ouvrir/fermer un panneau) 3. **Survoler des affordances reconnaissables** (boutons, lignes, onglets) Plus que cela, c'est de la sur-ingénierie pour un jetable. Moins que cela, c'est une capture d'écran. ## Mode frontière (choisir ce qu'il faut esquisser ensuite) Si des esquisses existent déjà et que l'utilisateur dit « que dois-je esquisser ensuite ? » : - **Lacunes de cohérence** — deux variantes gagnantes d'esquisses différentes ont fait des choix indépendants qui n'ont pas encore été composés ensemble - **Écrans non esquissés** — référencés mais jamais explorés - **Couverture d'état** — chemin heureux esquissé, mais pas vide / chargement / erreur / 1000 éléments - **Lacunes responsives** — validé à une seule fenêtre d'affichage ; tient-il sur mobile / ultra-large ? - **Modèles d'interaction** — des mises en page statiques existent ; les transitions, le glisser, le comportement de défilement n'existent pas Proposez 2-4 candidats nommés. Laissez l'utilisateur choisir. ## Sortie - Créez `sketches/` (ou `.planning/sketches/` si l'utilisateur utilise les conventions GSD) à la racine du dépôt - Un sous-dossier par variante : `NNN-stance-name/index.html` + `README.md` - Dites à l'utilisateur comment les ouvrir : `open sketches/001-calm-editorial/index.html` sur macOS, `xdg-open` sur Linux, `start` sur Windows - Gardez les variantes jetables — une esquisse que vous avez ressenti le besoin de préserver doit être promue en code de projet réel, pas conservée comme un artefact **Séquence d'outils typique pour une variante :** ``` terminal("mkdir -p sketches/001-calm-editorial") write_file("sketches/001-calm-editorial/index.html", "...") write_file("sketches/001-calm-editorial/README.md", "## Variant: Calm editorial\n...") browser_navigate(url="file://$(pwd)/sketches/001-calm-editorial/index.html") browser_vision(question="How does this look? Any obvious layout issues?") ``` Répétez pour chaque variante, puis présentez le tableau de comparaison. ## Attribution Adapté du flux de travail `/gsd-sketch` du projet GSD (Get Shit Done) — MIT © 2025 Lex Christopherson ([gsd-build/get-shit-done](https://github.com/gsd-build/get-shit-done)). Le système GSD complet fournit un état persistant des esquisses, des références de modèles de thème/variante et des flux de travail d'audit de cohérence ; installez avec `npx get-shit-done-cc --hermes --global`. ## FAQ ### Qu'est-ce qu'une maquette HTML ? Une maquette HTML est une page web jetable et interactive, construite avec du HTML et une mise en forme basique (souvent du CSS en ligne) pour visualiser et comparer rapidement différentes idées de conception UI/UX. Elle n'est pas destinée à la production mais à l'exploration de concepts de conception en phase initiale. ### Combien de variantes de maquettes HTML cette compétence génère-t-elle ? Cette compétence génère généralement 2 à 3 variantes de maquettes HTML interactives à la fois. L'objectif est de fournir des approches de conception contrastées à des fins de comparaison, et non une liste exhaustive de variations mineures. ### Puis-je utiliser cette compétence pour créer du code prêt pour la production ? Non, cette compétence est spécifiquement conçue pour des maquettes HTML « jetables » afin d'explorer des pistes de conception. Pour des composants prêts pour la production ou des artefacts peaufinés, vous devriez utiliser d'autres outils ou compétences comme \`claude-design\`. ### Quel type d'interactivité les maquettes HTML proposent-elles ? Les maquettes HTML générées sont interactives, ce qui signifie que les liens sont cliquables, les survols sont réels, et il y a au moins une transition d'état (par exemple, ouvrir/fermer un panneau, filtrer une liste). Cela permet une sensation plus réaliste qu'avec des images statiques. ### Comment cette compétence m'aide-t-elle à comparer différentes conceptions ? Après avoir généré les maquettes HTML, la compétence fournit un tableau comparatif qui met en évidence les différences clés selon diverses dimensions de conception (par exemple, densité, mise en page, esthétique). Elle offre également un résumé orienté pour guider votre prise de décision. ### Quelles informations dois-je fournir pour générer une maquette HTML ? Pour générer des maquettes HTML efficaces, il vous sera demandé de préciser l'« ambiance » souhaitée (adjectifs, atmosphère), les applications/sites de référence qui capturent cette ambiance, ainsi que l'« action principale » la plus importante qu'un utilisateur effectue sur l'écran.