TECNOLOGÍA · Claude Design · HTML

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

★★★★★4,8 613 descargas

Agencia de diseño y consultoría digital Soluciones visuales que simplifican la complejidad.

↓ 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 **Lúmina Creativa** (agencia de diseño y consultoría digital) siguiendo las especificaciones siguientes. Utiliza **HTML estático**, **Tailwind CSS vía CDN** y **JavaScript vanilla** en un solo archivo. Aplica la paleta de colores: fondo #FFFFFF, texto principal #111111, acentos #0D6EFD (azul eléctrico) y #F5F5F5 (gris claro). Tipografía: **Inter** para cuerpos y **Playfair Display** para encabezados, ambas importadas desde Google Fonts.

**Estructura global**
- `<header>`: barra de navegación fija, logo a la izquierda, enlaces de menú (Home, Projects, Services, About, Blog) repetidos dos veces para simular el efecto original, botón "Contact" a la derecha con flecha animada. En móvil, colapsa a menú hamburguesa.
- `<main>` contiene las secciones enumeradas:
  1. **Hero**: contenedor centrado, título grande con variantes para escritorio y móvil ("Creative Design Solution Agency"), subtítulo "Based in London | Working worldwide", párrafo descriptivo y una fila de 5 imágenes que se desplazan ligeramente al hacer scroll (usar `intersectionObserver` y clase `scale-110` para efecto zoom). Fondo neutro.
  2. **Featured Work**: encabezado "Featured Work" y subtítulo "Explore our featured works", breve descripción, cuadrícula responsive 2‑3 columnas de tarjetas de proyecto. Cada tarjeta muestra imagen, título y etiqueta (ej. "Branding – 2018"). Al pasar el cursor, la imagen se amplía (transform `scale-125`).
  3. **Footer**: fondo #111111, texto claro, enlaces de navegación replicados, datos de contacto (email, dirección ficticia) y iconos de redes sociales.
- `<footer>`: mismo que el footer descrito.

**Requisitos técnicos**
- Incluir `<meta name="viewport" content="width=device-width, initial-scale=1">`.
- Importar Tailwind CDN: `<script src="https://cdn.tailwindcss.com"></script>` y configurar tema con los colores personalizados.
- Importar fuentes Inter y Playfair Display.
- Usar `flex`, `grid` y utilities de Tailwind para responsividad.
- Implementar menú hamburguesa con JavaScript que añada/quita la clase `hidden` al menú móvil.
- Implementar animación de imágenes del hero con `IntersectionObserver` para añadir clase `opacity-100 translate-y-0` al entrar en viewport.
- No incluir contenido copiado; generar textos originales en español de España.
- Mantener código limpio, semántico y accesible (uso de `aria-label` en botones y `alt` descriptivo en imágenes).

Entrega todo el código dentro de un único archivo `index.html` listo para abrir en el navegador.

---

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

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Barra de navegación fija con logo, enlaces duplicados y botón de contacto
1.2 Hero con títulos superpuestos, texto descriptivo y galería de imágenes animada
1.3 Sección "Trabajo destacado" con cuadrícula de proyectos y etiquetas
1.4 Footer con enlaces de navegación y datos de la empresa

PROJECTS

1.1 Lista de proyectos en cuadrícula con imagen, título y categoría
1.2 Paginación o carga incremental

SERVICES

1.1 Descripción de servicios en bloques con iconos y texto
1.2 CTA para solicitar presupuesto

ABOUT

1.1 Historia de la agencia con imagen y texto
1.2 Valores y equipo

BLOG

1.1 Lista de artículos con miniatura, título y extracto
1.2 Sidebar con categorías y newsletter

CONTACT

1.1 Formulario de contacto sencillo
1.2 Información de ubicación y redes sociales

PROMPTS RELACIONADOS · TECNOLOGÍA

Otros prompts de la misma categoría

Ficha de marca

Nombre: Lúmina Creativa
Sector: Agencia de diseño y consultoría digital
Claim: Soluciones visuales que simplifican la complejidad

Bloques de la home

1.1 Barra de navegación fija con logo, enlaces duplicados y botón de contacto
1.2 Hero con títulos superpuestos, texto descriptivo y galería de imágenes animada
1.3 Sección "Trabajo destacado" con cuadrícula de proyectos y etiquetas
1.4 Footer con enlaces de navegación y datos de la empresa

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