NEW PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea una página web completa para la marca ficticia "Instituto Ónix" (institutoonix.com), sector venta online de cosmética natural, claim "Cuidado consciente para tu piel". Utiliza solo HTML estático con TailwindCSS CDN y JavaScript vanilla en un único archivo. Reproduce la estructura y estilo del sitio analizado: una barra superior fija con mensaje "Envío gratuito a partir de 50 €", cabecera sticky con logo a la izquierda, menú principal (Home, Sobre Nosotros, Tienda, Blog, Contacto, FAQ), menú desplegable "Más" con enlaces a páginas internas, buscador que se despliega al hacer clic, ícono de carrito que abre una barra lateral derecha con resumen del pedido. Utiliza una paleta de colores basada en los siguientes hex: #212121 (texto oscuro), #FFFFFF (fondo), #4CAF50 (acentos y botones), #F
3.770 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.770 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 aviso con mensaje de envío gratuito
- 2.1 Cabecera sticky con logo, menú principal, buscador, ícono de carrito
- 3.1 Hero con imagen de fondo y botón principal
- 4.1 Bloque de ventajas (envío gratis, productos ecológicos, garantía)
- 5.1 Galería de productos destacados en grid
- 6.1 Testimonios en carrusel
- 7.1 Formulario de suscripción al boletín
- 8.1 Footer con enlaces, redes sociales y datos de contacto
SHOP
- 1.1 Cabecera sticky (reutilizada)
- 2.1 Lista de productos en grid con filtros
- 3.1 Filtros laterales (categorías, precio, valoración)
- 4.1 Paginación
- 5.1 Footer
ABOUT
- 1.1 Cabecera sticky
- 2.1 Sección de historia y valores con imágenes
- 3.1 Equipo en tarjetas
- 4.1 Footer
BLOG
- 1.1 Cabecera sticky
- 2.1 Lista de artículos en estilo tarjeta
- 3.1 Sidebar con categorías y newsletter
- 4.1 Footer
CONTACT
- 1.1 Cabecera sticky
- 2.1 Formulario de contacto con mapa incrustado
- 3.1 Información de empresa y redes sociales
- 4.1 Footer
PROMPTS RELACIONADOS · EDUCATION
