NEW PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la marca ficticia Tienda Perla, un comercio electrónico de productos boutique. Utiliza únicamente HTML, Tailwind CSS vía CDN y JavaScript vanilla en un único archivo. Emplea la siguiente paleta de colores: #1A202C (gris oscuro), #2D3748 (gris medio), #4A5568 (gris claro), #F6E05E (amarillo cálido), #FFFFFF (blanco). Tipografía: Inter (Google Fonts) para títulos y texto, peso 600 para encabezados y 400 para cuerpo.
Estructura y requisitos:
- **Header** fijo, fondo blanco, sombra ligera. Logo a la izquierda (texto Tienda Perla). Menú horizontal con enlaces: Home, Productos, Blog, Contacto. Ícono de carrito a la derecha que abre un modal.
- **Modal carrito** centrado, overlay semitransparente. Lista de productos con imagen, nombre, variante, cantidad editable,
3.879 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.879 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ú principal y botón de carrito modal
- 1.2 Hero con fondo de imagen, título destacado y botón CTA
- 1.3 Bloque de categorías en cuadrícula con iconos
- 1.4 Galería de productos destacados en tarjetas
- 1.5 Sección de testimonios con carrusel sencillo
- 1.6 Footer con información de contacto, enlaces útiles y redes sociales
PRODUCTOS
- 2.1 Cabecera reutilizada
- 2.2 Lista de productos en grid, filtro y paginación
- 2.3 Detalle de producto con galería, descripción, selector de variantes y botón "Añadir al carrito"
- 2.4 Footer reutilizado
CART (modal)
- 3.1 Vista de carrito con lista de ítems, opciones de cantidad, subtotal y botón de checkout
- 3.2 Botón de cerrar modal
CHECKOUT
- 4.1 Formulario de datos de facturación y envío
- 4.2 Resumen del pedido y botón de pago
- 4.3 Footer reutilizado
BLOG
- 5.1 Cabecera reutilizada
- 5.2 Lista de entradas en formato tarjeta con imagen y extracto
- 5.3 Footer reutilizado
CONTACTO
- 6.1 Cabecera reutilizada
- 6.2 Formulario de contacto con campos nombre, email, mensaje
- 6.3 Mapa incrustado (opcional) y datos de contacto
- 6.4 Footer reutilizado
PROMPTS RELACIONADOS · E-COMMERCE
