NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea una web single-file en HTML con Tailwind CSS vía CDN y JavaScript vanilla para una agencia ficticia llamada Hilera Studio, un estudio de marketing digital y redes sociales para marcas emergentes. Dominio hilerastudio.com, email hola@hilerastudio.com, año 2025, claim: 'Convertimos atención en clientes'. El tono es editorial, tipográfico, sereno y profesional, en español de España, sin jerga marketinera ni precios concretos.
STACK Y REQUISITOS TÉCNICOS:
- Un único archivo HTML completo con Tailwind por CDN (https://cdn.tailwindcss.com) y JS vanilla embebido.
- Tipografías: usa Google Fonts con 'Fraunces' (serif display para titulares grandes) e 'Inter' (sans para cuerpo y UI).
- Totalmente responsive (mobile-first), accesible (aria-labels, contraste, foco visible) y semántico (header,
8.698 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
8.698 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 Header sticky con menú separado por comas y carrito
- 1.2 Hero tipográfico con CTAs y marquee de marcas
- 1.3 Introducción manifiesto a dos columnas
- 1.4 Grid de servicios en 4 columnas
- 1.5 Slider de casos destacados
- 1.6 Contadores animados de cifras
- 1.7 Proceso en 4 pasos acordeón
- 1.8 Carrusel de testimonios
- 1.9 Grid de equipo con hover social
- 1.10 Últimos 3 artículos del blog
- 1.11 Banner CTA final tipográfico
- 1.12 Footer expansivo con newsletter
SOBRE
- 2.1 Header
- 2.2 Hero de página con título y breadcrumb
- 2.3 Historia del estudio con timeline horizontal
- 2.4 Valores en 4 tarjetas con icono
- 2.5 Equipo completo en grid de 12
- 2.6 Galería de la oficina en mosaico
- 2.7 Banner CTA final
- 2.8 Footer
CASOS
- 3.1 Header
- 3.2 Hero con título y filtros por categoría
- 3.3 Grid masonry de proyectos con hover
- 3.4 Paginación numérica
- 3.5 Banner CTA
- 3.6 Footer
DETALLE DE CASO
- 4.1 Header
- 4.2 Hero con imagen grande y meta (cliente, año, servicios)
- 4.3 Briefing y reto en dos columnas
- 4.4 Galería intercalada de imágenes
- 4.5 Resultados con cifras
- 4.6 Testimonio del cliente
- 4.7 Caso siguiente
- 4.8 Footer
SERVICIOS
- 5.1 Header
- 5.2 Hero de página
- 5.3 Lista de servicios expandible con detalle
- 5.4 Metodología en pasos
- 5.5 Tecnologías y herramientas en grid
- 5.6 Banner CTA
- 5.7 Footer
BLOG
- 6.1 Header
- 6.2 Hero con artículo destacado grande
- 6.3 Filtros por categoría en chips
- 6.4 Grid de artículos en 3 columnas
- 6.5 Paginación
- 6.6 Footer
DETALLE ARTÍCULO
- 7.1 Header
- 7.2 Hero con título, autor, fecha e imagen
- 7.3 Cuerpo del artículo con tipografía editorial
- 7.4 Bloque de autor
- 7.5 Artículos relacionados
- 7.6 Footer
EMPLEO
- 8.1 Header
- 8.2 Hero con manifiesto cultural
- 8.3 Beneficios en grid de 6
- 8.4 Lista de vacantes abiertas con departamento y ubicación
- 8.5 Proceso de selección en pasos
- 8.6 Footer
TIENDA
- 9.1 Header
- 9.2 Hero de tienda con categorías
- 9.3 Grid de productos con filtros laterales
- 9.4 Vista rápida de producto en modal
- 9.5 Footer
CONTACTO
- 10.1 Header
- 10.2 Hero con título grande
- 10.3 Formulario amplio a la izquierda y datos de contacto a la derecha
- 10.4 Mapa de ubicación
- 10.5 Footer
PROMPTS RELACIONADOS · BELLEZA / SPA
