NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web ficticio llamado Spa Duna (spaduna.com) para una tienda online de cosmética y bienestar. Utiliza HTML5 en un único archivo, Tailwind CSS a través del CDN y JavaScript vanilla para interactividad mínima (menú hamburguesa, carrusel de testimonios, modal de carrito).
PALETA de colores:
- #1A202C (azul gris oscuro, fondo principal)
- #4A5568 (gris medio, bloques y texto secundario)
- #FFFFFF (blanco, contenido)
- #38A169 (verde oliva, botones y enlaces)
- #E2E8F0 (gris claro, fondos de secciones)
TIPOGRAFÍA:
- Fuente principal: 'Inter', sans‑serif (cargar desde Google Fonts). Títulos en peso 700, cuerpo en 400.
ESTRUCTURA:
1. **Barra superior** (top‑banner) con mensaje estático: "Envío gratuito en EE.UU. para pedidos superiores a $100". Fondo #38A169, texto blanco, centrad
4.662 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.662 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 superior con aviso de envío gratuito
- 1.2 Header fijo con logo, menú desplegable y carrito
- 1.3 Hero con imagen, título y botón
- 1.4 Grid de productos destacados
- 1.5 Bloque de beneficios (icono + texto)
- 1.6 Carrusel de testimonios
- 1.7 Formulario de suscripción al newsletter
- 1.8 Footer con enlaces, redes y datos de contacto
SHOP
- 2.1 Header reutilizado
- 2.2 Banner interior con título de la colección
- 2.3 Grid de productos con filtro y paginación
- 2.4 Sidebar con filtros por categoría y precio
- 2.5 Footer reutilizado
PRODUCT DETAIL
- 3.1 Header reutilizado
- 3.2 Imagen principal del producto con galería
- 3.3 Información del producto (nombre, precio, descripción, selector de variantes)
- 3.4 Botón "Añadir al carrito"
- 3.5 Sección de productos relacionados en slider
- 3.6 Footer reutilizado
BLOG
- 4.1 Header reutilizado
- 4.2 Lista de artículos con tarjetas en grid
- 4.3 Paginación
- 4.4 Footer reutilizado
BLOG POST
- 5.1 Header reutilizado
- 5.2 Título y fecha del artículo
- 5.3 Contenido del post con imágenes integradas
- 5.4 Área de comentarios básica
- 5.5 Footer reutilizado
CONTACT
- 6.1 Header reutilizado
- 6.2 Formulario de contacto (nombre, email, mensaje)
- 6.3 Mapa incrustado
- 6.4 Información de contacto y redes
- 6.5 Footer reutilizado
ABOUT US
- 7.1 Header reutilizado
- 7.2 Historia de la marca con imágenes
- 7.3 Equipo en cards
- 7.4 Valores y misión
- 7.5 Footer reutilizado
LOGIN / SIGN‑UP
- 8.1 Header minimalista
- 8.2 Formularios de acceso y registro
- 8.3 Enlaces a recuperación de contraseña
- 8.4 Footer simplificado
PROMPTS RELACIONADOS · BELLEZA / SPA
