NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea una web ecommerce single-file en HTML con Tailwind CSS vía CDN y JavaScript vanilla para una marca ficticia llamada **Lumavida Health** (dominio lumavida.com, email hola@lumavida.com, año 2025). La marca vende suplementos naturales y productos de bienestar online, con un tono cercano, científico y limpio. Claim: 'Cuidamos lo esencial con ciencia y naturaleza'. Todo el copy debe ser 100% original en español de España, sin precios concretos (usa etiquetas como 'Desde' o 'Consultar').
## STACK Y REQUISITOS TÉCNICOS
- Un único archivo HTML autocontenido.
- Tailwind CSS por CDN (script de cdn.tailwindcss.com) con configuración inline para colores y fuentes personalizadas.
- Google Fonts: 'Inter' para texto y 'Fraunces' para titulares (display).
- Iconos con Lucide vía CDN o SVG inline.
-
7.192 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
7.192 caracteres · licencia libre
Solo descarga completa disponible
CAPTURA COMPLETA · HOME
Para que Claude replique el diseño con máxima fidelidad, descarga la imagen y adjúntala en tu chat.
Descargar captura
ESTRUCTURA DEL SITIO
Tabla de secciones
HOME
- 1.1 Hero con titular, CTAs y mockup
- 1.2 Tira de logos partners
- 1.3 Bienvenida con métricas
- 1.4 Grid de categorías
- 1.5 Productos destacados
- 1.6 Cómo funciona (3 pasos)
- 1.7 Beneficios con imagen
- 1.8 Testimonios slider
- 1.9 Blog reciente
- 1.10 CTA newsletter
- 1.11 Footer
SERVICIOS
- 2.1 Hero secundario con breadcrumb y título de página
- 2.2 Grid de servicios con icono, título y descripción
- 2.3 Bloque de proceso con timeline vertical
- 2.4 CTA intermedio con fondo color
- 2.5 FAQ acordeón
- 2.6 Footer
SOBRE NOSOTROS
- 3.1 Hero con breadcrumb y título
- 3.2 Historia de la marca con imagen lateral
- 3.3 Misión, visión y valores en 3 tarjetas
- 3.4 Equipo en grid con foto, nombre y rol
- 3.5 Métricas destacadas en banda
- 3.6 CTA newsletter
- 3.7 Footer
PRECIOS
- 4.1 Hero con título y subtítulo
- 4.2 Toggle mensual/anual y 3 planes de suscripción de salud
- 4.3 Tabla comparativa de características
- 4.4 FAQ acordeón
- 4.5 CTA final
- 4.6 Footer
NOTICIAS
- 5.1 Hero con título y buscador
- 5.2 Filtros por categoría
- 5.3 Grid de artículos paginado
- 5.4 CTA newsletter
- 5.5 Footer
ARTÍCULO DETALLE
- 6.1 Cabecera con título, autor, fecha y imagen destacada
- 6.2 Cuerpo del artículo con tipografía editorial
- 6.3 Bloque de compartir en redes
- 6.4 Artículos relacionados
- 6.5 Footer
TIENDA
- 7.1 Hero de tienda con buscador
- 7.2 Sidebar de filtros por categoría, precio y valoración
- 7.3 Grid de productos con orden
- 7.4 Paginación
- 7.5 Footer
PRODUCTO DETALLE
- 8.1 Galería de imágenes y ficha con precio, variantes y añadir al carrito
- 8.2 Tabs de descripción, ingredientes y modo de uso
- 8.3 Valoraciones de clientes
- 8.4 Productos relacionados
- 8.5 Footer
CARRITO
- 9.1 Tabla de productos con cantidad y precio
- 9.2 Resumen de pedido lateral
- 9.3 Botón checkout
- 9.4 Footer
CHECKOUT
- 10.1 Formulario de envío y facturación
- 10.2 Selector de método de pago
- 10.3 Resumen de pedido lateral fijo
- 10.4 Footer
CONTACTO
- 11.1 Hero con título
- 11.2 Formulario de contacto + datos (email, teléfono, dirección)
- 11.3 Mapa estilizado
- 11.4 Footer
PROMPTS RELACIONADOS · SALUD Y MEDICINA