design-htmlpor Garry Tan

Design HTML Skill.

Un skill de Claude Code y Codex para diseño de UI: produce HTML/CSS de calidad de producción desde una dirección de diseño acordada.

Web y UI
HTML

Descargar OpenDesign Ver guía de uso

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)

Encabezados de sección y metadatos leídos del archivo original el 14/09/2026 · 54.976 caracteres completos

01 Qué hace

Qué hace el Skill design-html en Claude Code y Codex

Resumen, flujo de trabajo y resultados, todo leído del SKILL.md del skill.

Del SKILL.mdLeído 2026-09-14 · no es una ejecución registrada

En los propios términos del Skill

Genera HTML/CSS de calidad de producción con un layout de texto nativo de Pretext, donde el texto realmente se reajusta, las alturas se calculan dinámicamente y los layouts se adaptan al redimensionar. Funciona a partir de mockups aprobados (/design-shotgun), planes del CEO (/plan-ceo-review), contexto de revisión de diseño o descripciones del usuario. Dirige al nivel correcto de la API de Pretext según la complejidad del diseño (layouts simples usan prepare + layout; UIs de chat usan prepareWithSegments + walkLineRanges; composiciones editoriales usan layoutNextLine para texto alrededor de obstáculos).

30KB de sobrecarga, cero dependencias. Produce archivos HTML autocontenidos (Pretext vendorizado e incluido en línea) o componentes de framework (React/Svelte/Vue). Por defecto usa HTML vanilla con un servidor de recarga en vivo para vista previa inmediata en el navegador. Nunca lorem ipsum: extrae contenido real de los mockups o genera texto realista a partir de los planes.

Qué produce

Archivo HTML autocontenido con Pretext vendorizado e incluido en línea, propiedades personalizadas de CSS a partir de tokens, HTML5 semántico, contenteditable + MutationObserver para edición en vivo, ResizeObserver para reajustar el layout al redimensionar, guardado en ~/.gstack/projects/$SLUG/designs/<screen-name>-YYYYMMDD/finalized.html
Archivo de componente de framework (React TSX/JSX, Svelte, Vue) con las importaciones de Pretext añadidas a las dependencias del proyecto, guardado en ~/.gstack/projects/$SLUG/designs/<screen-name>-YYYYMMDD/finalized.[tsx|svelte|vue]
Metadatos de finalized.json junto al HTML, con la ruta de source_mockup, la ruta de source_plan, el modo (approved-mockup/plan-driven/freeform/evolve), pretext_tier, la elección de framework, el número de iteraciones, la fecha, el nombre de la pantalla y la rama
Archivo DESIGN.md en formato abierto DESIGN.md si el usuario acepta la oferta de extracción, que contiene propiedades personalizadas de CSS, familias de fuentes, paleta de colores, escala de espaciado, radio de borde y valores de sombra extraídos del HTML generado

Ver el ejemplo de prompt ↗

Cómo funciona

01
Detectar el contexto de diseño y enrutar
Comprueba si existe approved.json de /design-shotgun, planes del CEO, variantes de diseño o tokens de DESIGN.md.
02
Extraer la especificación de implementación
Si hay un binario de diseño disponible, ejecuta el comando prompt sobre el PNG aprobado para extraer colores, tipografía y estructura de layout mediante visión de GPT-4o.
03
Enrutamiento inteligente de la API Pretext
Clasifica el diseño en un nivel: los layouts simples usan prepare + layout para alturas sensibles al redimensionado; las grillas de tarjetas usan lo mismo para autodimensionarse; las UI de chat usan prepareWithSegments + walkLineRanges para burbujas ajustadas; las composiciones editoriales usan layoutNextLine para texto alrededor de obstáculos.
04
Generar HTML nativo de Pretext
Escribe un único archivo con Pretext vendorizado e insertado en línea (o alternativa por CDN), propiedades personalizadas de CSS a partir de tokens, HTML5 semántico, contenteditable + MutationObserver para edición en vivo, ResizeObserver para reajustar el layout al redimensionar, y contenido real extraído del mockup o del plan.
05
Escaneo de detección de slop antes de la vista previa
Si hay un detector de diseño disponible, escanea la página finalizada una vez en busca de patrones de "AI-slop" (gradientes morados, grillas de tarjetas idénticas, CTA genéricos que no provienen del mockup).

02 Encuentra tu caso de uso

Cuándo usar el skill design-html

Usa el skill design-html en Claude Code o Codex cuando el trabajo sea diseño de UI de este tipo. El alcance y límites abajo se toman del archivo propio del skill.

Buen caso de uso

Crear un dashboard, página de listado o grilla de tarjetas donde las tarjetas necesiten autodimensionarse según su contenido sin alturas fijas
Implementar una UI de chat o mensajería donde las burbujas necesiten ajustarse estrechamente al texto y calcular correctamente el ancho mínimo
Finalizar un diseño después de que exista un mockup aprobado de /design-shotgun, una estrategia de producto de /plan-ceo-review, o contexto de /plan-design-review
Construir una composición editorial, un layout de blog o una página con mucho contenido donde el texto deba fluir dinámicamente alrededor de obstáculos o imágenes

Conozca los límites

Proyectos que requieren contenido de relleno o lorem ipsum: el skill siempre genera contenido real extraído de mockups, planes o descripciones del usuario
Ejecuciones automatizadas sin revisión humana: la oferta de instalación del detector de diseño y el bucle de refinamiento requieren decisiones del usuario mediante AskUserQuestion

Qué proporcionar

PNG del mockup de diseño aprobadoRuta a la variante aprobada de /design-shotgun guardada en approved.json, o ruta de PNG proporcionada por el usuario.
Plan del CEO o notas de revisión de diseñoArchivo Markdown de /plan-ceo-review o /plan-design-review que contiene la visión del producto, requisitos de UI, flujos de usuario, público objetivo, estilo visual y estructura de contenido.
Tokens de DESIGN.mdArchivo del sistema de diseño del repositorio con colores de marca, familia tipográfica, escala de espaciado, radio de borde y valores de sombra.
Descripción del usuario para el modo libreCuando no existe mockup ni plan, el usuario proporciona propósito/público, estilo visual (oscuro/claro, lúdico/serio, denso/espacioso), estructura de contenido y sitios de referencia.
finalized.html previo para el modo de evoluciónHTML finalizado existente de una sesión anterior.

03 Dentro del skill

Reglas que el skill design-html le da a Claude Code y Codex

6 instrucciones concretas, valores predeterminados y límites que SKILL.md establece para el agente: la parte del archivo que cambia el resultado.

Usar siempre Pretext para el layout de texto
Incluso si el diseño parece simple, Pretext garantiza un cálculo correcto de la altura al redimensionar. El sobrecoste es de 30KB. Toda página se beneficia.
Contenido real únicamente, nunca texto de relleno
Cuando existe una maqueta, extraiga el texto de ella. En el modo guiado por plan, use el contenido del plan. En el modo libre, genere contenido realista basado en la descripción del usuario.
Fidelidad a la fuente de verdad por encima de la elegancia del código
Cuando existe una maqueta aprobada, cópiela píxel a píxel. Si eso requiere width: 312px en lugar de una clase de CSS grid, eso es correcto.
Ediciones quirúrgicas en el ciclo de refinamiento, nunca regenerar
Use la herramienta Edit para hacer cambios puntuales, no la herramienta Write para regenerar todo el archivo. El usuario puede haber hecho ediciones manuales mediante contenteditable que deben preservarse.
Una página por invocación
Para diseños de varias páginas, ejecute /design-html una vez por página. Cada ejecución produce un archivo HTML.
Lista negra anti-AI-slop aplicada por defecto
Nunca incluya gradientes morado/azul, paletas de crema y serif, texto en gradiente, cuadrículas genéricas de funciones de 3 columnas, cuadrículas de tarjetas idénticas, diseños que centran todo, antetítulos sobre los encabezados, filas de métricas heroicas, blobs decorativos, bordes brillantes, imágenes de stock de relleno, CTAs genéricos, tarjetas de esquinas redondeadas con sombras, decoración con emojis, testimonios genéricos, o héroes divididos genéricos—a menos que la maqueta aprobada contenga uno, DESIGN.md lo autorice, o el usuario lo pida explícitamente indicando el compromiso una sola vez.

04 Ponlo a trabajar

Instalar design-html en Claude Code o Codex

Un comando npx skills add, luego una primera tarea en tu agente y una lista de verificación para el resultado.

Añadir design-html a Claude Code, Codex o Tu Agente

Ejecútelo en su proyecto; el instalador pregunta a qué agente añadirlo.

Terminal

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

Forma genérica de la CLI skills para design-html/SKILL.md; el repositorio puede documentar su propia ruta.

Dale al skill una primera tarea de diseño de interfaz

Redactado en los términos del propio skill; sustituya las partes entre corchetes por su material.

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.

Fuente: redactado a partir del SKILL.md en los términos del propio skill.

Revisa el primer resultado

Lo que el propio SKILL.md indica que debe ser un resultado correcto:

Servidor de recarga en vivo iniciado en http://localhost:PORT/finalized.html para que el usuario pueda redimensionar la ventana y verificar que el texto se reajusta dinámicamente, y hacer clic en cualquier texto para verificar que el layout con contenteditable se recalcula al instante
PNG de la maqueta aprobada mostrado en línea para comparación visual durante el ciclo de refinamiento si existe uno; de lo contrario, la retroalimentación del usuario durante el ciclo es la fuente de verdad para los modos guiado por plan o libre
Confirmación de carga de fuentes mediante document.fonts.ready como puerta antes de la primera llamada a prepare() para asegurar que las métricas de texto sean correctas para el cálculo del layout de Pretext
El usuario confirma 'listo' / 'lánzalo' / 'se ve bien' / 'perfecto' en el ciclo de refinamiento tras probar el comportamiento de redimensionado y la edición de texto en vivo, máximo 10 iteraciones antes de ofrecer continuar o dar por terminado

En OpenDesign importe design-html desde su enlace de SKILL.md: Plugins → Add → Skill → Import from link, luego selecciónelo en la barra superior.

Descargar OpenDesign Leer la guía de inicio rápido

05 Código abierto, rastreable

Fuente, Licencia y Verificación

De dónde provienen los datos de esta página y cuándo se verificaron por última vez.

Author: Garry Tan
Repository: github.com/garrytan/gstack Rama main
Archivo de skill: design-html/SKILL.md Checksum de contenido registrado en la verificación; commit 71f6048
License: MIT De LICENSE.
Estrellas del repositorio: 132.921 Instantánea de GitHub tomada el 2026-09-14 para todo el repositorio garrytan/gstack, que contiene 7 skills en este catálogo. No es una calificación o conteo de uso para design-html.
Verificado por OpenDesign: 14/09/2026 Se verificaron el archivo fuente, la ruta, el texto de licencia y el recuento de estrellas. No incluido en OpenDesign principal (verificado el 28/08/2026); no se ha registrado una ejecución en vivo en esta página.

Dentro del SKILL.md

Cuándo invocar este skillFunciona con maquetas aprobadas, planes de CEO, contexto de revisión de diseño, o descripciones del usuario para HTML/CSS de producción
Preámbulo (ejecutar primero)Ejecuta gstack-skill-start, lee las líneas STATUS, gestiona el modo degradado, sigue los bloques GSTACK_INSTRUCTION para incorporación/consentimiento
Operaciones seguras en modo planOperaciones permitidas en modo plan: codex exec/review, escrituras en ~/.gstack/, archivo de plan, apertura de artefactos
Invocación de skill durante el modo planLas instrucciones del skill son ejecutables, no de referencia; AskUserQuestion satisface el fin de turno; ExitPlanMode solo después de completar el workflow
Formato de AskUserQuestionLa resolución de la herramienta se ramifica según SESSION_KIND; el modo generado elige automáticamente lo recomendado; Conductor usa prosa; manejo de fallback en caso de fallo
Sincronización de artefactos (inicio del skill)Actúa sobre la salida de skill-start: pista de GBrain, salud de ARTIFACTS_SYNC, puerta de consentimiento de privacidad de una sola vez mediante GSTACK_INSTRUCTION
Parche de comportamiento específico del modelo (claude)Disciplina de lista de tareas, pensar antes de acciones importantes, herramientas dedicadas sobre Bash—preferencias subordinadas a las instrucciones del skill
VozVoz de GStack: comience con la idea principal, detalles concretos, vincule las decisiones con los resultados del usuario, sea directo sobre la calidad, cierres acotados
Recuperación de contextoRecupera artefactos recientes, revisiones, cronología, decisiones, último checkpoint; sugiere el siguiente skill si RECENT_PATTERN implica uno
Estilo de escrituraExplica la jerga seleccionada en su primer uso, formula las preguntas en términos de resultados, frases cortas en voz activa, omitir si EXPLAIN_LEVEL: terse
Principio de completitud — Boil the OceanLa IA hace que la completitud sea económica; recomiende cobertura completa; Completitud: X/10 cuando las opciones difieren en cobertura
Protocolo de confusiónAnte ambigüedad de alto riesgo DETÉNGASE, nómbrela, presente 2-3 opciones con sus concesiones, pregunte—no para codificación rutinaria

La descripción propia del Skill

Finalización del diseño: genera HTML/CSS de calidad de producción nativo de Pretext. (gstack)

Descripción preliminar de SKILL.md. El archivo completo tiene aproximadamente 54.976 caracteres. Lee el archivo completo en GitHub.

06 Antes de instalar

Preguntas sobre el skill design-html

Las respuestas provienen del SKILL.md tal como se leyó el 2026-09-14, no de una ejecución registrada.

¿Funciona con mi proyecto React/Svelte/Vue o solo con HTML puro?

Ambos. El paso 2.5 detecta su framework en package.json y le pregunta si desea HTML puro (archivo de vista previa autocontenido, recomendado para la primera pasada) o un componente nativo del framework con hooks Pretext. Si no se detecta ningún framework, se usa HTML puro por defecto. Para la salida de framework, usted elige TypeScript o JavaScript.

Design HTML

Ejecuta design-html en una tarea de diseño de interfaz real.

Descarga OpenDesign, importa design-html desde su enlace SKILL.md, pega el prompt de arriba y lee el plan antes del resultado.

Descargar OpenDesign Ver todas las skills