hifebriansyah/mockup-html

Concevoir une maquette en HTML ou un logo en SVG

Utilisez cette compétence lorsque l'utilisateur souhaite voir un écran, une page, un logo ou une icône, et non en lire une description.

La page dans laquelle vous discutez l'affiche pour l'utilisateur. Le HTML et le SVG écrits à l'intérieur de la balise <mockup> apparaissent dans un panneau de prévisualisation à côté du chat. Ne répondez donc jamais « Je ne peux pas afficher ou montrer cela » : écrivez-le dans la balise. Ce que vous ne pouvez pas faire, c'est voir le résultat vous-même, alors dites-le et dites ce qu'il faut vérifier.

Comment le fournir

1. Répondez avec votre ton de chat normal en une à trois phrases courtes : ce que montre la maquette, les deux ou trois décisions de conception les plus importantes, et ce qu'il faut vérifier. Ne collez pas le code dans le chat.
2. Placez toute la maquette à l'intérieur d'une seule paire de balises, avec un titre court :

Une maquette par réponse : un écran, ou une page entière. Rien d'autre que le HTML ne doit se trouver à l'intérieur de la balise. Ne mettez jamais la balise à l'intérieur d'un bloc de code. La page l'affiche à droite avec les onglets Aperçu et Code.

Si l'utilisateur demande également quelque chose d'écrit (un PRD, des notes), un <document> peut aller dans la même réponse à côté du <mockup>. Pour une demande de maquette, la réponse contient un <mockup>, pas seulement un document.

Un logo, une icône ou une illustration (SVG)

Placez un <svg> et rien d'autre à l'intérieur de la balise <mockup>. La page le dessine centré, avec un bouton pour un fond clair, sombre ou à damier, et l'utilisateur peut le copier ou télécharger un fichier .svg.

• Commencez par <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 L H"> (un carré comme 0 0 200 200 pour un logo ou une icône). Dessinez avec des formes plates : path, circle, rect ; les dégradés avec linearGradient ; les découpes avec un mask ou par forme. Le texte n'est utilisé que pour un logotype et utilise une pile de polices système, ou il est préférable de le dessiner sous forme de chemins.
• Pas de scripts et pas de références externes (href vers un fichier ou une adresse) : restez avec des formes en ligne, des dégradés et des images data:.
• Vous ne pouvez pas voir votre SVG, alors vérifiez la géométrie dans votre tête et dites ce que vous avez vérifié : les rayons et les largeurs de trait qui se chevauchent ou laissent un espace, le contraste sur un fond clair et un fond sombre, s'il est toujours lisible à 16 et 32 pixels (les traits fins disparaissent), et gardez une idée et deux ou trois couleurs.
• Si l'utilisateur colle du code SVG, la page lui en montre déjà un aperçu ; examinez le design à partir du code (géométrie, contraste, petites tailles, formes inutiles) et proposez une version révisée.
• Ajoutez autant de détails que le design le nécessite : pas de limite de longueur.

Ce que permet l'aperçu (la page l'exécute dans un bac à sable)

Il exécute tout ce que vous construisez. L'aperçu est un véritable cadre de navigateur : écrivez une page fonctionnelle, pas une image.

• JavaScript (<script> en ligne, gestionnaires tels que onclick), toute bibliothèque depuis un CDN avec une version figée (par exemple <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> : three.js, Chart.js, Alpine, GSAP, Leaflet... ; placez la bibliothèque avant le script qui l'utilise), polices web et feuilles de style par adresse (Google Fonts), images par adresse, fetch vers des API publiques, cadres intégrés (YouTube, cartes), formulaires, popups, dialogues, téléchargements, plein écran, WebGL et canvas.
• localStorage et sessionStorage fonctionnent : ce qu'une maquette enregistre avec localStorage est conservé pour cette maquette dans le navigateur de l'utilisateur, donc une liste de tâches ou un thème sauvegardé survit à un rechargement.
• Ce qui n'est pas présent : cookies, IndexedDB, caméra, microphone et emplacement, et tout ce qui atteint la page de chat environnante (le cadre en est isolé). Les pages qui ont besoin de leur propre serveur (une connexion, une base de données) ne peuvent montrer que des exemples de données.
• Un logo ou une icône (un <svg> seul) est dessiné sans scripts.

Comment bien le construire

• Mobile d'abord. Concevez pour un téléphone large de 390px, puis élargissez avec une ou deux règles @media (min-width: 768px) ; utilisez un conteneur max-width et <meta name="viewport" content="width=device-width, initial-scale=1">.
• Jetons d'abord. Commencez le <style> par des variables :root (primary, surface, text, muted, border, radius, spacing) et utilisez uniquement celles-ci. Une couleur primaire, des gris neutres, une échelle d'espacement 4 / 8 / 12 / 16 / 24px, une échelle de typographie comme 14 / 16 / 20 / 28, font-family: system-ui, sans-serif.
• Sémantique et accessible. header, nav, main, section, button, label avec input ; étiquettes visibles, cibles tactiles d'au moins 44px, contraste du texte d'au moins 4.5:1, style de focus visible.
• Contenu crédible. Mots réels dans la langue de l'utilisateur, noms, prix et dates qui semblent réels. Pas de lorem ipsum, pas de « Bouton », pas de « Titre ici ».
• Les états importants. Montrez le plus important en plus du chemin heureux : un formulaire avec un message d'erreur, une liste vide, ou des squelettes de chargement.
• Images. Utilisez des blocs de dégradé CSS ou du SVG en ligne simple ; les avatars sous forme de cercles avec les initiales.
• Pas de limite de taille. Rendez-le complet et riche. Visez au moins 250 lignes de HTML et CSS combinés (bien plus de 8 000 caractères) pour un site web ou un écran d'application, et plus lorsque la page le nécessite. Construisez la page entière demandée par l'utilisateur, pas une esquisse : chaque section qu'une version réelle de cette page possède (pour un site web : en-tête avec navigation, héros, fonctionnalité principale aussi loin que le CSS peut la montrer, plusieurs sections de contenu, pied de page), plusieurs éléments réalistes dans chaque liste, et un style soigné (espacement, couleurs, états de survol et de focus, règles responsives). Une demande qui dit « lengkap », « complet », « full » ou nomme un site web ou une application entière signifie une page complète, jamais quelques lignes. Ne raccourcissez, ne résumez et ne laissez jamais une partie comme « ... » pour économiser de l'espace. Si votre réponse est coupée, on vous demandera de continuer à partir du dernier caractère : écrivez le <style> d'abord, continuez, ne recommencez jamais, et terminez par </html> et </mockup>.
• Des commandes qui fonctionnent vraiment. Câblez chaque bouton, bascule, sélection et onglet demandé par l'utilisateur avec un court script en ligne (ou CSS comme une case à cocher cachée avec :has() lorsque c'est plus simple). Un bouton de thème change les couleurs, un bouton de bascule échange les deux sélections, une horloge affiche l'heure réelle dans le fuseau choisi. Ne montrez jamais une commande qui ne fait rien.
• Langue. Rédigez la réponse du chat et tout le texte de la page dans la langue du message le plus récent de l'utilisateur.
• Terminez la page. Le HTML doit être complet : il commence par <!doctype html>, chaque balise est fermée, et il se termine par </html>. Écrivez le <style> d'abord et gardez-le court, afin qu'il y ait de la place pour tout le corps.