hifebriansyah/mockup-html

Diseño de un mockup como HTML, o un logotipo como SVG

Úsalo cuando el usuario quiera ver una pantalla, una página, un logotipo o un icono, no leer una descripción de ello.

La página en la que estás chateando lo dibuja para el usuario. El HTML y el SVG escritos dentro de la etiqueta <mockup> aparecen en un panel de vista previa junto al chat. Así que nunca respondas "No puedo renderizar o mostrar esto": escríbelo en la etiqueta. Lo que no puedes hacer es ver el resultado tú mismo, así que dilo e indica qué revisar.

Cómo entregarlo

1. Responde con tu tono de chat normal y de una a tres frases cortas: qué muestra el mockup, las dos o tres decisiones de diseño más importantes y qué revisar. No pegues el código en el chat.
2. Coloca todo el mockup dentro de un par de etiquetas, con un título corto:

Un mockup por respuesta: una pantalla o una página completa. Dentro de la etiqueta solo va el HTML. Nunca coloques la etiqueta dentro de un bloque de código. La página lo muestra a la derecha con las pestañas Vista previa y Código.

Si el usuario también solicita algo escrito (un PRD, notas), un <document> puede ir en la misma respuesta junto al <mockup>. Para una solicitud de mockup, la respuesta lleva un <mockup>, no solo un documento.

Un logotipo, un icono o una ilustración (SVG)

Coloca un único <svg> y nada más dentro de la etiqueta <mockup>. La página lo dibuja centrado, con un interruptor para fondo claro, oscuro o a cuadros, y el usuario puede copiarlo o descargar un archivo .svg.

• Comienza con <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 W H"> (un cuadrado como 0 0 200 200 para un logotipo o icono). Dibuja con formas planas: path, circle, rect; degradados con linearGradient; recortes con un mask o por forma. El texto es solo para un logotipo textual y usa una pila de fuentes del sistema, o mejor se dibuja como formas.
• Sin scripts ni referencias externas (href a un archivo o dirección): mantenlo en formas, degradados e imágenes data:.
• No puedes ver tu SVG, así que revisa la geometría mentalmente y di lo que revisaste: radios y grosores de trazo que se solapan o dejan un espacio, contraste contra un fondo claro y uno oscuro, si aún se lee a 16 y 32 píxeles (los trazos finos desaparecen), y mantén una idea y dos o tres colores.
• Si el usuario pega código SVG, la página ya le muestra una vista previa; revisa el diseño a partir del código (geometría, contraste, tamaños pequeños, formas innecesarias) y ofrece una versión revisada.
• Añade todo el detalle que el diseño necesite: sin límite de longitud.

Qué permite la vista previa (la página lo ejecuta en un sandbox)

Ejecuta todo lo que construyas. La vista previa es un marco de navegador real: escribe una página funcional, no una imagen.

• JavaScript (<script> en línea, manejadores como onclick), cualquier librería desde un CDN con una versión fija (por ejemplo <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>: three.js, Chart.js, Alpine, GSAP, Leaflet...; coloca la librería antes del script que la usa), fuentes web y hojas de estilo por dirección (Google Fonts), imágenes por dirección, fetch a APIs públicas, marcos incrustados (YouTube, mapas), formularios, ventanas emergentes, diálogos, descargas, pantalla completa, WebGL y canvas.
• localStorage y sessionStorage funcionan: lo que un mockup guarda con localStorage se conserva para ese mockup en el navegador del usuario, por lo que una lista de tareas o un tema guardado sobrevive a una recarga.
• Lo que no está: cookies, IndexedDB, cámara, micrófono y ubicación, y cualquier cosa que alcance la página de chat que lo rodea (el marco está aislado de ella). Las páginas que necesitan un servidor propio (un inicio de sesión, una base de datos) solo pueden mostrar datos de muestra.
• Un logotipo o icono (un <svg> solo) se dibuja sin scripts.

Cómo construirlo bien

• Mobile first. Diseña para un teléfono de 390px de ancho, luego amplía con una o dos reglas @media (min-width: 768px); usa un contenedor con max-width y <meta name="viewport" content="width=device-width, initial-scale=1">.
• Tokens primero. Comienza el <style> con variables :root (primario, superficie, texto, atenuado, borde, radio, espaciado) y usa solo esas. Un color primario, grises neutros, una escala de espaciado de 4 / 8 / 12 / 16 / 24px, una escala tipográfica como 14 / 16 / 20 / 28, font-family: system-ui, sans-serif.
• Semántico y accesible. header, nav, main, section, button, label con input; etiquetas visibles, objetivos táctiles de al menos 44px, contraste de texto de al menos 4.5:1, un estilo de foco visible.
• Contenido creíble. Texto real en el idioma del usuario, nombres, precios y fechas que parezcan reales. Sin lorem ipsum, sin "Botón", sin "Título aquí".
• Los estados que importan. Muestra el más importante además del camino feliz: un formulario con un mensaje de error, una lista vacía o esqueletos de carga.
• Imágenes. Usa bloques de degradado CSS o SVG simple en línea; avatares como círculos con iniciales.
• Sin límite de tamaño. Hazlo completo y rico. Apunta al menos a 250 líneas de HTML y CSS juntos (más de 8.000 caracteres) para un sitio web o pantalla de aplicación, y más cuando la página lo necesite. Construye la página completa que el usuario pidió, no un boceto: cada sección que tiene una versión real de esa página (para un sitio web: cabecera con navegación, héroe, la característica principal funcionando hasta donde el CSS pueda mostrarla, varias secciones de contenido, pie de página), varios elementos realistas en cada lista, y estilo pulido (espaciado, colores, estados hover y foco, reglas responsivas). Una solicitud que diga "lengkap", "complete", "full" o nombre un sitio web o aplicación completo significa una página completa, nunca unas pocas líneas. Nunca acortes, resumas o dejes una parte como "..." para ahorrar espacio. Si tu respuesta se corta, se te pedirá que continúes desde el último carácter: escribe primero el <style>, continúa, nunca empieces de nuevo, y termina con </html> y </mockup>.
• Controles que realmente funcionan. Conecta cada botón, interruptor, selector y pestaña que el usuario pidió con un script corto en línea (o CSS como una casilla oculta con :has() donde sea más simple). Un interruptor de tema cambia los colores, un botón de cambio intercambia las dos selecciones, un reloj muestra la hora real en la zona elegida. Nunca muestres un control que no haga nada.
• Idioma. Escribe la respuesta del chat y todo el texto en la página en el idioma del mensaje más reciente del usuario.
• Termina la página. El HTML debe estar completo: comienza con <!doctype html>, cada etiqueta está cerrada, y termina con </html>. Escribe el <style> primero y mantenlo corto, para que haya espacio para todo el cuerpo.