NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea una web completa en un único archivo HTML usando Tailwind CSS por CDN y JavaScript vanilla (sin frameworks) para la agencia ficticia BRUNELA STUDIO.
MARCA Y CONTEXTO
- Nombre: Brunela Studio
- Sector: Agencia digital de marketing y estrategia de marca
- Dominio: brunelastudio.com
- Email de contacto: hola@brunelastudio.com
- Claim: Estrategia, diseño y crecimiento para marcas que quieren avanzar
- Año: 2025
- Tono: claro, confiable, profesional pero cercano, español de España, verbos en activo, sin jerga marketinera ni precios concretos.
STACK Y ALCANCE
- Un solo archivo HTML autocontenido.
- Tailwind CSS vía CDN.
- JavaScript vanilla para: menú móvil, dropdown 'Páginas', marquesina infinita de logos, slider de testimonios, contador animado de métricas, acordeón FAQ, filtros de caso
7.496 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
7.496 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
INICIO (HOME)
- 1.1 Header con navegación y CTA
- 1.2 Hero a dos columnas con titular mixto sans+serif cursiva
- 1.3 Marquesina de logos de clientes
- 1.4 Grid de servicios destacados
- 1.5 Bloque sobre la agencia con métricas
- 1.6 Galería de casos de éxito
- 1.7 Proceso de trabajo en 4 pasos
- 1.8 Testimonios en slider
- 1.9 Equipo destacado
- 1.10 Últimas entradas del blog
- 1.11 CTA final
- 1.12 Footer completo
SOBRE NOSOTROS
- 2.1 Header
- 2.2 Hero de página interior con titular y breadcrumb
- 2.3 Historia de la agencia con imagen lateral
- 2.4 Misión, visión y valores en tres tarjetas
- 2.5 Métricas globales (proyectos, clientes, años)
- 2.6 Equipo completo en grid
- 2.7 Reconocimientos y premios
- 2.8 CTA final
- 2.9 Footer
SERVICIOS
- 3.1 Header
- 3.2 Hero interior
- 3.3 Listado de servicios con tarjeta amplia (icono, título, descripción, enlace)
- 3.4 Bloque de beneficios diferenciales
- 3.5 CTA intermedio
- 3.6 FAQ acordeón
- 3.7 Footer
SERVICIO DETALLE
- 4.1 Header
- 4.2 Hero del servicio con breadcrumb
- 4.3 Descripción larga con imagen
- 4.4 Qué incluye en checklist
- 4.5 Proceso específico del servicio
- 4.6 Casos relacionados
- 4.7 CTA final
- 4.8 Footer
CASOS DE ÉXITO
- 5.1 Header
- 5.2 Hero interior con filtros por categoría
- 5.3 Grid masonry de casos
- 5.4 CTA final
- 5.5 Footer
CASO DETALLE
- 6.1 Header
- 6.2 Hero con imagen grande del proyecto
- 6.3 Ficha de proyecto (cliente, sector, año, servicios)
- 6.4 Reto y solución en dos columnas
- 6.5 Galería de imágenes del proyecto
- 6.6 Resultados con métricas
- 6.7 Testimonio del cliente
- 6.8 Casos relacionados
- 6.9 Footer
EQUIPO
- 7.1 Header
- 7.2 Hero interior
- 7.3 Grid de tarjetas del equipo con foto, rol y redes
- 7.4 Bloque de cultura y valores
- 7.5 CTA de empleo 'Únete al equipo'
- 7.6 Footer
BLOG
- 8.1 Header
- 8.2 Hero interior con buscador
- 8.3 Post destacado en tarjeta ancha
- 8.4 Grid de artículos con categoría, fecha y autor
- 8.5 Paginación
- 8.6 Footer
BLOG DETALLE
- 9.1 Header
- 9.2 Cabecera del artículo con título, autor, fecha e imagen
- 9.3 Contenido del artículo con tipografía cuidada
- 9.4 Bloque de compartir y tags
- 9.5 Artículos relacionados
- 9.6 Footer
CONTACTO
- 10.1 Header
- 10.2 Hero interior
- 10.3 Formulario de contacto a dos columnas con datos de la agencia
- 10.4 Mapa o bloque de ubicación
- 10.5 FAQ corto
- 10.6 Footer
PROMPTS RELACIONADOS · CORPORATIVO
