Generador de Documentos de Entrega de Diseño AI-First

INSTRUCCIONES PARA EL AGENTE DE IMPLEMENTACIÓN DE IA: 1. Lea este documento completo antes de escribir cualquier código. 2. Implemente en el orden especificado en la SECCIÓN 1 (Mapa de Implementación). 3. Consulte CLAUDE.md para los valores de tokens. Si un token referenciado aquí no está en CLAUDE.md, márquelo y use el valor de respaldo proporcionado. 4. Cada valor en este documento es intencional. No sustituya con valores "aproximados". `gap-6` significa `gap-6`, no `gap-5`. 5. Cada estado debe ser implementado. Si un estado no está especificado para un componente, eso es una brecha en la especificación - márquelo, no adivine. 6. Después de implementar cada componente, revise su matriz de estados y verifique que todos los estados funcionen antes de pasar al siguiente componente. 7. Cuando encuentre ambigüedad, prefiera la interpretación más explícita. Si sigue siendo ambiguo, agregue un comentario TODO: "// HANDOFF-AMBIGUITY: [descripción]" --- ### SECCIÓN 1: MAPA DE IMPLEMENTACIÓN Tabla priorizada de todo lo que se debe construir. Los agentes de IA deben implementar en este orden para resolver dependencias correctamente. | Orden | Componente/Sección | Ruta de Archivo | Dependencias | Complejidad | Notas | |-------|-------------------|-----------------|--------------|-------------|-------| | 1 | Configuración de tokens de diseño | `tailwind.config.ts` | Ninguna | Baja | Debe ser primero - todos los demás componentes referencian estos | | 2 | Componentes de tipografía | `src/components/ui/Text.tsx` | Tokens | Baja | Variantes Heading, Body, Caption, Label | | 3 | Botón | `src/components/ui/Button.tsx` | Tokens, Tipografía | Media | 3 variantes × 3 tamaños × 6 estados | | ... | ... | ... | ... | ... | ... | Reglas: - Nada puede referenciar un componente que aparezca más adelante en la tabla - Complejidad = cuántas variantes × estados tiene el componente - Notas = cualquier cosa no obvia sobre la implementación ### SECCIÓN 2: ESPECIFICACIONES GLOBALES Estas aplican en todas partes. El agente de IA debe configurar esto ANTES de construir cualquier componente. #### 2.1 Puntos de interrupción Defina límites de comportamiento exactos: ``` BREAKPOINTS { mobile: 0px - 767px tablet: 768px - 1023px desktop: 1024px - 1279px wide: 1280px - ∞ } ``` Para cada punto de interrupción, indique: Ancho máximo del contenedor y padding, Tamaño de fuente base, Multiplicador de espaciado global (si cambia), Modo de navegación (hamburguesa / horizontal / etc.) #### 2.2 Valores predeterminados de transición ``` TRANSITIONS { default: duration-200 ease-out slow: duration-300 ease-in-out spring: duration-500 cubic-bezier(0.34, 1.56, 0.64, 1) none: duration-0 } REGLA: Cada elemento interactivo usa `default` a menos que este documento especifique lo contrario. REGLA: Las transiciones aplican a: background-color, color, border-color, opacity, transform, box-shadow. Nunca a: width, height, padding, margin (estos causan recálculo de layout). ``` #### 2.3 Escala de Z-Index ``` Z-INDEX { base: 0 dropdown: 10 sticky: 20 overlay: 30 modal: 40 toast: 50 tooltip: 60 } REGLA: Ningún valor de z-index fuera de esta escala. Nunca. ``` #### 2.4 Estilo de enfoque ``` FOCUS { style: ring-2 ring-offset-2 ring-brand-500 aplica-a: cada elemento interactivo (botones, enlaces, inputs, selects, checkboxes) visible: solo en navegación por teclado (use focus-visible, no focus) } ``` ### SECCIÓN 3: ESPECIFICACIONES DE PÁGINA Para cada página, proporcione una especificación de implementación completa. #### Página: ${page_name} **Ruta:** `/exact-route-path` **Layout:** ${which_layout_wrapper_to_use} **Requisitos de datos:** [qué datos necesita esta página, de dónde] ##### Estructura de página (de arriba a abajo) ``` ESTRUCTURA DE PÁGINA: ${page_name} ├── Sección: Hero │ ├── Componente: Heading (h1) │ ├── Componente: Subheading (p) │ ├── Componente: Botón CTA (primary, lg) │ └── Componente: HeroImage ├── Sección: Características │ ├── Componente: SectionHeading (h2) │ └── Componente: FeatureCard × 3 (grid) ├── Sección: Testimonios │ └── Componente: TestimonialSlider └── Sección: CTA ├── Componente: Heading (h2) └── Componente: Botón CTA (primary, lg) ``` ##### Especificaciones sección por sección Para cada sección: **${section_name}** ``` LAYOUT { container: max-w-[1280px] mx-auto px-6 (mobile: px-4) direction: flex-col (mobile) → flex-row (desktop) gap: gap-8 (32px) padding: py-16 (64px) (mobile: py-10) background: bg-white } CONTENIDO { heading { text: "${exact_heading_text_or_content_source}" element: h2 class: text-3xl font-bold text-gray-900 (mobile: text-2xl) max-width: max-w-[640px] } body { text: "${exact_body_text_or_content_source}" class: text-lg text-gray-600 leading-relaxed (mobile: text-base) max-width: max-w-[540px] } } GRID (si aplica) { columns: grid-cols-3 (tablet: grid-cols-2) (mobile: grid-cols-1) gap: gap-6 (24px) items: ${what_component_renders_in_each_cell} alignment: items-start } ANIMACIÓN (si aplica) { type: fade-up al hacer scroll trigger: cuando la sección entra en el viewport (umbral: 0.2) stagger: cada hijo se retrasa 100ms después del anterior duration: duration-500 easing: ease-out runs: una vez (no re-disparar al hacer scroll hacia arriba) } ``` ### SECCIÓN 4: ESPECIFICACIONES DE COMPONENTES Para cada componente, proporcione un contrato de implementación completo. #### Componente: ${componentname} **Archivo:** `src/components/${path}/${componentname}.tsx` **Propósito:** [una oración - qué hace este componente] ##### Interfaz de Props ```typescript interface ${componentname}Props { variant: 'primary' | 'secondary' | 'ghost' // estilo visual size: 'sm' | 'md' | 'lg' // dimensiones disabled?: boolean // predeterminado: false loading?: boolean // predeterminado: false icon?: React.ReactNode // icono opcional al inicio children: React.ReactNode // contenido de la etiqueta onClick?: () => void // manejador de clic } ``` ##### Matriz Variante × Tamaño Defina valores exactos para cada combinación: ``` VARIANTE: primary TAMAÑO: sm height: h-8 (32px) padding: px-3 (12px) font: text-sm font-medium (14px) background: bg-brand-500 (#2563EB) text: text-white (#FFFFFF) border: none border-radius: rounded-md (6px) shadow: none TAMAÑO: md height: h-10 (40px) padding: px-4 (16px) font: text-sm font-medium (14px) background: bg-brand-500 (#2563EB) text: text-white (#FFFFFF) border: none border-radius: rounded-lg (8px) shadow: shadow-sm TAMAÑO: lg height: h-12 (48px) padding: px-6 (24px) font: text-base font-semibold (16px) background: bg-brand-500 (#2563EB) text: text-white (#FFFFFF) border: none border-radius: rounded-lg (8px) shadow: shadow-sm VARIANTE: secondary [misma estructura, valores diferentes] VARIANTE: ghost [misma estructura, valores diferentes] ``` ##### Especificaciones de estado Cada estado debe definirse para cada variante: ``` ESTADOS (aplican a TODAS las variantes a menos que se anulen): hover { background: ${token} - oscurecer un paso desde el predeterminado transform: none (sin escala/traslación en hover) shadow: ${token_o_none} cursor: pointer transition: default (duration-200 ease-out) } active { background: ${token} - oscurecer dos pasos desde el predeterminado transform: scale-[0.98] transition: duration-75 } focus-visible { ring: ring-2 ring-offset-2 ring-brand-500 todo lo demás: igual que el estado predeterminado } disabled { opacity: opacity-50 cursor: not-allowed pointer-events: none TODOS los estados hover/active/focus: no aplican } loading { content: reemplazar children con spinner (16px, animate-spin) width: mantener el mismo ancho que el estado sin loading (prevenir cambio de layout) pointer-events: none opacity: opacity-80 } ``` ##### Comportamiento del icono ``` REGLAS DE ICONO {