NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web estático usando HTML, Tailwind CSS CDN y JavaScript vanilla en un único archivo. La marca ficticia es Academia Lumen (dominio academialumen.com, email hola@academialumen.com, claim "Ideas que cobran vida en pantalla"). El proyecto es un portafolio creativo con la siguiente estructura y estilo:
**Paleta de colores**: #0A0A0A (negro profundo), #FFFFFF (blanco), #FF6F61 (coral vibrante), #F4F4F4 (gris claro), #1A1A1A (gris casi negro) para fondos y textos.
**Tipografía**: Inter (sans‑serif) para párrafos y títulos, peso 400‑600, tamaños escalables mediante Tailwind.
**Header** (presente en todas las páginas): logo de texto "Academia Lumen" en color coral, menú horizontal con enlaces Home, About, Services, Projects, Blog, Contact. En móvil, colapsa a un ícono hamburguesa qu
4.956 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.956 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 con logo y menú responsive
- 1.2 Hero: saludo, nombre, descripción, botón "HABLEMOS"
- 1.3 Texto grande de fondo "Portfolio digital"
- 1.4 Video de fondo autoplay con títulos "DISEÑADOR UI", "DISEÑADOR DE PRODUCTO", "DISEÑADOR DE MARCA"
- 1.5 Bloque About: título inspirador y botón "SABER MÁS"
- 1.6 Footer: logo, enlaces de navegación, iconos sociales, datos de contacto
ABOUT
- 2.1 Header idéntico al Home
- 2.2 Sección presentación detallada del equipo y filosofía
- 2.3 Galería de imágenes estáticas
- 2.4 CTA para contactar
SERVICES
- 3.1 Header
- 3.2 Lista de servicios con iconos y descripción breve
- 3.3 Caso de estudio destacado
- 3.4 CTA "VER PROYECTOS"
PROJECT
- 4.1 Header
- 4.2 Grid de proyectos con hover animado
- 4.3 Detalle de proyecto seleccionado
- 4.4 Botón volver al listado
CONTACT
- 5.1 Header
- 5.2 Formulario de contacto simple (nombre, email, mensaje)
- 5.3 Mapa estático integrado
- 5.4 Información de contacto y redes
BLOG
- 6.1 Header
- 6.2 Lista de artículos en formato tarjeta
- 6.3 Sidebar con categorías y archivo
- 6.4 CTA suscripción al boletín
PROMPTS RELACIONADOS · EDUCACIÓN
