NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web ficticio para la marca **NexoCafé** (venta online de café y accesorios gourmet) usando **HTML único, Tailwind CSS vía CDN y JavaScript vanilla en un solo archivo**. Reproduce fielmente la estructura visual del sitio analizado, sin copiar textos ni imágenes originales.
**Paleta de colores**
- #3E2723 (marrón oscuro, fondo principal)
- #795548 (marrón medio, botones y acentos)
- #D7CCC8 (crema claro, fondos de secciones)
- #FFFFFF (blanco, texto y elementos sobre fondos oscuros)
- #FF7043 (naranja suave, hover y llamados a la acción)
**Tipografía**
- Fuente primaria: `Montserrat`, peso 400/600, tamaños fluidos (mobile 1rem, desktop 1.125rem).
- Fuente secundaria: `Roboto Slab` para títulos, peso 700.
**Header**
- Barra superior con logo a la izquierda (SVG placeholder).
4.551 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.551 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 Header con logo, mega‑menu y botones de login y reserva
- 1.2 Hero con título, subtítulo y botón principal
- 1.3 Bloque de productos destacados en grid responsive
- 1.4 Sección de testimonios en carrusel horizontal
- 1.5 Blog preview con cards de artículos recientes
- 1.6 Llamado a la acción para suscripción al newsletter
- 1.7 Footer con columnas de enlaces, información de contacto y redes sociales
PRODUCTS
- 1.1 Header reutilizado
- 1.2 Breadcrumb de navegación
- 1.3 Grid de productos con filtro y paginación
- 1.4 Detalle de producto con galería de imágenes, descripción, selector de variantes y botón "Añadir al carrito"
- 1.5 Sección de productos relacionados en carousel
- 1.6 Footer reutilizado
ABOUT US
- 1.1 Header reutilizado
- 1.2 Hero interno con título y imagen de fondo
- 1.3 Texto institucional con imagen acompañante
- 1.4 Equipo en tarjetas con foto y descripción
- 1.5 Valores de la marca en bloques icónicos
- 1.6 Footer reutilizado
BLOG
- 1.1 Header reutilizado
- 1.2 Lista de artículos en tarjetas con imagen, título y extracto
- 1.3 Sidebar con categorías, etiquetas y suscripción al newsletter
- 1.4 Footer reutilizado
CONTACT US
- 1.1 Header reutilizado
- 1.2 Formulario de contacto con campos nombre, email, asunto y mensaje
- 1.3 Mapa incrustado
- 1.4 Información de contacto y horario
- 1.5 Footer reutilizado
PROMPTS RELACIONADOS · EDUCACIÓN
