NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la marca ficticia EcoLumen, una tienda online de productos de energía renovable. Utiliza exclusivamente HTML, Tailwind CSS (CDN) y JavaScript vanilla en un único archivo. El diseño debe replicar la estructura y la estética del sitio analizado, manteniendo los siguientes detalles:
- **Paleta de colores**: #0D3B66 (azul marino), #FAF0CA (crema), #F4D35E (amarillo suave), #EE964B (naranja quemado), #F95738 (rojo coral) para acentos.
- **Tipografía**: Fuentes de Google ‘Inter’ para texto y ‘Playfair Display’ para titulares.
- **Header**: barra fija con logo (texto EcoLumen), menú principal (Home, About Us, Shop, Blog, Contact) con dropdown para páginas auxiliares, botón de carrito que abre un modal mostrador de productos, icono de carrito con contador.
- **Hero
3.890 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.890 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 Cabecera fija con logo, navegación principal, dropdown de páginas y botón de carrito modal
- 1.2 Hero principal con título destacado, subtítulo y botón CTA
- 1.3 Bloque de características en tres columnas con iconos y texto breve
- 1.4 Galería de productos destacados en cuadrícula responsiva
- 1.5 Testimonios de clientes en carrusel sencillo
- 1.6 Sección de precios/planes con tarjetas comparativas
- 1.7 Llamada a la acción final con formulario de suscripción
- 1.8 Pie de página con enlaces institucionales, contactos y redes sociales
ABOUT US
- 2.1 Cabecera reutilizada
- 2.2 Hero interno con imagen y texto descriptivo
- 2.3 Valores de la empresa en tarjetas
- 2.4 Equipo en cuadrícula con foto y bio breve
- 2.5 CTA para contactar
- 2.6 Pie de página
SHOP
- 3.1 Cabecera reutilizada
- 3.2 Banner de categoría
- 3.3 Lista de productos en tarjetas con imagen, nombre, precio y botón "Añadir al carrito"
- 3.4 Filtros laterales (categorías, rango de precios)
- 3.5 Paginación
- 3.6 Pie de página
PRODUCT DETAILS
- 4.1 Cabecera reutilizada
- 4.2 Galería de imágenes del producto
- 4.3 Información del producto (título, descripción, precio, selector de variantes)
- 4.4 Botón "Añadir al carrito"
- 4.5 Sección de productos relacionados
- 4.6 Pie de página
BLOG
- 5.1 Cabecera reutilizada
- 5.2 Lista de artículos con imagen, título, extracto y botón "Leer más"
- 5.3 Sidebar con categorías y últimos posts
- 5.4 Pie de página
CONTACT
- 6.1 Cabecera reutilizada
- 6.2 Formulario de contacto (nombre, email, mensaje, botón enviar)
- 6.3 Mapa integrado
- 6.4 Información de contacto y redes sociales
- 6.5 Pie de página
PROMPTS RELACIONADOS · COMERCIO ELECTRÓNICO