Mockup UI avec Claude : du brief au prototype cliquable

Tu as ouvert Claude, tu as généré un script Python ou deux, et tu te demandes ce que valent les Artifacts quand il s'agit de produire une interface. Réponse courte : plus que ce que tu crois, à condition de savoir quoi demander. Cet article te donne la méthode pour transformer un brief produit en mockup HTML cliquable, exportable, montrable à un client, en 90 minutes. Si tu veux d'abord cadrer ton usage global de Claude, va voir le guide complet pour apprendre Claude, puis reviens ici pour la partie design.

Ce que Claude sait (et ne sait pas) faire en mockup UI

Claude est bon pour produire du HTML + Tailwind rendu dans un Artifact, du React simple avec quelques composants et un routeur minimal, du SVG propre (icônes, illustrations plates, graphiques), et des wireframes en Mermaid ou ASCII pour cadrer une arborescence avant de coder quoi que ce soit.

Il n'est pas Figma. Pas de travail collaboratif en temps réel, pas de système de design tokens partagé entre fichiers, pas de bibliothèque de composants auto-synchronisée. Il n'est pas non plus Midjourney : si tu veux un visuel photoréaliste pour une hero section, génère-le ailleurs et demande à Claude de l'intégrer.

Deux limites à garder en tête. D'abord, Claude lit les images que tu lui envoies mais ne reproduit pas un design existant au pixel près : il en capte la structure, la palette dominante, le type de typo, pas les détails. Ensuite, hors d'un Project, chaque conversation repart à zéro sur ta charte. Si tu passes une semaine sur un mockup et tu rouvres un nouveau thread, tu perds le ton visuel.

La cible de cet article : un prototype fonctionnel que tu peux cliquer, pas une maquette haute-fidélité prête pour impression. Pour une vue plus large de ce que Claude fait côté design, va sur le pilier design.

Préparer le brief avant d'ouvrir Claude

Un mockup générique vient presque toujours d'un brief flou. Avant de taper le premier prompt, écris cinq choses :

• Le nom du produit et une phrase qui dit à qui il s'adresse
• Les écrans ou vues à produire (3 à 5, pas plus pour le premier passage)
• L'action principale par écran (ce que l'utilisateur doit faire ou décider)
• Les contraintes de style (SaaS B2B sobre, landing e-commerce coloré, outil interne terne et dense)
• Deux ou trois références visuelles nommées : Linear, Stripe, Notion, Vercel, Attio

Un gabarit prêt à coller :

Produit : [nom], outil de [X] pour [persona en une phrase].
Écrans : [liste].
Action par écran : [verbe + objet].
Style : [sobre/coloré/dense], inspiration [Linear/Stripe/Notion].
Palette : [2-3 couleurs max ou "à ta discrétion si cohérent avec X"].
Typo : [Inter/system/serif éditorial].
Contraintes : responsive mobile, pas de dépendance externe sauf Tailwind CDN.

Ce brief tient en 150 mots. Il évite la plupart des allers-retours inutiles.

Le premier prompt : générer un mockup HTML/Tailwind dans un Artifact

Pourquoi HTML + Tailwind via CDN plutôt que React ? Trois raisons : l'Artifact rend immédiatement sans build, tu peux télécharger le fichier et l'héberger en 30 secondes, et tu peux le passer à n'importe quel dev sans discussion sur le stack.

Le prompt de départ :

Génère un Artifact HTML autonome, Tailwind via CDN,
pour [coller le brief].

Contraintes de rendu :
- Un seul fichier HTML, pas de dépendance autre que Tailwind.
- Contenu réaliste : vrais noms de features, vrais prix,
  pas de Lorem Ipsum ni de "Feature 1 / Feature 2".
- États hover et focus sur les éléments interactifs.
- Responsive : mobile d'abord, breakpoint md pour tablette/desktop.
- Icônes : Lucide via CDN si besoin, sinon SVG inline.

Livre uniquement le code, pas d'explication avant.

Compare ça avec un prompt type "fais-moi une landing SaaS" : tu obtiens un wall de sections génériques, trois témoignages inventés avec des photos cassées, et un pricing à trois tiers qui ressemble à tous les autres. Le brief détaillé force Claude à produire des choix de contenu, pas juste des blocs.

Si tu veux pousser jusqu'au site complet publié ensuite, le flux complet est détaillé dans créer un site web avec Claude.

Itérer : les 4 passes qui transforment un mockup correct en prototype montrable

La règle qui change tout : une passe, un sujet. Si tu empiles "change la palette, ajoute un modal de connexion et resserre les espacements" dans le même message, Claude régresse sur ce qui marchait déjà.

Passe 1 : structure et contenu

Tu valides l'arborescence et le texte avant de parler de style. Prompt type : "La hero a trop de texte, resserre à un titre, un sous-titre, un CTA primaire et un lien secondaire. Garde tout le reste identique."

Passe 2 : hiérarchie visuelle

Tailles de police, espacements verticaux, contraste. "Augmente l'écart vertical entre les sections (py-24 au lieu de py-12), passe le titre hero en text-6xl, et assombris le gris du sous-titre pour meilleur contraste."

Passe 3 : états interactifs

Hover, focus, modal, dropdown, menu mobile. "Ajoute un modal de connexion déclenché par le CTA 'Essayer gratuitement'. Email, mot de passe, bouton. Overlay sombre, modal centré, fermeture au clic hors modal."

Passe 4 : cohérence

Palette, typo, icônes, espacements répétés. "Harmonise : toutes les icônes en Lucide, taille 20px dans les boutons et 24px dans les features. Un seul bleu primaire sur tous les CTA, pas trois nuances différentes."

Quatre passes, dix minutes chacune. Tu arrives à un mockup qui ne sent plus l'IA.

Rendre le mockup cliquable : navigation entre écrans

Un prototype montrable, c'est un prototype où le client peut cliquer de l'écran A à l'écran B. Deux approches dans un seul Artifact.

HTML + JS minimal. Tu demandes à Claude de mettre chaque "écran" dans une <section> avec un id, et d'afficher une seule section à la fois via un petit script qui gère les clics sur les liens de navigation. Suffisant pour un login → dashboard → détail.

Artifact React avec un routeur minimal. Si tu as plus de 4 écrans ou des états partagés (utilisateur connecté, panier), passe sur un Artifact React. Claude gère React Router ou un simple useState de type currentScreen.

Prompt pour chaîner :

Dans l'Artifact actuel, ajoute la navigation entre trois écrans :
login → dashboard → détail projet.
Une nav latérale fixe à gauche sur desktop (cachée sur mobile),
les liens déclenchent le changement d'écran sans rechargement.
Ne modifie PAS le style déjà en place, ajoute seulement la logique.

Le piège à éviter : générer chaque écran dans une conversation séparée. La palette dérive, les espacements dérivent, les boutons n'ont plus la même forme. Reste dans un seul thread.

Exporter, partager, passer la main à un designer ou dev

Trois sorties utiles :

Pour héberger via Vercel directement depuis Claude Code, le flux est détaillé dans déployer un site Vercel avec Claude.

Ce que ça change concrètement : donner à un dev un prototype cliquable au lieu d'un doc Word lui évite une bonne partie des allers-retours de clarification sur le premier sprint. Il voit les états, il voit les transitions, il n'a plus à deviner.

Avertissement sur la dette technique : le code Claude est bon pour un proto, pas pour une base de prod sans revue. Classes Tailwind redondantes, pas de système de composants, accessibilité approximative. Si le proto est validé et que tu passes en construction réelle, prévois une réécriture propre, pas un simple nettoyage.

Un workflow complet : du brief au prototype en 90 minutes

Le chronométrage qui marche quand tu restes concentré :

• 15 min : écrire le brief avec le gabarit
• 10 min : premier mockup HTML/Tailwind dans un Artifact
• 4 × 10 min : les quatre passes d'itération (structure, hiérarchie, interactions, cohérence)
• 15 min : ajouter la navigation entre écrans
• 10 min : télécharger, publier sur Netlify Drop, envoyer le lien

Deux conditions pour tenir le délai. Rester dans un seul thread Claude, pour que le contexte visuel ne se perde pas entre les messages. Et créer un Project si tu comptes réutiliser la charte sur plusieurs sessions : tu y colles ton brief, ta palette, tes références, et chaque nouveau mockup démarre déjà aligné. La partie setup des Projects est couverte dans configurer Claude et ses Projects.

Si après deux ou trois cycles tu veux structurer tout ça (prompt engineering propre, projets réutilisables, pipeline de livraison pour tes propres clients), c'est exactement ce que couvre le programme Maîtriser Claude au quotidien sur le module Site Web et le module Setup. Tu y transformes la méthode décrite ici en workflow répétable, chronométré, avec un livrable concret à la fin de la semaine.