NEW PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la marca ficticia "Tienda Atolón" (tiendaatolon.com), un ecommerce de diseño y accesorios creativos. Utiliza únicamente HTML, Tailwind CSS vía CDN y JavaScript vanilla en un único archivo. El proyecto debe reproducir la estructura y estilo visual del sitio analizado, sin copiar textos ni imágenes originales.
Paleta de colores: #1F2937 (gris oscuro), #3B82F6 (azul vibrante), #F3F4F6 (gris claro), #FFFFFF (blanco), #D1D5DB (gris medio).
Tipografía: "Inter", sans-serif para cuerpo y títulos; "Playfair Display" para encabezados hero.
Estructura requerida:
1. **Header** fijo con logo (texto estilizado "Lúmina"), menú de navegación (Inicio, Productos, Servicios, Blog, Contacto), icono de carrito que muestra cantidad y abre modal de carrito, y versión responsive
4.621 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.621 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, menú, carrito y versión móvil
- 1.2 Hero con título, subtítulo y botón principal
- 1.3 Bloque de características en tres columnas con iconos
- 1.4 Galería de productos destacados en rejilla responsive
- 1.5 Sección de servicios con imágenes y texto alineado
- 1.6 Últimas entradas del blog en formato tarjetas
- 1.7 Formulario de contacto con campos básicos
- 1.8 Pie de página con enlaces rápidos, redes sociales y datos de contacto
PRODUCTOS
- 2.1 Encabezado interno con breadcrumb
- 2.2 Lista de productos en rejilla, cada uno con imagen, nombre, precio y botón "Añadir al carrito"
- 2.3 Filtros laterales (categorías, rango de precios)
- 2.4 Paginación inferior
SERVICIOS
- 3.1 Cabecera interna con título y descripción corta
- 3.2 Tarjetas de servicio con icono, título y breve texto
- 3.3 Llamada a la acción para solicitar presupuesto
BLOG
- 4.1 Lista de artículos en tarjetas, con imagen, título, extracto y botón "Leer más"
- 4.2 Barra lateral con categorías y archivo
- 4.3 Paginación
CONTACTO
- 5.1 Formulario de contacto (nombre, email, asunto, mensaje)
- 5.2 Información de contacto y mapa incrustado
- 5.3 Enlaces a redes sociales
PIE DE PÁGINA
- 6.1 Bloque de suscripción al boletín
- 6.2 Enlaces de navegación secundarios (Política de privacidad, Términos, FAQ)
- 6.3 Iconos de redes sociales
- 6.4 Datos de la empresa y copyright
PROMPTS RELACIONADOS · E-COMMERCE
