Genera el esqueleto visual completo de una página web o aplicación a partir de un PRD y style-guidelines (design tokens). Crea la maquetación con enfoque en performance, accesibilidad, responsive design y estructura semántica, respetando estrictamente los documentos fuente. Usar cuando el usuario pida maquetar, crear el layout, hacer el esqueleto visual, crear la estructura HTML, o diseñar la interfaz de una app o página web a partir de documentos de requisitos.
Genera esqueletos visuales completos desde PRD + style-guidelines, con foco en performance, accesibilidad y responsive.
Antes de generar cualquier archivo, solicita ambos documentos si no fueron proporcionados:
Si falta alguno, detén el flujo y pide lo que falta con un mensaje claro:
"Para continuar necesito [el PRD / las style-guidelines con design tokens]. Sin este documento no puedo generar la maquetación correctamente."
Sigue estos pasos en orden:
Lee ambos documentos y extrae literalmente:
Si detectas información crítica faltante (ej. breakpoints no definidos, colores no especificados), detén y solicita.
Basado estrictamente en el PRD, elige el patrón (ver reference.md):
| Tipo de app (según PRD) | Patrón |
|---|---|
| Dashboard / Admin panel | Sidebar fijo + Main scrollable |
| Chat / Asistente conversacional | Split Pane (sidebar + área de chat) |
| Generador de contenido AI | Split Editor (input | output) |
| Landing page / Marketing | Hero + Secciones verticales |
| Documentación / Blog | Holy Grail (header + content + sidebar + footer) |
| Catálogo / E-commerce | Card Grid + Filtros |
| App móvil / PWA | Bottom Nav + Pantallas apiladas |
| Análisis de documentos | Document Viewer + AI Panel |
Genera la estructura de carpetas usando únicamente lo especificado en el PRD y style-guidelines. Si no se indica tecnología/framework, usa HTML + CSS nativo con los tokens como variables CSS.
Estructura base mínima:
proyecto/
├── index.html # (o la página principal del PRD)
├── styles/
│ └── tokens.css # Variables CSS de los design tokens
├── [pagina-2].html # Una por cada vista del PRD
└── README.md # Documentación generada
Si el PRD especifica framework (React, Vue, etc.), adapta la estructura sin inventar convenciones no explícitas.
Para cada página/vista del PRD:
Usa HTML semántico estrictamente:
<header> para cabeceras<nav> para navegación<main> para contenido principal<aside> para sidebars<section> para secciones con significado propio<article> para contenido independiente<footer> para pies de páginaAplica design tokens como variables CSS (var(--color-primary), etc.) — nunca valores hardcodeados que no vengan de style-guidelines.
Incluye todos los estados que aparezcan en el PRD: vacío, cargando (skeleton), con datos, error, sin conexión.
Añade placeholders comentados donde irá el contenido dinámico:
<!-- [COMPONENTE: Tabla de usuarios — ver PRD sección 3.2] -->
Aplica estas técnicas sin necesitar librerías adicionales:
loading="lazy" en todas las imágenes no críticas.<link rel="preload"> para fuentes críticas definidas en style-guidelines.<head> para above-the-fold; resto en <link> diferido.font-display: swap en @font-face para fuentes del proyecto.will-change: transform solo en elementos animados especificados en style-guidelines.<picture> + srcset para imágenes responsivas si el PRD las menciona.Aplica en todo el esqueleto:
lang="[idioma del PRD]" en <html>.aria-label descriptivos en todos los botones sin texto visible.aria-live="polite" en contenedores de respuestas dinámicas (chat, resultados AI, notificaciones).aria-busy="true" durante estados de carga.role="alert" en mensajes de error.alt descriptivo en todas las imágenes (o alt="" si son decorativas).tabindex para navegación por teclado.outline no removido sin alternativa).Usa únicamente los breakpoints definidos en style-guidelines. Si no están definidos, usa los de Tailwind CSS como fallback y documéntalo.
Patrón Mobile First obligatorio:
Para cada sección del PRD, define el comportamiento en cada breakpoint:
Genera un README.md en el proyecto con:
styles/tokens.css; las páginas los consumen vía var().