NEW PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la marca ficticia Compras Ámbar (comprasambar.com), tienda online de productos de bienestar, usando solo HTML, Tailwind CSS CDN y JavaScript vanilla en un único archivo. Mantén la estructura y patrones UI del sitio original:
- **Paleta de colores**: #0D0D0D (fondo negro), #FFFFFF (texto), #FF6F61 (accento coral), #F4F4F4 (gris claro), #333333 (gris oscuro).
- **Tipografía**: Inter (sans-serif) para cuerpo, Playfair Display para títulos.
- **Header**: barra fija con logo a la izquierda, menú de navegación (Home, Sobre Nosotros, Servicios, Tienda, Contacto) y botón de carrito que abre un modal. Menú desplegable bajo "Páginas" con sub‑links.
- **Footer**: fondo negro, columnas de enlaces (Empresa, Soporte, Legal), iconos de redes sociales, texto de copyrigh
3.750 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.750 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 con logo, menú y carrito
- 2.1 Hero con título, subtítulo y botón CTA
- 3.1 Grid de categorías (4 columnas)
- 4.1 Beneficios en fila (icono + título + descripción)
- 5.1 Testimonios en carrusel
- 6.1 Suscripción al boletín
- 7.1 Footer con bloques de enlaces, redes y copyright
ABOUT US
- 1.1 Cabecera común
- 2.1 Imagen grande con texto descriptivo
- 3.1 Valores en tarjetas
- 4.1 Equipo en grid
- 5.1 CTA a tienda
SERVICES
- 1.1 Cabecera común
- 2.1 Lista de servicios con iconos
- 3.1 Detalle de cada servicio en columnas
- 4.1 CTA a reserva
SHOP
- 1.1 Cabecera común
- 2.1 Filtros lateral izquierdo
- 3.1 Grid de productos (cards)
- 4.1 Paginación
PRODUCT DETAIL
- 1.1 Cabecera común
- 2.1 Galería de imágenes del producto
- 3.1 Información del producto y opciones
- 4.1 Botón añadir al carrito
- 5.1 Sección de productos relacionados
CART
- 1.1 Cabecera común
- 2.1 Modal del carrito con lista de ítems
- 3.1 Resumen de precios y botón checkout
CHECKOUT
- 1.1 Cabecera común
- 2.1 Formulario de datos de envío
- 3.1 Resumen de orden y botón pagar
CONTACT US
- 1.1 Cabecera común
- 2.1 Formulario de contacto
- 3.1 Mapa incrustado y datos de contacto
PROMPTS RELACIONADOS · E-COMMERCE
