PORTAFOLIO · Claude Design · HTML

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

★★★★★4,6 321 descargas

Agencia creativa de branding y diseño digital Ideas que cobran forma.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea un sitio web completo para la marca ficticia "Lúmina Estudio" (luminaestudio.com), agencia digital de branding y diseño. Usa HTML + Tailwind CDN (v3) + JavaScript vanilla en un solo archivo. Paleta de colores: negro puro #000000, blanco #FFFFFF, gris medio #6B7280, azul profundo #1E3A8A, acento azul claro #60A5FA. Tipografía: Headings con "Inter" (font-weight 700), cuerpo con "Roboto" (font-weight 400). 

**Header**: barra fija, fondo semi‑transparente con efecto glass, logo a la izquierda (svg placeholder), menú horizontal con enlaces Home, Sobre nosotros, Servicios, Proyectos, Blog, Contacto. En móvil, colapsar a botón hamburguesa que despliega overlay con fondo difuminado.

**Home**: 
1. Hero: sección a pantalla completa, fondo oscuro con degradado, texto centrado: línea pequeña "Since — 2010™", título grande "Lúmina Estudio", subtítulo "Ideas que cobran forma" y botón CTA "Descubre".
2. Galería mosaico: grid de 3 columnas en desktop, 2 en tablet, 1 en móvil, imágenes de alta calidad (placeholder) con ligera animación de escala al pasar el cursor.
3. Servicios: tres columnas, cada una con ícono (svg), título y breve descripción.
4. Proyectos destacados: tarjetas con imagen, título, breve texto y efecto hover que muestra botón "Ver proyecto".
5. Blog reciente: lista de 3 artículos con miniatura, título, fecha y extracto.
6. Footer: fondo negro, texto gris claro, columnas con: información de contacto, enlaces rápidos (Home, Sobre, Servicios...), iconos de redes sociales (svg). Incluye copyright.

**Páginas internas** (About, Services, Projects, Blog, Contact) replican la estructura del header y footer y añaden los bloques descritos en la tabla, con contenido ficticio y placeholders.

**Interacciones**: smooth scroll para anclas, transición de color en enlaces, animación de entrada de secciones al hacer scroll (use IntersectionObserver), menú hamburger con toggle de clase.

**Requisitos técnicos**: HTML semántico, clases de Tailwind para spacing, tipografía, colores y layout. Incluir CDN de Tailwind (`https://cdn.tailwindcss.com`) y de Google Fonts para Inter y Roboto. JS inline al final del body para menú responsive y scroll animations. Todas las imágenes usan atributos `loading="lazy"` y `srcset` para diferentes resoluciones. El código debe ser limpio, sin referencias externas a la web original.

---

## 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.685 caracteres · 34 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Encabezado fijo con logo y menú de navegación
1.2 Hero principal con año fundación, título de marca y descripción breve
1.3 Galería visual tipo mosaico animado
1.4 Bloque de servicios resaltados en columnas
1.5 Sección de proyectos destacados con tarjetas
1.6 Últimas entradas del blog en formato lista
1.7 Pie de página con datos de contacto, enlaces rápidos y redes sociales

ABOUT

1.1 Encabezado de página con título "Sobre nosotros"
1.2 Texto descriptivo de la agencia y su historia
1.3 Equipo en tarjetas con foto y breve biografía
1.4 Valores y metodología en bloques con iconos
1.5 Llamada a la acción para contactar

PROJECTS

1.1 Encabezado de página con título "Proyectos"
1.2 Filtro por categoría
1.3 Cuadrícula de proyectos en tarjetas con imagen y hover
1.4 Paginación inferior

SERVICES

1.1 Encabezado de página con título "Servicios"
1.2 Lista de servicios en tarjetas con icono y descripción
1.3 Caso de estudio destacado
1.4 Formulario de solicitud rápida

BLOG

1.1 Encabezado de página con título "Blog"
1.2 Lista de artículos con imagen, título y extracto
1.3 Sidebar con categorías y newsletter
1.4 Paginación

CONTACT

1.1 Encabezado de página con título "Contacto"
1.2 Formulario de contacto completo
1.3 Mapa incrustado
1.4 Información de contacto y redes sociales

PROMPTS RELACIONADOS · PORTAFOLIO

Otros prompts de la misma categoría

Ficha de marca

Nombre: Lúmina Estudio
Sector: Agencia creativa de branding y diseño digital
Claim: Ideas que cobran forma

Bloques de la home

1.1 Encabezado fijo con logo y menú de navegación
1.2 Hero principal con año fundación, título de marca y descripción breve
1.3 Galería visual tipo mosaico animado
1.4 Bloque de servicios resaltados en columnas
1.5 Sección de proyectos destacados con tarjetas
1.6 Últimas entradas del blog en formato lista
1.7 Pie de página con datos de contacto, enlaces rápidos 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