NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la marca ficticia AuraVerde, un ecommerce de cosmética natural, usando solo HTML, Tailwind CSS CDN y JavaScript vanilla en un solo archivo. La página debe replicar el diseño analizado:
- Paleta de colores: #1A3E3E (verde profundo), #A8D5BA (verde claro), #F5F5F5 (gris muy claro), #FFFFFF (blanco), #333333 (texto oscuro).
- Tipografía: Inter (sans-serif) para textos y Playfair Display para encabezados.
- Header: barra fija con logo (texto "AuraVerde" + icono de hoja), menú horizontal (Inicio, Sobre nosotros, Tienda, Blog), dropdown "Más" con enlaces a Categorías, Cuenta, Ayuda, y botón de carrito que abre una barra lateral derecha.
- Hero: sección full‑width con fondo de imagen de planta, título grande "Cuidado puro para tu piel", subtítulo y botón CTA "E
3.851 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.851 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 de navegación fija con logo, enlaces principales y botón de carrito lateral
- 1.2 Hero principal con imagen de fondo, título grande y llamado a la acción
- 1.3 Sección de productos destacados en cuadrícula responsiva
- 1.4 Bloque de beneficios con iconos y textos breves
- 1.5 Testimonios en carrusel sencillo
- 1.6 Formulario de suscripción al boletín
- 1.7 Footer con columnas de enlaces, redes sociales y datos de contacto
ABOUT
- 1.1 Header reutilizado
- 1.2 Imagen grande con texto descriptivo de la marca
- 1.3 Historia de la empresa en dos columnas
- 1.4 Valores y misión con iconos
- 1.5 Equipo con fotos y breves biografías
- 1.6 Footer reutilizado
SHOP
- 1.1 Header reutilizado
- 1.2 Filtro de categorías y barra de búsqueda
- 1.3 Grid de productos con tarjeta que muestra imagen, nombre, precio y botón "Añadir al carrito"
- 1.4 Paginación inferior
- 1.5 Footer reutilizado
BLOG
- 1.1 Header reutilizado
- 1.2 Lista de artículos en formato tarjeta con imagen, título, extracto y fecha
- 1.3 Sidebar con categorías y suscripción al boletín
- 1.4 Footer reutilizado
PRODUCT DETAIL
- 1.1 Header reutilizado
- 1.2 Galería de imágenes del producto con carrusel
- 1.3 Información del producto: nombre, precio, descripción, selector de variante y botón "Añadir al carrito"
- 1.4 Sección de productos relacionados en grid
- 1.5 Footer reutilizado
CART
- 1.1 Carrito lateral con lista de productos, cantidades editables y resumen de precios
- 1.2 Botón de "Continuar al pago"
- 1.3 Footer (no visible en vista de carrito)
CHECKOUT
- 1.1 Formulario de datos de envío y facturación
- 1.2 Resumen del pedido
- 1.3 Botón de confirmación de compra
- 1.4 Footer (no visible)
PROMPTS RELACIONADOS · BELLEZA / SPA
