design-html

design-html

Catalogue généré le 2026-05-11

En une phrase

Transforme un design approuvé (maquette, plan, ou simple description) en HTML/CSS de qualité production, prêt à être servi en ligne, sans dépendances.

Quand l'utiliser

• Quand tu as choisi une maquette via /design-shotgun et tu veux en faire une vraie page web.
• Quand un plan CEO ou design est validé et il faut maintenant le matérialiser en code.
• Quand tu décris une page à Claude et tu veux qu'il te ponde le HTML d'un coup, sans framework lourd.
• Pour créer une landing page, une page produit, ou un mini-site léger qui doit charger vite.

Comment l'invoquer

• Slash command : /design-html
• Voice triggers : « build the design » · « code the mockup » · « make it real »
• Phrases déclencheurs (texte) : "finalize this design" / "turn this into HTML" / "build me a page" / "implement this design"
• Auto-invocation : ✅ Oui — Claude suggère ce skill quand tu viens d'approuver un design ou que tu as un plan prêt à coder.

Description détaillée

Ce skill génère du HTML/CSS "Pretext-native" — une approche où le texte coule naturellement, où les hauteurs sont calculées dynamiquement, et où les layouts s'adaptent au contenu. Pas de JavaScript lourd, pas de framework, juste environ 30 Ko de code total pour rendre la page autonome.

Il sait s'enchaîner avec d'autres skills : il peut partir d'une maquette validée par /design-shotgun, d'un plan stratégique de /plan-ceo-review, du contexte d'une revue design /plan-design-review, ou simplement d'une description écrite par toi.

Il a un routage intelligent : selon le type de design demandé (landing, dashboard, formulaire, etc.), il choisit les bons patterns Pretext à appliquer. Le résultat est censé être directement publiable, pas un brouillon à retoucher.

L'intérêt par rapport à un "Claude qui code une page" classique : le résultat est pensé pour être responsive, accessible et léger dès le départ, plutôt que de faire un Tailwind générique qu'il faudra ensuite nettoyer.

Source

• Plugin : gstack
• Nom interne : design-html
• Fichier : /home/thymon/.claude/skills/gstack/design-html/SKILL.md