IA para crear webs / apps en minutos

[*]# ═══════════════════════════════════════════════════════════
# WEBSITE SPECIFICATION
# ═══════════════════════════════════════════════════════════

## PURPOSE
Proyecto: **[Landing page / E-commerce / Portfolio / SaaS / Corporativa]**
Cliente/Negocio: **[Nombre o tipo de negocio]**
Audiencia objetivo: **[Ej: profesionales 30-50 años, startups B2B, consumidores jóvenes...]**
Objetivo de negocio: **[Ej: generar leads, vender productos, mostrar portfolio, captar suscriptores]**
CTA principal: **[Ej: "Comprar ahora" / "Reservar cita" / "Solicitar presupuesto" / "Ver catálogo"]**

## SUCCESS CRITERIA
- KPI principal: **[Ej: conversiones de compra, formularios completados, reservas]**
- KPIs secundarios: **[Ej: tiempo en página >2min, tasa de rebote <40%, clicks en CTA]**
- Máximo clics hasta conversión: **[Número]**

## FEATURES (Must-have / MVP)
1. **[Feature]** → [Descripción breve]
2. **[Feature]** → [Descripción breve]
3. **[Feature]** → [Descripción breve]
4. **[Feature]** → [Descripción breve]

Ejemplos comunes:
- Hero section con propuesta de valor + CTA
- Catálogo de productos/servicios con filtros
- Carrito de compra + checkout
- Formulario de contacto con validación
- Sistema de reservas/citas
- Testimonios/reseñas de clientes
- Galería de trabajos/portfolio
- Blog integrado
- Autenticación de usuarios
- Panel de administración

## NICE TO HAVE (Si el tiempo lo permite)
- **[Feature opcional]**
- **[Feature opcional]**

Ejemplos:
- Chat en vivo / WhatsApp widget
- Modo oscuro
- Multiidioma
- Newsletter con lead magnet
- Animaciones de scroll
- Integración con redes sociales

## OUT OF SCOPE (No implementar)
- **[Exclusión explícita]**
- **[Exclusión explícita]**

Ejemplos:
- App móvil nativa
- Pasarela de pago real (solo mockup)
- CRM completo
- Sistema de inventario avanzado
- Integraciones con terceros complejas

## INFORMATION ARCHITECTURE
| Ruta | Página | Propósito |
|------|--------|-----------|
| `/` | Home | [Propósito] |
| `/products` | Catálogo | [Propósito] |
| `/product/:id` | Detalle producto | [Propósito] |
| `/about` | Sobre nosotros | [Propósito] |
| `/contact` | Contacto | [Propósito] |
| `/cart` | Carrito | [Propósito] |
| `/checkout` | Pago | [Propósito] |

## USER FLOW (Flujo principal)
1. Usuario aterriza en → **[Página]**
2. Ve → **[Elemento clave: hero, catálogo, etc.]**
3. Interactúa con → **[CTA / Filtro / Producto]**
4. Navega a → **[Siguiente paso]**
5. Completa → **[Acción final: compra, formulario, reserva]**
6. Recibe → **[Confirmación / Siguiente paso]**

## DATA MODEL

campo1: tipo,
campo2: tipo,
campo3: tipo
}
Ejemplo:

Product: { id, name, price, description, image, category, stock }
Order: { id, items[], total, customerInfo, status, createdAt }
Contact: { name, email, phone, message, createdAt }


## UI/UX SPECIFICATION
**Estilo visual:** [Minimalista / Moderno / Brutalist / Corporativo / Luxury / Industrial]
**Mood/Vibe:** [3-4 adjetivos: elegante, limpio, premium, cálido, profesional...]
**Inspiración:** [1-2 webs de referencia para estructura/estilo]

**Paleta de colores:**
- Primario: [Hex o descripción]
- Secundario: [Hex o descripción]
- Neutros: [Hex o descripción]
- Acentos: [Hex o descripción]

**Tipografía:**
- Headings: [Familia tipográfica]
- Body: [Familia tipográfica]

**Componentes:**
- Botones: [filled/outline, border-radius, hover states]
- Cards: [sombras, espaciado, bordes]
- Layout: [max-width contenido, grid system, spacing scale]

## CONTENT DIRECTION
**Tono de voz:** [Profesional / Cercano / Técnico / Aspiracional / Directo]
**Idioma:** [es-ES / en-US / otro]

**Mensajes clave:**
- Propuesta de valor: [Frase principal]
- Beneficios: [3-4 puntos]
- Diferenciadores: [Qué lo hace único]

**Copy:** Genera textos realistas y coherentes, nunca lorem ipsum.

## TECHNICAL REQUIREMENTS
**SEO:**
- Title y meta description únicos por página
- Estructura semántica (H1 único por página, jerarquía H2-H6)
- Open Graph tags
- URLs limpias y descriptivas
- Sitemap

**Performance:**
- Imágenes optimizadas (WebP, lazy loading)
- Sin librerías innecesarias
- Core Web Vitals óptimos

**Accesibilidad:**
- Contraste WCAG AA mínimo
- Labels en formularios
- Focus states visibles
- Navegación completa por teclado
- Alt text en imágenes

**Responsive:**
- Mobile-first (360px)
- Tablet (768px)
- Desktop (1280px+)

## CONSTRAINTS
- **Prohibido:** [Sliders automáticos / Pop-ups intrusivos / Animaciones pesadas]
- **Obligatorio:** [Responsive completo / Formularios validados / Estados de carga]

## DELIVERABLES
1. Web completa y funcional según arquitectura definida
2. Todos los flujos de usuario operativos
3. Responsive verificado en todos los breakpoints
4. SEO básico implementado

## WORKING PROTOCOL
Antes de generar código:
1. **Lista todos los supuestos** que estás haciendo
2. **Haz preguntas** si falta información crítica
3. **Propón un plan de ejecución** por fases
4. **Empieza por el MVP** (features must-have)

Durante el desarrollo:
- Cambios incrementales, nunca rehacer desde cero
- Mantener consistencia visual en toda la web
- Código limpio y componentes reutilizables

# ═══════════════════════════════════════════════════════════


[*]

[*]# ═══════════════════════════════════════════════════════════
# WEBSITE SPECIFICATION
# NÓRDICA — Muebles de Diseño Escandinavo
# ═══════════════════════════════════════════════════════════

## PURPOSE
Proyecto: **E-commerce + Catálogo digital**
Cliente/Negocio: **NÓRDICA — Tienda de muebles de diseño escandinavo**
Audiencia objetivo: **Adultos 28-55 años, nivel socioeconómico medio-alto, interesados en interiorismo, diseño y calidad sobre precio. Propietarios de vivienda que buscan piezas duraderas y estéticas.**
Objetivo de negocio: **Vender muebles online y generar solicitudes de presupuesto para proyectos de interiorismo personalizados.**
CTA principal: **"Añadir al carrito" (productos) + "Solicitar proyecto" (servicios)**

## SUCCESS CRITERIA
- KPI principal: **Conversión de compra y solicitudes de presupuesto**
- KPIs secundarios: **Productos añadidos al carrito, tiempo en página de producto >90s, páginas vistas por sesión >4**
- Máximo clics hasta conversión: **4 clics (Home → Categoría → Producto → Carrito → Checkout)**

## FEATURES (Must-have / MVP)
1. **Hero section** → Imagen editorial de alta calidad con propuesta de valor y CTA a catálogo
2. **Catálogo de productos** → Grid filtrable por categoría (sofás, mesas, sillas, almacenaje, iluminación) con ordenación por precio
3. **Página de producto** → Galería de imágenes, especificaciones técnicas, selector de variantes (color/tamaño), botón añadir al carrito
4. **Carrito de compra** → Lista de productos, modificar cantidades, eliminar items, resumen de totales
5. **Checkout simplificado** → Formulario de datos de envío + resumen de pedido + confirmación (sin pasarela real)
6. **Página "Proyectos"** → Portfolio de interiorismo con galería + formulario de solicitud de presupuesto
7. **Formulario de contacto** → Con validación, campos: nombre, email, teléfono, mensaje, tipo de consulta
8. **Footer completo** → Navegación secundaria, newsletter, redes sociales, datos legales

## NICE TO HAVE
- Wishlist / Lista de favoritos
- Comparador de productos (máx 3)
- Estimador de envío por código postal
- Instagram feed integrado

## OUT OF SCOPE
- Pasarela de pago funcional (solo mockup de confirmación)
- Sistema de usuarios/login
- Gestión de inventario en tiempo real
- Chat en vivo
- Blog completo (solo placeholder)
- Multiidioma

## INFORMATION ARCHITECTURE
| Ruta | Página | Propósito |
|------|--------|-----------|
| `/` | Home | Entrada principal, mostrar valor de marca + productos destacados + categorías |
| `/catalogo` | Catálogo | Explorar todos los productos con filtros y ordenación |
| `/catalogo/:categoria` | Categoría | Productos filtrados por categoría específica |
| `/producto/:id` | Detalle producto | Información completa + añadir al carrito |
| `/proyectos` | Proyectos | Portfolio de interiorismo + solicitud de presupuesto |
| `/nosotros` | Sobre nosotros | Historia de marca, valores, filosofía de diseño |
| `/contacto` | Contacto | Formulario + ubicación + horarios |
| `/carrito` | Carrito | Revisión de productos seleccionados |
| `/checkout` | Checkout | Finalizar compra (datos + confirmación) |
| `/legal/privacidad` | Privacidad | Política de privacidad |
| `/legal/terminos` | Términos | Condiciones de compra |

## USER FLOW (Flujo principal - Compra)
1. Usuario aterriza en → **Home**
2. Ve → **Hero con imagen aspiracional + "Descubre la colección"**
3. Navega a → **Catálogo** (clic en CTA o navegación)
4. Filtra por → **Categoría (ej: Sofás)**
5. Selecciona → **Producto específico**
6. En página de producto → **Elige variante + Añadir al carrito**
7. En carrito → **Revisa + Proceder al checkout**
8. Completa → **Formulario de envío**
9. Recibe → **Confirmación de pedido con número de referencia**

## USER FLOW (Flujo secundario - Proyecto)
1. Usuario aterriza en → **Home o Proyectos**
2. Explora → **Portfolio de proyectos realizados**
3. Click en → **"Solicitar presupuesto"**
4. Completa → **Formulario con descripción del proyecto**
5. Recibe → **Confirmación + "Te contactaremos en 24-48h"**

## DATA MODEL
Product: {
id: string,
name: string,
slug: string,
category: "sofas" | "mesas" | "sillas" | "almacenaje" | "iluminacion",
price: number,
description: string,
features: string[],
dimensions: { width, height, depth },
materials: string[],
variants: [{ color, colorHex, image, stock }],
images: string[],
featured: boolean
}

CartItem: {
productId: string,
variantIndex: number,
quantity: number
}

Project: {
id: string,
title: string,
description: string,
images: string[],
location: string,
year: number
}

ContactForm: {
name: string,
email: string,
phone: string,
type: "consulta" | "pedido" | "proyecto" | "otro",
message: string,
createdAt: timestamp
}

ProjectRequest: {
name: string,
email: string,
phone: string,
projectType: "residencial" | "comercial" | "oficina",
budget: "10k-25k" | "25k-50k" | "50k-100k" | "+100k",
description: string,
createdAt: timestamp
}

## UI/UX SPECIFICATION
**Estilo visual:** Minimalista escandinavo con toques de lujo accesible
**Mood/Vibe:** Elegante, sereno, cálido, premium, natural
**Inspiración:**
- Estructura: muuto.com (grid limpio, navegación)
- Estilo: hay.dk (fotografía editorial, espacios blancos)
- E-commerce: menudesignshop.com (product pages)

**Paleta de colores:**
- Primario: `#2C2C2C` (carbón profundo)
- Secundario: `#D4A574` (caramelo/madera)
- Neutros: `#FAFAFA` (blanco roto), `#F5F5F0` (crema), `#E8E4DF` (gris cálido)
- Acento: `#8B9A7D` (verde salvia para CTAs secundarios y éxitos)

**Tipografía:**
- Headings: **Inter** (weights: 300 light para H1, 500 medium para H2-H3)
- Body: **Inter** (weight: 400 regular)

**Componentes:**
- Botones primarios: filled `#2C2C2C`, texto blanco, border-radius 0 (cuadrados), padding 16px 32px, hover: `#D4A574`
- Botones secundarios: outline `#2C2C2C`, border 1px, hover: fill suave
- Cards de producto: sin borde, sombra sutil al hover `0 4px 20px rgba(0,0,0,0.08)`, imagen ratio 4:5
- Layout: max-width 1400px, grid 12 columnas, gap 24px, padding lateral 48px (desktop) / 24px (mobile)
- Espaciado: escala de 8px (8, 16, 24, 32, 48, 64, 96, 128)

## CONTENT DIRECTION
**Tono de voz:** Sofisticado pero accesible. No pretencioso. Descriptivo y sensorial. Inspira calma y confianza.
**Idioma:** es-ES

**Mensajes clave:**
- Propuesta de valor: "Diseño escandinavo que transforma espacios. Piezas atemporales pensadas para durar generaciones."
- Beneficios:
1. Diseño funcional y estético
2. Materiales sostenibles y duraderos
3. Envío e instalación incluidos
4. 10 años de garantía
- Diferenciadores: Selección curada por interioristas, servicio de proyecto integral, piezas exclusivas no disponibles en grandes superficies

**Copy:** Genera textos evocadores y sensoriales. Describe materiales, texturas, sensaciones. Nunca genérico ni lorem ipsum.

## TECHNICAL REQUIREMENTS
**SEO:**
- Title format: "[Producto/Página] | NÓRDICA — Muebles de Diseño"
- Meta descriptions únicas, 150-160 caracteres, con keywords naturales
- H1 único por página, jerarquía semántica correcta
- Open Graph con imagen destacada por página
- URLs: `/catalogo/sofas`, `/producto/sofa-oslo-3-plazas`

**Performance:**
- Imágenes en WebP, lazy loading en catálogo
- Skeleton loaders durante carga de productos
- Sin animaciones que bloqueen renderizado

**Accesibilidad:**
- Contraste mínimo 4.5:1
- Focus visible en todos los elementos interactivos
- Alt text descriptivo en todas las imágenes de producto
- Formularios con labels asociados y mensajes de error claros
- Skip to content link

**Responsive:**
- Mobile (360px): navegación hamburguesa, grid 1-2 columnas, CTAs full-width
- Tablet (768px): grid 2-3 columnas, navegación visible
- Desktop (1280px+): grid 3-4 columnas, navegación completa

## CONSTRAINTS
- **Prohibido:** Carruseles automáticos, pop-ups, parallax agresivo, animaciones >300ms, colores saturados
- **Obligatorio:** Estados hover en todos los interactivos, estados de carga, mensajes de feedback claros, imágenes placeholder de calidad (usar Unsplash interiorismo)

## DELIVERABLES
1. Web completa con todas las rutas definidas
2. Catálogo con mínimo 12 productos de ejemplo (distribuidos en categorías)
3. 4 proyectos de ejemplo en portfolio
4. Todos los formularios funcionales con validación y feedback
5. Carrito funcional con persistencia en sesión
6. Responsive verificado

## WORKING PROTOCOL
Antes de generar código:
1. **Lista todos los supuestos** sobre productos, imágenes, contenido
2. **Pregunta** si necesitas clarificación sobre flujos o prioridades
3. **Propón plan:** Home → Catálogo → Producto → Carrito → Checkout → Proyectos → Contacto → Páginas secundarias
4. **Empieza por Home + Catálogo** con productos de ejemplo

Durante el desarrollo:
- Componentes reutilizables: Header, Footer, ProductCard, Button, Input, Modal
- Consistencia absoluta en espaciado, tipografía y colores
- Si pido cambios: aplicar quirúrgicamente, nunca rehacer secciones completas

# ═══════════════════════════════════════════════════════════


[*]