NEW PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea una página web completa para la marca ficticia "Store Cobalto", una tienda de comercio electrónico de productos artesanales. Usa una única página HTML que incluya Tailwind CSS via CDN y JavaScript vanilla (sin bundlers).
**Alcance**: replicar la estructura y estilo del sitio original analizado, respetando los siguientes bloques en el orden indicado y adaptándolos a la nueva marca:
1. Barra superior fija con iconos sociales (Twitter, LinkedIn, Instagram, Dribbble), logo central y botón de carrito que abre un modal.
2. Menú hamburguesa que revela una navegación lateral con enlaces: Inicio, Sobre Nosotros, Productos, Blog, Contacto.
3. Hero de página principal: fondo de imagen a pantalla completa, título grande, subtítulo y botón CTA "Explorar colección".
4. Grid de categorías (4 co
4.115 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.115 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 iconos sociales, logo y carrito modal
- 1.2 Menú hamburguesa con navegación lateral
- 1.3 Hero con título, subtítulo y botón principal
- 1.4 Grid de categorías de productos (4 columnas)
- 1.5 Carrusel de testimonios de clientes
- 1.6 Formulario de suscripción al newsletter
- 1.7 Footer con enlaces útiles, contacto y redes sociales
ABOUT
- 1.1 Header interno con logo y menú
- 1.2 Imagen hero interna con texto descriptivo
- 1.3 Historia de la marca en dos columnas
- 1.4 Equipo en tarjetas tipo grid
- 1.5 Valores de la empresa en iconos
- 1.6 Footer común
PRODUCTS
- 1.1 Header interno con filtro de categorías
- 1.2 Grid de productos (cards con imagen, nombre, precio, botón añadir)
- 1.3 Paginación inferior
- 1.4 Footer común
PRODUCT DETAIL
- 1.1 Galería de imágenes del producto
- 1.2 Información del producto (título, descripción, precio, selector de cantidad)
- 1.3 Botón añadir al carrito
- 1.4 Sección de productos relacionados en carrusel
- 1.5 Footer común
CART (modal)
- 1.1 Lista de artículos con miniatura, nombre, precio y opciones
- 1.2 Contador de cantidad editable
- 1.3 Subtotal y botones de checkout / continuar comprando
- 1.4 Mensaje de carrito vacío
- 1.5 Footer común
CHECKOUT
- 1.1 Formulario de datos de facturación y envío
- 1.2 Resumen de pedido y subtotal
- 1.3 Métodos de pago (Apple Pay, Google Pay, PayPal)
- 1.4 Botón confirmar compra
- 1.5 Footer común
PROMPTS RELACIONADOS · E-COMMERCE
