PORTAFOLIO · TailwindCSS · GSAP · Lenis

Diseño Aurora – Theme creativo para estudios de diseño visual

★★★★★4,7 600 descargas

Tema estático en HTML5 con TailwindCSS para Diseño Aurora, estudio de diseño visual. Incluye preloader animado, barra lateral, galería interactiva y footer con enlace a Design Prompting.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea un sitio web estático completo para la marca ficticia "Diseño Aurora" (disenoaurora.com), un estudio creativo de diseño visual. Usa HTML5, TailwindCSS vía CDN y JavaScript vanilla en un único archivo. Implementa la siguiente paleta de colores: fondo #FAFAFA, texto principal #111111, acentos #0066FF, cajas #E5E5E5, hover #0044CC. Tipografía: encabezados con "Playfair Display" (importada de Google Fonts) y cuerpo con "Inter" (Google Fonts). 

Estructura y funcionalidades:
- Preloader centrado con animación de texto "Lumen/Atelier" y contador de carga del 0% al 100% usando GSAP (incluye CDN). 
- Header fijo tipo barra lateral izquierda: logo textual "Diseño Aurora", enlaces: Trabajo, Sobre Nosotros, Blog, Contacto; selector de tema claro/oscuro que invierte la paleta; reloj en tiempo rea

■µ╣↓└┴┴╡ ♣α±╚♦δε ─╗◘²◙▒═ ♠┬↔╣╔ε² τ▒ε═α▀▀ π±↔▒▒┤█ ←║╝├╩╔
 └┴▒┬▒┬± ↑φßΣ→█Φ Ω╩▒◘◘┴ε ♠┴═├≥↑Σ ε└╔└╝╚│ ═█²■┼δσ █╚└┬╬
♣ •µ↓→─◘♣ Ω╬²♣σⁿß ╚└♣╔→≥← ♠◘╔░╩╔Ω ░╠•±±♦▀ ß┼♦↓σ♦├ Ω•Ω╩
↔┬ ╩┤↓≡╚τ╗ φ─┤♣╔∩Φ ♦░↓█▀±→ █■▀α∩²↔ ├•╡╝√╣≥ ─◘α♣◙δ╣ √─↓
♦╠┴ ≡σ╫═─♦≤ Φ≥∞╬√←ⁿ ─♦╠σ╗├♣ ╠╠╬↑╗╬Σ →─φ╬µτµ ♦♠╝←╬╔╗ ──
•║∞║ πφ║δα╬♣ Ω±µ╔Σ╔Σ ↓τ─╣↔∩♠ →┼→♦┤♠• δ■╫╫╣↔▒ ≥ε↓├╗╣← ─
╡²π√∞ ↓│┼√▓♦├ ♣ε╫↔∩≤┤ ╝◙┤↑│ε╡ ≤╫◘┤σ◘ß ▒Φ◘↓√╬Φ └┼│•◘²² 
≥╦║═µ┬ ∩├α┬┤φ└ ▓╔ß◘┤ε╬ ♣├▒≡√Φε ▓√┴εφ═█ ╩╔τ┤♦ⁿ■ ▀µ∞┴Ω┴σ
╡√■≥±α┴ ≡│ß─▒▒▒ │²±╦π┼├ ═╫→♦φΦ≤ ╣↓≡╩╗≥▀ σ│∞╡┬╚╝ ⁿ♠±→╚Ω
 Στ♦≡²ε♣ ┤◙♦εα█ε ┴π┬♣╣σδ τ┴♠α≡╠↓ ░╗┼█δ▓≤ ░░↑≡╔√◙ ┴═╗ßΩ
→ ■♠≤▒│♣ⁿ │↔φ┼↔┼♠ ││π░▒→╡ █≤├├▀Φα ατ•═εµ┬ ↓◙∞♦↓Φφ

3.755 caracteres · solo descargable completo ↓ Descargar PROMPT.md completo

3.755 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 navegación con logo, enlaces a Trabajo, Sobre nosotros, Blog y Contacto, selector de tema claro/oscuro y datos de ubicación
1.2 Preloader animado que muestra el nombre del estudio y porcentaje de carga
1.3 Sección hero con encabezado descriptivo y botón opcional
1.4 Galería de proyectos: tarjetas con imagen, nombre del proyecto y categoría, desplazamiento horizontal infinito
1.5 Footer con reloj en tiempo real, ubicación y enlaces de redes sociales