design-htmlpar Garry Tan

Design HTML Skill.

Un skill Claude Code et Codex pour le design d'interface : produit du HTML/CSS de qualité production à partir d'une direction de design validée.

Web et UI
HTML

Télécharger OpenDesign Voir le guide d'utilisation

garrytan/gstack · design-html/SKILL.mdSKILL.md

--- name: design-html description: Design finalization: generates production-quality Pretext-native HTML/CSS. (gstack) --- ## When to invoke this skill ## Confusion Protocol ## Claimed Limitations Need Evidence ## Continuous Checkpoint Mode ## Context Health (soft directive) ## Question Tuning (skip entirely if QUESTION_TUNING: false)

En-tête et titres de section lus depuis le fichier source le 14/09/2026 · 54 976 caractères au total

01 Ce qu'il fait

Ce que fait le Skill design-html dans Claude Code et Codex

Résumé, workflow et sorties, tous lus dans le SKILL.md du skill.

D'après le SKILL.mdLu le 14-09-2026 · pas une exécution enregistrée

Dans les termes du Skill

Génère du HTML/CSS de qualité production avec une mise en page de texte Pretext-native où le texte se réajuste réellement, où les hauteurs se calculent dynamiquement et où les mises en page s'adaptent au redimensionnement. Fonctionne à partir de maquettes approuvées (/design-shotgun), de plans CEO (/plan-ceo-review), de contexte de revue de design, ou de descriptions utilisateur. Oriente vers le bon niveau d'API Pretext selon la complexité du design (les mises en page simples utilisent prepare + layout ; les UI de chat utilisent prepareWithSegments + walkLineRanges ; les mises en page éditoriales utilisent layoutNextLine pour le texte autour d'obstacles).

30 Ko de surcharge, zéro dépendance. Produit des fichiers HTML autonomes (Pretext vendorisé et inliné) ou des composants framework (React/Svelte/Vue). Par défaut, HTML vanilla avec serveur de live reload pour un aperçu immédiat dans le navigateur. Jamais de lorem ipsum — extrait le contenu réel des maquettes ou génère un texte réaliste à partir des plans.

Ce qu'il produit

Fichier HTML autonome avec Pretext vendorisé et inliné, propriétés CSS personnalisées issues des tokens, HTML5 sémantique, contenteditable + MutationObserver pour l'édition en direct, ResizeObserver pour la remise en page au redimensionnement, sauvegardé dans ~/.gstack/projects/$SLUG/designs/<screen-name>-YYYYMMDD/finalized.html
Fichier de composant framework (React TSX/JSX, Svelte, Vue) avec les imports Pretext ajoutés aux dépendances du projet, sauvegardé dans ~/.gstack/projects/$SLUG/designs/<screen-name>-YYYYMMDD/finalized.[tsx|svelte|vue]
Métadonnées finalized.json accompagnant le HTML, portant le chemin source_mockup, le chemin source_plan, le mode (approved-mockup/plan-driven/freeform/evolve), pretext_tier, le choix de framework, le nombre d'itérations, la date, le nom de l'écran, la branche
Fichier DESIGN.md au format open DESIGN.md si l'utilisateur accepte l'offre d'extraction, contenant les propriétés CSS personnalisées, les familles de polices, la palette de couleurs, l'échelle d'espacement, le border radius, les valeurs d'ombre extraites du HTML généré

Voir l'exemple de prompt ↗

Fonctionnement

01
Détecter le contexte de conception et router
Vérifie la présence d'approved.json issu de /design-shotgun, des plans CEO, des variantes de design ou des tokens DESIGN.md.
02
Extraire la spec d'implémentation
Si un binaire de design est disponible, exécute une commande prompt sur le PNG approuvé pour extraire couleurs, typographie, structure de mise en page via GPT-4o vision.
03
Routage intelligent de l'API Pretext
Classe le design en niveaux : les mises en page simples utilisent prepare + layout pour des hauteurs sensibles au redimensionnement ; les grilles de cartes utilisent la même approche pour un dimensionnement autonome ; les UI de chat utilisent prepareWithSegments + walkLineRanges pour des bulles parfaitement ajustées ; les pages éditoriales utilisent layoutNextLine pour le texte autour des obstacles.
04
Générer un HTML natif Pretext
Écrit un fichier unique avec Pretext vendorisé et intégré (ou repli sur CDN), des propriétés CSS personnalisées issues des tokens, du HTML5 sémantique, contenteditable + MutationObserver pour l'édition en direct, ResizeObserver pour la remise en page au redimensionnement, du contenu réel extrait du mockup ou du plan.
05
Analyse anti-slop avant l'aperçu
Si un détecteur de design est disponible, scanne la page finalisée une fois pour repérer les motifs d'IA générique (dégradés violets, grilles de cartes identiques, CTA génériques absents du mockup).

02 Trouvez celui qui vous convient

Quand utiliser le skill design-html

Utilisez le skill design-html dans Claude Code ou Codex lorsque le travail est du design UI de ce type. La portée et les limites ci-dessous sont tirées du propre fichier du skill.

Bon choix

Création d'un tableau de bord, d'une page de liste ou d'une grille de cartes où les cartes doivent s'auto-dimensionner selon leur contenu sans hauteurs codées en dur
Implémentation d'une UI de chat ou de messagerie où les bulles doivent s'ajuster étroitement au texte et calculer correctement la largeur minimale
Finalisation d'un design après qu'un mockup approuvé par /design-shotgun, une stratégie produit /plan-ceo-review, ou un contexte /plan-design-review existe
Construction d'une page éditoriale, d'une mise en page de blog ou d'une page riche en contenu où le texte doit s'écouler dynamiquement autour d'obstacles ou d'images

Connaître les limites

Projets nécessitant du contenu de remplissage ou du lorem ipsum — le skill génère toujours du contenu réel extrait des mockups, des plans ou des descriptions utilisateur
Exécutions automatisées sans révision humaine — l'offre d'installation du détecteur de design et la boucle d'affinage nécessitent des décisions utilisateur via AskUserQuestion

Quoi fournir

PNG de mockup de design approuvéChemin vers la variante approuvée depuis /design-shotgun enregistré dans approved.json, ou chemin PNG fourni par l'utilisateur.
Plan CEO ou notes de revue de designFichier Markdown issu de /plan-ceo-review ou /plan-design-review contenant la vision produit, les exigences UI, les parcours utilisateur, le public cible, l'ambiance visuelle, la structure de contenu.
Tokens DESIGN.mdFichier de système de design du dépôt avec couleurs de marque, famille de police, échelle d'espacement, rayon de bordure, valeurs d'ombre.
Description utilisateur pour le mode libreLorsqu'aucun mockup ou plan n'existe, l'utilisateur fournit l'objectif/le public, l'ambiance visuelle (sombre/clair, ludique/sérieux, dense/spacieux), la structure de contenu, des sites de référence.
finalized.html précédent pour le mode évolutionHTML finalisé existant issu d'une session précédente.

03 Dans le skill

Règles que le skill design-html donne à Claude Code et Codex

6 instructions concrètes, valeurs par défaut et limites que SKILL.md définit pour l'agent — la partie du fichier qui change le résultat.

Toujours utiliser Pretext pour la mise en page du texte
Même si le design semble simple, Pretext garantit un calcul correct de la hauteur lors du redimensionnement. Le surcoût est de 30 Ko. Chaque page en bénéficie.
Du contenu réel uniquement, jamais de texte de remplissage
Lorsqu'une maquette existe, extrayez-en le texte. En mode piloté par un plan, utilisez le contenu du plan. En mode libre, générez un contenu réaliste basé sur la description de l'utilisateur.
La fidélité à la source de vérité prime sur l'élégance du code
Lorsqu'une maquette approuvée existe, reproduisez-la au pixel près. Si cela nécessite width: 312px plutôt qu'une classe de grille CSS, c'est correct.
Des modifications chirurgicales dans la boucle d'affinage, jamais de régénération
Utilisez l'outil Edit pour effectuer des changements ciblés, et non l'outil Write pour régénérer tout le fichier. L'utilisateur peut avoir effectué des modifications manuelles via contenteditable qui doivent être préservées.
Une page par invocation
Pour les designs multi-pages, exécutez /design-html une fois par page. Chaque exécution produit un fichier HTML.
Liste noire anti-AI-slop appliquée par défaut
N'incluez jamais de dégradés violet/bleu, de palette crème et serif, de texte en dégradé, de grilles génériques de fonctionnalités à 3 colonnes, de grilles de cartes identiques, de mises en page tout-centré, d'accroches au-dessus des titres, de rangées de métriques héroïques, de blobs décoratifs, de bords lumineux, de photos de stock en placeholder, de CTA génériques, de cartes à coins arrondis avec ombres, de décoration par emoji, de témoignages génériques, ou de héros à division standardisée—sauf si la maquette approuvée en contient un, si DESIGN.md le sanctionne, ou si l'utilisateur le demande explicitement avec l'arbitrage énoncé une fois.

04 Mettez-le en pratique

Installer design-html dans Claude Code ou Codex

Une commande npx skills add, puis une première tâche dans votre agent et une checklist pour le résultat.

Ajouter design-html à Claude Code, Codex ou votre agent

Exécutez-la dans votre projet ; l'installateur demande à quel agent l'ajouter.

Terminal

npx skills add https://github.com/garrytan/gstack --skill design-html

Forme générique de la CLI skills pour design-html/SKILL.md ; le dépôt peut documenter son propre chemin.

Donnez au skill une première tâche de design UI

Rédigé dans les termes propres du skill ; remplacez les parties entre crochets par votre contenu.

Starter prompt

Finalize the design for our [product name] landing page. I have an approved mockup from /design-shotgun at [path to approved.json]. The page needs a hero section with dynamic text that reflows on resize, a 3-card feature grid where cards self-size based on content, and a pricing table. Use our brand colors from DESIGN.md and make sure all text is editable in the browser so I can tweak copy live. Output as vanilla HTML first so I can preview immediately, then I'll ask for a React component version once the design is locked.

Source : rédigé à partir du SKILL.md, dans les termes propres du skill.

Vérifiez le premier résultat

Ce que le SKILL.md lui-même présente comme un résultat correct :

Serveur de rechargement en direct démarré à http://localhost:PORT/finalized.html afin que l'utilisateur puisse redimensionner la fenêtre pour vérifier que le texte se réajuste dynamiquement et cliquer sur n'importe quel texte pour vérifier que la mise en page contenteditable se recalcule instantanément
PNG de la maquette approuvée affiché en ligne pour comparaison visuelle pendant la boucle d'affinage si une maquette existe, sinon les retours de l'utilisateur pendant la boucle constituent la source de vérité pour les modes pilotés par un plan ou libres
Confirmation du chargement des polices via document.fonts.ready avant le premier appel de prepare() pour garantir que les métriques de texte sont correctes pour le calcul de la mise en page Pretext
L'utilisateur confirme 'done' / 'ship it' / 'looks good' / 'perfect' dans la boucle d'affinage après avoir testé le comportement de redimensionnement et l'édition de texte en direct, 10 itérations maximum avant de proposer de continuer ou d'appeler done

Dans OpenDesign importez design-html depuis son lien SKILL.md : Plugins → Add → Skill → Import from link, puis sélectionnez-le dans la barre supérieure.

Télécharger OpenDesign Lire le démarrage rapide

05 Open source, traçable

Source, licence et vérification

D'où proviennent les faits de cette page et quand ils ont été vérifiés pour la dernière fois.

Author: Garry Tan
Repository: github.com/garrytan/gstack Branche main
Fichier du skill: design-html/SKILL.md Somme de contrôle du contenu enregistrée lors de la vérification ; commit 71f6048
License: MIT Tiré de LICENSE.
Étoiles du dépôt: 132 921 Capture GitHub prise le 14/09/2026 pour l'ensemble du dépôt garrytan/gstack, qui contient 7 skills dans ce catalogue. Il ne s'agit pas d'une note ou d'un compteur d'utilisation pour design-html.
Vérifié par OpenDesign: 2026-09-14 Le fichier source, le chemin, le texte de licence et le nombre d'étoiles ont été vérifiés. Non intégré dans OpenDesign main (vérifié le 2026-08-28) ; aucune exécution en conditions réelles n'a été enregistrée sur cette page.

Dans le SKILL.md

Quand invoquer ce skillFonctionne avec des maquettes approuvées, des plans CEO, un contexte de revue de design, ou des descriptions utilisateur pour du HTML/CSS de production
Préambule (à exécuter en premier)Exécute gstack-skill-start, lit les lignes STATUS, gère le mode dégradé, suit les blocs GSTACK_INSTRUCTION pour l'onboarding/consentement
Opérations sûres en mode planOpérations autorisées en mode plan : codex exec/review, écritures dans ~/.gstack/, fichier de plan, ouverture pour les artefacts
Invocation de skill pendant le mode planLes instructions du skill sont exécutables et non de simples références ; AskUserQuestion satisfait la fin de tour ; ExitPlanMode uniquement après achèvement du workflow
Format AskUserQuestionLa résolution de l'outil dépend de SESSION_KIND ; spawned choisit automatiquement l'option recommandée ; Conductor utilise de la prose ; gestion de repli en cas d'échec
Synchronisation des artefacts (démarrage du skill)Agit sur la sortie de skill-start : indice GBrain, santé d'ARTIFACTS_SYNC, portail de consentement à la confidentialité unique via GSTACK_INSTRUCTION
Correctif comportemental spécifique au modèle (claude)Discipline de liste de tâches, réfléchir avant les actions lourdes, outils dédiés plutôt que Bash—préférences subordonnées aux instructions du skill
VoixVoix GStack : commencer par l'essentiel, détails concrets, relier les choix aux résultats de l'utilisateur, direct sur la qualité, conclusions cadrées
Récupération du contexteRécupère les artefacts récents, les revues, la chronologie, les décisions, le dernier checkpoint ; suggère la prochaine skill si RECENT_PATTERN en implique une
Style d'écritureExplique le jargon spécialisé à la première occurrence, formule les questions en termes de résultats, phrases courtes à la voix active, à ignorer si EXPLAIN_LEVEL : terse
Principe d'exhaustivité — Boil the OceanL'IA rend l'exhaustivité peu coûteuse ; recommandez une couverture complète ; Completeness : X/10 quand les options diffèrent en couverture
Protocole de confusionEn cas d'ambiguïté à fort enjeu, STOP, nommez-la, présentez 2 à 3 options avec leurs compromis, posez la question — pas pour du code de routine

Description du skill lui-même

Finalisation de design : génère du HTML/CSS de qualité production natif Pretext. (gstack)

Description de front-matter tirée de SKILL.md. Le fichier complet fait environ 54 976 caractères. Lire le fichier complet sur GitHub.

06 Avant d'installer

Questions sur la skill design-html

Les réponses proviennent du SKILL.md tel que lu le 2026-09-14, et non d'une exécution enregistrée.

Cela fonctionne-t-il avec mon projet React/Svelte/Vue ou seulement en HTML natif ?

Les deux. L'étape 2.5 détecte votre framework dans package.json et vous demande si vous voulez du HTML natif (fichier de prévisualisation autonome, recommandé pour un premier passage) ou un composant natif au framework avec des hooks Pretext. Le HTML natif est utilisé par défaut si aucun framework n'est détecté. Pour une sortie framework, vous choisissez TypeScript ou JavaScript.

Design HTML

Exécutez design-html sur une vraie tâche de design UI.

Téléchargez OpenDesign, importez design-html depuis son lien SKILL.md, collez le prompt ci-dessus, et lisez le plan avant le résultat.

Télécharger OpenDesign Parcourir tous les skills