NEW PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web estático de una tienda de cosmética llamada Store Ónix (storeonix.com) usando HTML, Tailwind CSS CDN y JavaScript vanilla en un único archivo. Emula el diseño analizado:
- Paleta de colores: #212121 (negro profundo), #FFFFFF (blanco), #E91E63 (rosa vibrante), #F5F5F5 (gris claro) y acentos #FFC107 (amarillo dorado).
- Tipografía: "Montserrat" para encabezados (peso 700) y "Open Sans" para cuerpo (peso 400).
- Header: barra fija con logo SVG a la izquierda, menú horizontal (Sobre, Categorías, Tienda, Blog, Contacto, Suscríbete), ícono de búsqueda y carrito que abre un modal. En móviles se transforma a hamburguesa.
- Hero: sección a pantalla completa con fondo difuminado, título grande "Descubre tu rutina de belleza", subtítulo y botón principal "Explorar productos".
-
3.595 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.595 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 logo, menú principal, buscador y carrito
- 2.1 Hero con imagen de fondo, título y botón
- 3.1 Cuadrícula de categorías destacadas
- 4.1 Slider de productos más vendidos
- 5.1 Bloque de testimonios con cita y foto
- 6.1 Formulario de suscripción al newsletter
- 7.1 Footer con información de contacto, enlaces y redes sociales
ABOUT US
- 1.1 Encabezado con título y descripción de la marca
- 2.1 Historía de la empresa en dos columnas con imágenes
- 3.1 Valores y misión en tarjetas
- 4.1 Equipo con foto y nombre
- 5.1 CTA para contactar
CATEGORIES
- 1.1 Lista de categorías en tarjetas con imágenes
- 2.1 Filtro lateral por tipo y precio
- 3.1 Grid de productos de la categoría seleccionada
- 4.1 Paginación
PRODUCTS
- 1.1 Grid de productos con foto, nombre y precio
- 2.1 Modal rápido de vista previa
- 3.1 Filtros por rango de precio y atributos
- 4.1 Enlace a detalle del producto
BLOG
- 1.1 Lista de artículos en tarjetas con imagen y extracto
- 2.1 Barra lateral con categorías y últimos posts
- 3.1 Paginación
CONTACT US
- 1.1 Formulario de contacto con campos nombre, email, mensaje
- 2.1 Mapa incrustado de ubicación
- 3.1 Información de contacto y horarios
CART MODAL
- 1.1 Lista de productos en el carrito con miniatura, nombre, precio y cantidad
- 2.1 Subtotal y botones de checkout y seguir comprando
- 3.1 Mensaje de carrito vacío
PROMPTS RELACIONADOS · E-COMMERCE
