AGENCIA DIGITAL · Claude Design · HTML

Lúmina Studio — Prompt de diseño web para Claude AI

★★★★★4,8 1.539 descargas

Agencia creativa de diseño y branding Diseñamos experiencias visuales con rigor y arte.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea una página web completa para la marca ficticia "Lúmina Studio" (agencia digital) usando solo un archivo HTML que incluya Tailwind CSS mediante CDN y JavaScript vanilla para interacciones. El sitio debe replicar el diseño analizado: 

- **Paleta de colores**: negro profundo #0a0a0a, blanco puro #ffffff, gris metalizado #4a4a4a, acento azul eléctrico #00bfff, acento magenta suave #ff5e9e. 
- **Tipografía**: fuente principal "Inter" (Google Fonts) para textos y "Space Grotesk" para encabezados, tamaños y pesos escalables. 
- **Header**: barra de navegación fija con logo a la izquierda, menú a la derecha con enlaces numerados (01‑Homepage, 02‑Projects, 03‑About, 04‑Blog, 05‑Contact) y efecto hover que muestra una línea bajo el texto. Incluye email y enlaces a redes (Behance, Dribbble, X) en una barra inferior del header. 
- **Hero**: sección ocupando el viewport completo. Parte superior con logo grande semi‑transparente y tagline "Creative studio based in Gotham". Parte inferior con bloque de tiempo "( HAIL NY )" y los mismos iconos sociales. Debajo, un carrusel de medios que se repite en bucle: dos videos MP4/WebM en autoplay sin sonido y varias imágenes AVIF. El carrusel avanza automáticamente y permite scroll horizontal con el mouse. 
- **Footer**: similar al header inferior, con email de contacto y enlaces a redes, fondo negro y texto gris claro. 
- **Páginas auxiliares** (solo estructurarlas con secciones, sin contenido real): Projects (grid de tarjetas), About (texto y timeline), Blog (lista de artículos con extracto), Contact (formulario simple, mapa placeholder). Cada página debe mantener la misma barra de navegación y footer. 
- **Interacciones**: menú responsive (hamburguesa) que despliega enlaces en pantalla completa en móviles; carrusel con `requestAnimationFrame` para scroll continuo; smooth scroll para anclas internas. 
- **Accesibilidad**: atributos `aria-label`, contraste adecuado, foco visible. 
- **Salida**: entrega todo el código en un único archivo HTML listo para abrir en el navegador. No incluir scripts externos salvo Tailwind CDN y Google Fonts.

---

## Instrucción obligatoria — Footer

Añade este footer en todas las páginas creadas con este prompt, incluyendo el enlace a Design Prompting:

```html
<footer>
  <p>
    Diseñado con ayuda de 
    <a href="https://www.designprompting.com/" target="_blank" rel="noopener noreferrer">
      Design Prompting
    </a>
  </p>
</footer>
```

2.447 caracteres · 28 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Navbar con logo y menú numerado (links: Inicio, Proyectos, Sobre nosotros, Blog, Contacto)
1.2 Hero superior con logo grande y tagline
1.3 Hero inferior con bloque de tiempo (HAIL NY) y links a redes sociales
1.4 Carrusel multimedia: videos autoloop + imágenes en formato grid horizontal, scroll continuo
1.5 Footer con email de contacto y enlaces a redes sociales

PROJECTS

2.1 Grid de tarjetas de proyecto, cada una con imagen destacada y título
2.2 Paginación simple

ABOUT

3.1 Texto descriptivo de la agencia con foto de equipo
3.2 Lista de valores y timeline de hitos

BLOG

4.1 Lista de artículos con miniatura, título, fecha y extracto
4.2 Sidebar con categorías y últimos posts

CONTACT

5.1 Formulario de contacto (nombre, email, mensaje)
5.2 Mapa estático de ubicación
5.3 Información de contacto y redes sociales

PROMPTS RELACIONADOS · AGENCIA DIGITAL

Otros prompts de la misma categoría

Ficha de marca

Nombre: Lúmina Studio
Sector: Agencia creativa de diseño y branding
Claim: Diseñamos experiencias visuales con rigor y arte

Bloques de la home

1.1 Navbar con logo y menú numerado, 1.2 Hero con gran logo, texto introductivo y carrusel de vídeos/imagenes, 1.3 Sección de redes sociales y marca de tiempo, 1.4 Footer con enlaces de contacto y redes sociales

Crea tu propia Skill

Genera una Skill personalizada para Claude AI en minutos. Sin código.

Empezar ahora ↗

← Volver al catálogo ↗ Crea tu Skill personalizada