# Creador de maquetas HTML > Genera 2-3 variantes de maquetas HTML interactivas para comparar direcciones de diseño UI/UX antes de comprometerse con un solo enfoque. Explora rápidamente diferentes posturas visuales y recopila comentarios. - Canonical: https://nanoskill.ai/es/skills/html-mockup-sketcher - Markdown: https://nanoskill.ai/es/skills/html-mockup-sketcher.md - Author: NousResearch - Published: 2026-06-04T05:30:00.000Z - Updated: 2026-07-21T18:34:02.819Z - Language: es - Source type: github - Popularity signal: 2137 ## Sources - https://github.com/NousResearch/hermes-agent ## Install ```shell npx skills add https://github.com/NousResearch/hermes-agent/tree/main/skills/creative/sketch ``` ## About El Creador de maquetas HTML es una habilidad poderosa diseñada para ayudar a los usuarios a explorar y comparar rápidamente direcciones de diseño UI/UX mediante maquetas HTML desechables. En lugar de comprometerse con un solo diseño, esta herramienta genera 2-3 variantes interactivas, permitiendo una comparación lado a lado de diferentes posturas visuales. Es ideal para la exploración de diseño en etapas tempranas, ayudándote a visualizar conceptos y recopilar comentarios antes de una inversión significativa en desarrollo. Esta habilidad se enfoca en crear maquetas HTML funcionales e interactivas que van más allá de las imágenes estáticas. Cada variante es un archivo HTML autónomo que incluye CSS en línea, fuentes del sistema y contenido realista. Fundamentalmente, las maquetas incluyen interactividad básica como enlaces clicables, estados de hover y al menos una transición de estado, brindando una sensación más tangible de la experiencia del usuario. Las herramientas de navegador integradas permiten la verificación visual, asegurando que las maquetas estén limpias y libres de errores. Para facilitar la toma de decisiones informada, el Creador de maquetas HTML proporciona una comparación estructurada. Cada variante viene con un \`README.md\` detallado que describe sus principios de diseño, elecciones clave, compensaciones y casos de uso ideales. Después de la generación, una tabla comparativa resume las diferencias en varias dimensiones de diseño, acompañada de un análisis con opinión para ayudarte a seleccionar un ganador, combinar elementos o iterar más. ## Key features - **Generar múltiples variantes de diseño**: Produce de 2 a 3 variantes de mockup HTML distintas simultáneamente, cada una explorando una postura de diseño diferente (por ejemplo, densidad, énfasis, estética, diseño) para una comparación lado a lado. - **Mockups HTML interactivos**: Crea archivos HTML autónomos con CSS en línea, fuentes del sistema y contenido falso realista. Los mockups son interactivos, permitiendo enlaces clicables, efectos hover y al menos una transición de estado. - **Verificación visual con herramientas del navegador**: Utiliza navegación integrada del navegador y herramientas de visión para inspeccionar y verificar visualmente cada mockup HTML, asegurando que los diseños estén limpios, sean legibles y estén libres de errores antes de la presentación. - **Documentación estructurada de variantes**: Cada variante de mockup HTML incluye un \`README.md\` que detalla su postura de diseño, elecciones clave (diseño, tipografía, color, interacción), compensaciones y casos de uso ideales para facilitar una comparación informada. - **Tabla de análisis comparativo**: Presenta todas las variantes de mockup HTML generadas en una tabla comparativa, resaltando diferencias en dimensiones clave como densidad, visibilidad de la acción principal, facilidad de escaneo y sensación general, junto con un resumen con opiniones. ## Use cases - **Explorar direcciones de diseño UI/UX**: Genera y compara rápidamente múltiples variantes de mockups HTML para explorar diferentes ideas de diseño de interfaz de usuario y experiencia de usuario antes de invertir un tiempo de desarrollo significativo. - **Recopilar comentarios sobre conceptos visuales**: Presenta mockups HTML interactivos a las partes interesadas o usuarios para recopilar comentarios tempranos sobre varias direcciones visuales, ayudando a refinar conceptos y tomar decisiones de diseño informadas. - **Prototipado rápido para nuevas funciones**: Crea mockups HTML desechables para prototipar rápidamente nuevas funciones o pantallas, enfocándose en la funcionalidad principal y el flujo visual en lugar de código listo para producción. ## Result preview Vea HTMLs reales sobre sitios web de hoteles boutique generados por esta habilidad del agente. ![the demo of HTML mockup Agent Skill](https://file.nanoskill.ai/HTML-mockup-demo-1.jpg) ![the demo of HTML mockup Agent Skill](https://file.nanoskill.ai/HTML-mockup-demo-2.jpg) ![the demo of HTML mockup Agent Skill](https://file.nanoskill.ai/HTML-mockup-demo-3.jpg) ![the demo of HTML mockup Agent Skill](https://file.nanoskill.ai/HTML-mockup-demo-4.jpg) ## Result walkthrough ### Paso 1：Instalar Agrega la habilidad a tu agente. ![a simple demonstration of the first step in using HTML mockup](https://file.nanoskill.ai/HTML-mockup-step-1.jpg) ### Paso 2：Describe tu sitio web Explica la información detallada (por ejemplo, estilo, tipo) del sitio web que deseas crear. ![a simple demonstration of the second step in using HTML mockup](https://file.nanoskill.ai/HTML-mockup-step-2.jpg) ### Paso 3：Revisar resultado Revisa y compara las maquetas HTML generadas. ![a simple demonstration of the third step in using HTML mockup](https://file.nanoskill.ai/HTML-mockup-step-3.jpg) ## Skill definition # Boceto Utiliza esta habilidad cuando el usuario quiera **ver una dirección de diseño antes de comprometerse** con una — explorando una idea de UI/UX como maquetas HTML desechables. El objetivo es generar 2-3 variantes interactivas para que el usuario pueda comparar direcciones visuales lado a lado, no producir código listo para producción. Carga esta habilidad cuando el usuario diga cosas como "bocetear esta pantalla", "muéstrame cómo podría verse X", "compara el layout A vs B", "dame 2-3 enfoques de esta UI", "déjame ver algunas variantes", "maqueta esto antes de que lo construya". ## Cuándo NO usar esto - El usuario quiere un componente de producción — usa `claude-design` o constrúyelo correctamente - El usuario quiere un artefacto HTML pulido de un solo uso (página de aterrizaje, presentación) — `claude-design` - El usuario quiere un diagrama — `excalidraw`, `architecture-diagram` - El diseño ya está decidido — simplemente constrúyelo ## Si el usuario tiene instalado el sistema GSD completo Si `gsd-sketch` aparece como una habilidad hermana (instalada mediante `npx get-shit-done-cc --hermes`), prefiere **`gsd-sketch`** para el flujo de trabajo completo: `.planning/sketches/` persistente con MANIFEST, análisis en modo frontera, auditorías de consistencia entre bocetos previos, e integración con el resto de GSD. Esta habilidad es la versión ligera independiente — bocetos de un solo uso sin la maquinaria de estado. ## Método principal ``` intake → variants → head-to-head → pick winner (or iterate) ``` ### 1. Entrada (omítelo si el usuario ya te ha dado suficiente) Antes de generar variantes, obtén tres cosas — una pregunta a la vez, no todas a la vez: 1. **Sensación.** "¿Qué sensación debería transmitir? Adjetivos, emociones, una vibración." — *"tranquilo, editorial, como Lineal"* te dice más que *"minimalista"*. 2. **Referencias.** "¿Qué aplicaciones, sitios o productos capturan la sensación que estás imaginando?" — las referencias reales superan las descripciones abstractas. 3. **Acción principal.** "¿Cuál es la cosa más importante que un usuario hace en esta pantalla?" — las variantes deberían servir a esto bien; si no lo hacen, son solo decoración. Reflexiona brevemente sobre cada respuesta antes de la siguiente pregunta. Si el usuario ya te ha dado las tres por adelantado, salta directamente a las variantes. ### 2. Variantes (2-3, nunca 1, raramente 4 o más) Produce **2-3 variantes** de una sola vez. Cada variante es un archivo HTML completo e independiente. No describas las variantes — constrúyelas. El punto es la comparación. Cada variante debe adoptar una **postura de diseño diferente**, no diferentes valores de píxeles. Tres buenos ejes de variación: - **Densidad:** compacto / aireado / ultra-denso (elige dos polos contrastantes) - **Énfasis:** contenido primero / acción primero / herramienta primero - **Estética:** editorial / utilitario / lúdico - **Layout:** columna única / barra lateral / panel dividido - **Base:** basado en tarjetas / contenido desnudo / estilo documento Elige un eje y separa a partir de él. Dos variantes que difieren solo en el color de acento son un esfuerzo desperdiciado — el usuario no puede distinguirlas. **Nombrado de variantes:** describe la postura, no el número. ``` sketches/ ├── 001-calm-editorial/ │ ├── index.html │ └── README.md ├── 001-utilitarian-dense/ │ ├── index.html │ └── README.md └── 001-playful-split/ ├── index.html └── README.md ``` ### 3. Hazlos HTML reales Cada variante es un **único archivo HTML autocontenido**: - ` ``` ### 4. README de la variante El `README.md` de cada variante responde: ```markdown ## Variant: {stance name} ### Design stance One sentence on the principle driving this variant. ### Key choices - Layout: ... - Typography: ... - Color: ... - Interaction: ... ### Trade-offs - Strong at: ... - Weak at: ... ### Best for - The kind of user or use case this variant actually serves ``` ### 5. Comparación directa Después de que todas las variantes estén construidas, preséntalas como una comparación. No solo las enumeres — **opina**: ```markdown ## Three takes on the home screen | Dimension | Calm editorial | Utilitarian dense | Playful split | |-----------|----------------|-------------------|---------------| | Density | Low | High | Medium | | Primary action visibility | Low | High | Medium | | Scan-ability | High | Medium | Low | | Feel | Calm, trusted | Sharp, tool-like | Inviting, energetic | **My take:** Utilitarian dense for power users, calm editorial for content-forward audiences. Playful split is weakest — tries to do both and commits to neither. ``` Deja que el usuario elija un ganador, o combine dos en un híbrido, o pida otra ronda. ## Tematización (cuando el proyecto tiene una identidad visual) Si el usuario tiene un tema existente (colores, fuentes, tokens), pon los tokens compartidos en `sketches/themes/tokens.css` e impórtalos con `@import` en cada variante. Mantén los tokens mínimos: ```css /* sketches/themes/tokens.css */ :root { --color-bg: #fafafa; --color-fg: #1a1a1a; --color-accent: #0066ff; --color-muted: #666; --radius: 8px; --font-display: "Inter", sans-serif; --font-body: -apple-system, BlinkMacSystemFont, sans-serif; } ``` No sobre-tokenices un boceto desechable — tres colores y una fuente suelen ser suficientes. ## Barra de interactividad Un boceto es suficientemente interactivo cuando el usuario puede: 1. **Hacer clic en una acción principal** y que ocurra algo visible (cambio de estado, modal, notificación, amago de navegación) 2. **Ver una transición de estado significativa** (filtrar una lista, alternar un modo, abrir/cerrar un panel) 3. **Pasar el ratón sobre elementos reconocibles** (botones, filas, pestañas) Más que eso es sobre-ingeniería para algo desechable. Menos que eso es una captura de pantalla. ## Modo frontera (decidiendo qué bocetar a continuación) Si ya existen bocetos y el usuario dice "¿qué debería bocetar a continuación?": - **Brechas de consistencia** — dos variantes ganadoras de diferentes bocetos tomaron decisiones independientes que aún no se han compuesto juntas - **Pantallas no bocetadas** — referenciadas pero nunca exploradas - **Cobertura de estados** — camino feliz bocetado, pero no vacío / carga / error / 1000 elementos - **Brechas responsive** — validado en un viewport; ¿se mantiene en móvil / ultra ancho? - **Patrones de interacción** — existen layouts estáticos; las transiciones, el arrastre, el comportamiento del scroll no Propón 2-4 candidatos con nombre. Deja que el usuario elija. ## Salida - Crea `sketches/` (o `.planning/sketches/` si el usuario está usando convenciones GSD) en la raíz del repositorio - Un subdirectorio por variante: `NNN-nombre-postura/index.html` + `README.md` - Dile al usuario cómo abrirlos: `open sketches/001-calm-editorial/index.html` en macOS, `xdg-open` en Linux, `start` en Windows - Mantén las variantes desechables — un boceto que sentiste la necesidad de preservar debería promocionarse a código real del proyecto, no conservarse como un activo **Secuencia de herramientas típica para una variante:** ``` terminal("mkdir -p sketches/001-calm-editorial") write_file("sketches/001-calm-editorial/index.html", "...") write_file("sketches/001-calm-editorial/README.md", "## Variant: Calm editorial\n...") browser_navigate(url="file://$(pwd)/sketches/001-calm-editorial/index.html") browser_vision(question="How does this look? Any obvious layout issues?") ``` Repite para cada variante, luego presenta la tabla de comparación. ## Atribución Adaptado del flujo de trabajo `/gsd-sketch` del proyecto GSD (Haz la Mierda) — MIT © 2025 Lex Christopherson ([gsd-build/get-shit-done](https://github.com/gsd-build/get-shit-done)). El sistema GSD completo incluye estado persistente de bocetos, patrones de referencia de temas/variantes y flujos de trabajo de auditoría de consistencia; instálalo con `npx get-shit-done-cc --hermes --global`. ## FAQ ### ¿Qué es un mockup HTML? Un mockup HTML es una página web interactiva y desechable construida con HTML y estilos básicos (a menudo CSS en línea) para visualizar y comparar rápidamente diferentes ideas de diseño UI/UX. No está destinado a producción, sino a la exploración de diseño en etapas tempranas. ### ¿Cuántas variantes de mockup HTML genera esta habilidad? Esta habilidad normalmente genera de 2 a 3 variantes de mockup HTML interactivos a la vez. El objetivo es proporcionar posturas de diseño contrastantes para la comparación, no una lista exhaustiva de variaciones menores. ### ¿Puedo usar esta habilidad para crear código listo para producción? No, esta habilidad está diseñada específicamente para mockups HTML 'desechables' para explorar direcciones de diseño. Para componentes listos para producción o artefactos pulidos, deberías usar otras herramientas o habilidades como \`claude-design\`. ### ¿Qué tipo de interactividad tienen los mockups HTML? Los mockups HTML generados son interactivos, lo que significa que los enlaces son clicables, los efectos hover son reales y hay al menos una transición de estado (por ejemplo, abrir/cerrar un panel, filtrar una lista). Esto permite una sensación más realista que las imágenes estáticas. ### ¿Cómo me ayuda esta habilidad a comparar diferentes diseños? Después de generar los mockups HTML, la habilidad proporciona una tabla comparativa que resalta las diferencias clave en varias dimensiones de diseño (por ejemplo, densidad, diseño, estética). También ofrece un resumen con opiniones para guiar tu toma de decisiones. ### ¿Qué información necesito proporcionar para generar un mockup HTML? Para generar mockups HTML efectivos, se te preguntará sobre la 'sensación' deseada (adjetivos, ambiente), aplicaciones/sitios de referencia que capturen esa sensación, y la 'acción principal' más importante que un usuario realiza en la pantalla.