Tu tienda online desde una foto

========================================
ROL
========================================
Actúas como un equipo full-stack completo: director de arte, copywriter de
respuesta directa, arquitecto de software y desarrollador senior front-end
y back-end. Tu entregable es una aplicación de ecommerce COMPLETA y
funcional —frontend, backend, base de datos, panel de administración y
despliegue— del producto que aparece en la imagen adjunta.
​
========================================
REGLA CERO — TÚ IDENTIFICAS EL PRODUCTO
========================================
No te voy a decir qué producto es. Dedúcelo de la imagen.
Antes de escribir una sola línea de código, entrégame un BRIEF DE
IDENTIFICACIÓN:
1) Qué producto es exactamente (categoría, subcategoría, uso principal).
2) Materiales, acabados, formato y tamaño aparente.
3) Paleta de color REAL extraída de la foto, en códigos HEX.
4) Gama percibida (masa / medio / premium / lujo) y por qué.
5) Público objetivo: edad, género, poder adquisitivo, contexto de uso y
   motivación emocional de compra.
6) Variantes lógicas del producto (tallas, colores, formatos) si las hay.
7) Tu nivel de confianza en la identificación (0-100%).
Si tu confianza es menor del 85%, PÁRATE y hazme máximo 3 preguntas antes
de seguir. No inventes características que no puedas ver en la imagen
(ingredientes, certificaciones, origen, tecnología interna).
​
========================================
DATOS QUE TE DOY
========================================
· Imagen del producto: [ADJUNTA LA FOTO]
· Marca: [NOMBRE o "propón 3 opciones y recomiéndame una"]
· Mercado: España / UE — Idioma: español — Moneda: EUR
· Coste unitario y coste de envío: [RELLENA o dime que lo estimes]
· Stack preferido: [Next.js + PostgreSQL + Prisma, o el que recomiendes tú
  justificando la elección]
​
========================================
FASE 1 — ESTRATEGIA Y PRECIO
========================================
· Posicionamiento en una frase y propuesta única de valor.
· 3 objeciones principales de compra y cómo las neutralizas.
· Ángulo emocional dominante.
· PRECIO: referencias comparables reales del mercado español. Precio ancla,
  precio de venta, precio de pack. Justifica el margen contando IVA (21%),
  comisión de pasarela y coste de envío. Psicología de precios coherente
  con la gama (si es lujo, NO uses terminaciones en ,99).
​
========================================
FASE 2 — ARQUITECTURA TÉCNICA
========================================
Antes de codificar, entrégame el diseño del sistema:
· Stack elegido y por qué (framework, ORM, base de datos, hosting).
· Diagrama de arquitectura: cliente, servidor, base de datos, servicios
  externos (pagos, email, almacenamiento de imágenes).
· Esquema completo de base de datos con relaciones. Mínimo estas tablas:
  products, product_variants, product_images, inventory, customers,
  addresses, carts, cart_items, orders, order_items, payments, discounts,
  reviews, admin_users, sessions, webhook_events.
· Contrato de la API: cada endpoint con método, ruta, payload de entrada,
  respuesta, códigos de error y si requiere autenticación.
· Estrategia de estado del carrito (invitado vs. cliente registrado) y qué
  pasa al fusionar ambos en el login.
​
========================================
FASE 3 — BACKEND (código completo, no pseudocódigo)
========================================
1) MODELO DE DATOS
   · Esquema del ORM completo + migraciones.
   · Script de seed que cargue el producto identificado con sus variantes,
     precios, stock inicial e imágenes.
2) API
   · Catálogo: listar productos, detalle por slug, variantes y stock.
   · Carrito: crear, añadir, actualizar cantidad, eliminar, recuperar.
   · Cupones: validación de descuentos con reglas (importe mínimo,
     caducidad, un solo uso, porcentaje o importe fijo).
   · Cálculo de totales EN SERVIDOR: subtotal, descuento, envío, IVA 21%,
     total. NUNCA confíes en el precio que llegue del cliente; recalcula
     siempre contra la base de datos.
   · Pedidos: crear, consultar por número + email, historial del cliente.
   · Clientes: registro, login, recuperación de contraseña, direcciones.
   · Reseñas: enviar, moderar, listar solo las aprobadas y verificadas.
3) PAGOS — STRIPE
   · Creación de sesión de Stripe Checkout desde el servidor con los
     importes recalculados.
   · Endpoint de WEBHOOK con verificación de firma. Maneja al menos:
     checkout.session.completed, payment_intent.payment_failed,
     charge.refunded.
   · Idempotencia: guarda cada evento en webhook_events y descarta
     duplicados. El pedido solo pasa a "pagado" desde el webhook, jamás
     desde una redirección del navegador.
   · Descuento de stock atómico y transaccional en el momento del pago
     confirmado, con control de sobreventa.
   · Configuración adicional para PayPal y Bizum si el stack lo admite.
   · Todas las claves como variables de entorno. Dame el .env.example y
     las instrucciones exactas de qué tengo que hacer yo para activarlo.
4) EMAILS TRANSACCIONALES
   · Confirmación de pedido, envío con número de seguimiento, recuperación
     de contraseña, solicitud de reseña post-compra, carrito abandonado.
   · Plantillas HTML responsive con el copy y la identidad visual de la
     FASE 4. Integración con Resend o similar.
5) PANEL DE ADMINISTRACIÓN (protegido con login)
   · Dashboard: ventas, pedidos del día, ticket medio, stock bajo.
   · CRUD de productos, variantes, precios e imágenes.
   · Gestión de pedidos: ver detalle, cambiar estado, marcar como enviado
     con seguimiento, emitir reembolso vía Stripe.
   · Gestión de stock e inventario.
   · Moderación de reseñas.
   · Creación y gestión de cupones.
   · Exportación de pedidos a CSV.
6) SEGURIDAD
   · Hash de contraseñas con bcrypt o argon2. Nunca en texto plano.
   · Autenticación por sesión o JWT con cookies httpOnly y SameSite.
   · Validación y saneado de TODA entrada con Zod o equivalente.
   · Rate limiting en login, registro, checkout y recuperación.
   · Protección CSRF, cabeceras de seguridad, CORS restrictivo.
   · Consultas parametrizadas siempre (nada de SQL concatenado).
   · Rol de administrador verificado en el servidor en cada ruta de admin,
     no solo ocultando botones en el front.
   · Logs de errores sin filtrar datos sensibles ni claves.
​
========================================
FASE 4 — IDENTIDAD VISUAL
========================================
Deriva TODO del producto de la foto, no de plantillas genéricas.
· Paleta completa (primario, secundario, acento, fondo, texto) en HEX.
· Tipografías Google Fonts: display para titulares, neutra para cuerpo.
· Espaciado amplio, mucho aire, jerarquía clara.
· Percepción de lujo: fondos limpios, sombras suaves, micro-animaciones
  sutiles al scroll. Nada de degradados chillones ni estética de plantilla
  de dropshipping.
​
========================================
FASE 5 — FRONTEND (código completo)
========================================
Mobile-first, responsive, sin marcadores tipo "aquí iría el contenido".
Páginas y componentes:
· Home / landing de producto con hero, prueba social, beneficios,
  storytelling, especificaciones, comparativa, garantía, FAQ y CTA final.
· Ficha de producto: galería con zoom, selector de variantes, selector de
  cantidad, stock en tiempo real desde la API.
· Carrito lateral persistente.
· Checkout con validación en cliente y en servidor.
· Páginas de éxito y de pago fallido.
· Área de cliente: pedidos, seguimiento, direcciones, datos.
· Estados vacíos, estados de carga (skeletons) y manejo de errores de API
  con mensajes claros al usuario.
COPY completo en español de España, listo para pegar:
· 3 variantes de titular del hero para test A/B.
· Beneficio primero, característica después.
· FAQ de 6-8 preguntas que resuelvan objeciones reales.
· Meta title, meta description y ALT de todas las imágenes.
· Urgencia HONESTA: nada de contadores falsos ni "quedan 3 unidades"
  inventados. Si muestras stock, que venga de la base de datos real.
SEO Y ANALÍTICA:
· HTML semántico, Open Graph, sitemap, robots.txt.
· Datos estructurados schema.org/Product con precio, disponibilidad y
  agregado de valoraciones solo si hay reseñas reales.
· GA4 y Meta Pixel con eventos view_item, add_to_cart, begin_checkout y
  purchase. El evento purchase se dispara con datos del pedido confirmado.
· Accesibilidad AA: contraste, navegación por teclado, ALT, foco visible.
· Rendimiento: lazy-load, imágenes optimizadas, sin librerías pesadas.
​
========================================
FASE 6 — IMÁGENES PROFESIONALES
========================================
Shot list con el prompt de generación listo para usar de cada toma:
· Packshot sobre fondo neutro, luz de estudio suave, sombra realista.
· Detalle macro del material o acabado.
· Bodegón lifestyle en el contexto de uso del público objetivo.
· Imagen de escala o producto en mano.
· Banner horizontal para el hero.
En TODOS los prompts de imagen añade al final, literalmente:
"no text, no letters, no typography, no logos, no watermarks"
Fondos y props respetando la paleta de la FASE 4. Estética de catálogo de
marca de lujo, no de marketplace.
​
========================================
FASE 7 — LEGAL, TESTING Y DESPLIEGUE
========================================
LEGAL (España / UE):
· Aviso Legal, Política de Privacidad, Términos y Condiciones, Política de
  Cookies con banner de consentimiento previo, Política de Devoluciones con
  derecho de desistimiento de 14 días y formulario de desistimiento.
· Marca claramente los campos que debo rellenar con mis datos fiscales.
TESTING:
· Tests de las funciones críticas: cálculo de totales, aplicación de
  cupones, descuento de stock, verificación del webhook.
· Guía de pruebas manuales con tarjetas de test de Stripe: pago correcto,
  pago rechazado, reembolso y webhook duplicado.
DESPLIEGUE:
· Dockerfile y docker-compose para desarrollo local.
· Instrucciones de despliegue paso a paso (Vercel/Railway o el que
  recomiendes) con la base de datos gestionada.
· .env.example completo y documentado.
· README con instalación, migraciones, seed y arranque.
· Estrategia de backup de la base de datos.
​
========================================
RESTRICCIONES INNEGOCIABLES
========================================
· Las reseñas y testimonios son PLANTILLAS marcadas con [PENDIENTE DE
  SUSTITUIR POR RESEÑA REAL]. No generes nombres, fotos ni valoraciones
  presentándolos como reales: en la UE las reseñas falsas son ilegales.
  Sí diseña el sistema técnico para recopilar reseñas verificadas de
  compradores reales.
· No inventes certificaciones, premios, cifras de ventas, ingredientes ni
  garantías sin confirmármelo antes.
· No inventes datos de mercado ni precios de competidores sin señalarlos
  como estimación.
· Código completo y ejecutable. Prohibido escribir "// implementar aquí",
  "resto del código igual" o similares.
· Si algo depende de información que no tienes, márcalo como [PENDIENTE] y
  pregúntamelo al final, no lo rellenes a ciegas.
​
========================================
ENTREGABLES
========================================
1) Brief de identificación del producto.
2) Estrategia y precio justificado.
3) Arquitectura, esquema de base de datos y contrato de API.
4) Código backend completo (modelos, API, pagos, webhooks, emails, admin).
5) Guía de estilo visual.
6) Código frontend completo con copy incluido.
7) Shot list con prompts de imagen.
8) Páginas legales.
9) Tests y guía de pruebas.
10) README, .env.example y guía de despliegue.
11) Checklist de lo que tengo que hacer yo para estar vendiendo (dominio,
    Stripe verificado, datos fiscales, fotos reales, alta en GA4).
Trabaja fase por fase. Al acabar cada fase, resume en 3 líneas y continúa
sin pedirme permiso, salvo que tu confianza en la identificación del
producto sea menor del 85%. Si una fase se corta por longitud, dime
exactamente dónde te quedaste y continúa cuando te escriba "sigue".