NEW PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea una web estática completa para la marca ficticia **Salon Lumen** (cuidado de la piel) usando **HTML** + **Tailwind CSS CDN** + **JavaScript vanilla** en un solo archivo. La web debe replicar el diseño y la estructura del sitio analizado, sin copiar textos ni imágenes originales. Utiliza la siguiente paleta de colores: #F5F5F5 (fondo), #FFFFFF (tarjetas), #2C7A7B (accent verde‑azulado), #1A202C (texto oscuro), #4A5568 (texto secundario). Tipografía: **Inter** para cuerpos y **Playfair Display** para encabezados, cargadas desde Google Fonts.
**Estructura general**
- `<header>`: barra de navegación fija, logo a la izquierda, enlaces (Tienda, Blog, Sobre, Contacto, FAQ), dropdown con categorías (Cremas, Sérums, Limpiadores) y botón de carrito con contador. Menú móvil colapsable con ícono
4.385 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.385 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 Barra de navegación con logo, enlaces, dropdown y carrito
- 1.2 Hero principal con título, subtítulo y botón CTA
- 1.3 Cuadrícula de categorías (cremas, sérums, limpiadores)
- 1.4 Carrusel de productos destacados
- 1.5 Valores de la marca (sostenibilidad, ciencia, eficacia)
- 1.6 Blog destacado (dos artículos con imagen y extracto)
- 1.7 Footer con navegación secundaria, redes y newsletter
SHOP
- 2.1 Cabecera de tienda con filtros y ordenación
- 2.2 Lista de productos en tarjetas con foto, nombre, precio y botón "Añadir"
- 2.3 Paginación al final
PRODUCT
- 3.1 Galería de imágenes del producto
- 3.2 Información del producto: título, descripción, ingredientes, precio
- 3.3 Selector de cantidad y botón "Añadir al carrito"
- 3.4 Sección de productos relacionados
BLOG
- 4.1 Lista de artículos en formato tarjeta con imagen, título y extracto
- 4.2 Paginación
POST
- 5.1 Artículo completo con cabecera, contenido, autor y comentarios (mock)
ABOUT
- 6.1 Historia de la marca, misión, equipo en tarjetas
CONTACT
- 7.1 Formulario de contacto con campos nombre, email, mensaje y mapa incrustado
FAQ
- 8.1 Preguntas frecuentes en acordeón
CART
- 9.1 Panel lateral del carrito con lista de productos, cantidades, precios y botón "Pagar"
PROMPTS RELACIONADOS · BEAUTY / SPA
