NEW PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la marca ficticia "Tienda Ámbar" (agencia de diseño y desarrollo digital) usando solo HTML, Tailwind CSS CDN y JavaScript vanilla en un único archivo. El objetivo es replicar el diseño visual y la estructura de una web tipo ecommerce corporativo con estilo monocromo blanco‑negro.
---
**Paleta de colores**
- #FFFFFF (blanco)
- #000000 (negro)
- #F5F5F5 (gris muy claro para fondos de secciones)
- #333333 (texto primario)
- #777777 (texto secundario)
**Tipografía**
- Fuente primaria: "Inter", sans‑serif (cargar desde Google Fonts)
- Peso 400 para párrafos, 600 para encabezados, 700 para CTA.
---
**Estructura general**
- `<header>` fijo, alto 80px, fondo blanco, sombra ligera. Contiene:
- Logo a la izquierda (80 px de ancho), texto secundario "Creative
4.896 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.896 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ú hamburguesa y carrito lateral
- 1.2 Menú overlay con enlaces a Estudio, Trabajo, Noticias y Contacto + iconos sociales
- 1.3 Hero con logo y claim, botón Hire Us
- 1.4 Bloque de servicios (texto + íconos)
- 1.5 Galería de proyectos (grid 3‑col)
- 1.6 Testimonios (carrusel)
- 1.7 CTA a la tienda
- 1.8 Footer con enlaces, newsletter y datos de contacto
ABOUT
- 2.1 Cabecera reutilizada
- 2.2 Imagen hero interna y descripción de la agencia
- 2.3 Valores y equipo en tarjetas
- 2.4 CTA a contactarnos
WORK
- 3.1 Cabecera reutilizada
- 3.2 Filtro de categorías
- 3.3 Grid de proyectos con hover overlay
- 3.4 CTA a ver más proyectos
NEWS
- 4.1 Cabecera reutilizada
- 4.2 Lista de artículos en formato card
- 4.3 Paginación simple
CONTACT
- 5.1 Cabecera reutilizada
- 5.2 Formulario de contacto (nombre, email, mensaje, botón enviar)
- 5.3 Mapa estático y datos de contacto
CART
- 6.1 Sidebar derecho con lista de productos, cantidades y precios
- 6.2 Resumen de subtotal y botón de checkout
CHECKOUT
- 7.1 Formulario de datos de facturación y pago
- 7.2 Resumen de pedido y botón de confirmar compra
PROMPTS RELACIONADOS · E-COMMERCE
