ENTRETENIMIENTO · Claude Design · HTML

LumenForge — Prompt de diseño web para Claude AI

★★★★★4,7 1.716 descargas

Agencia creativa de diseño digital y desarrollo web Ideas que brillan en pantalla.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT GPT Image 2

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea un sitio web estático para la marca ficticia LumenForge (agencia creativa) usando solo HTML, Tailwind CSS CDN y JavaScript vanilla en un único archivo. El proyecto debe reproducir fielmente la estructura y estilo del sitio original analizado, sin copiar texto ni imágenes reales.

**Alcance**
- Header fijo con logo a la izquierda y menú hamburguesa circular a la derecha. Al hacer clic, se despliega un overlay de navegación con enlaces numerados (01 Home, 02 About, 03 Work, 04 News, 05 Contact). Cada enlace muestra un número gris y texto doble (texto completo y texto en capa). El menú debe animarse con rotación del ícono y expansión del círculo.
- Hero principal: sección a pantalla completa con fondo oscuro, botón de reproducción de video (solo placeholder) que abre un lightbox, subtítulo animado (fade‑in), botón principal "Solicita una propuesta" con flecha que se desliza al entrar.
- Indicador de scroll down centrado bajo el hero usando una animación Lottie (puedes usar un JSON dummy). Formas circulares decorativas flotantes en el fondo (dos SVGs grandes con opacidad baja).
- Sección "Work": título grande "Work" con tipografía display‑1, flecha decorativa animada a la derecha. Grid responsive de proyectos (4‑col en desktop, 2‑col en tablet, 1‑col en móvil). Cada tarjeta contiene una imagen de proyecto, overlay circular que al hover muestra un icono Lottie de ojo y texto rotativo con tres copias del nombre del proyecto (animación de rotación vertical). Usa clases Tailwind para efectos de opacidad y transición.
- Footer: barra inferior con logo pequeño centrado, iconos de redes sociales (Twitter, Instagram, LinkedIn, Dribbble) dentro de círculos con efecto hover, y dos formas decorativas circulares en la esquina inferior.

**Paleta de colores** (extraída del original):
- #0A0A0A (fondo principal negro intenso)
- #FFFFFF (texto principal)
- #CCCCCC (gris para números y subtítulos)
- #FF6F61 (accento coral para botones y highlights)
- #555555 (gris medio para elementos secundarios)

**Tipografía**: Usa Inter para cuerpo y títulos, peso 400‑700, tamaño adaptable con clases Tailwind (text-4xl, lg:text-6xl, etc.).

**Requisitos técnicos**
- Incluir Tailwind CSS vía CDN (`<script src="https://cdn.tailwindcss.com"></script>`). Configura colores personalizados en `tailwind.config` inline si es necesario.
- Añadir script al final del body para manejar el toggle del menú y las animaciones de entrada (IntersectionObserver para fade‑in de bloques).
- Todas las imágenes pueden ser placeholders (`https://via.placeholder.com/600x400`). Los Lottie pueden cargarse con `<lottie-player src="https://assets9.lottiefiles.com/packages/lf20_dummy.json" background="transparent" speed="1" loop autoplay></lottie-player>`.
- Mantener el HTML semántico (header, nav, main, section, footer).
- El archivo debe ser autocontenido y listo para abrir en el navegador sin dependencias externas más allá de Tailwind CDN y Lottie CDN.

Entregue el código completo listo para copiar‑pegar.

---

## 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>
```

3.346 caracteres · 43 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Header con logo, menú hamburguesa circular y enlaces numerados
1.2 Hero con video destacado, subtítulo animado, botón con flecha y scroll indicator
1.3 Sección "Work" con título grande, flecha decorativa y galería de proyectos en grid, cada pieza con foto, overlay circular y texto rotativo
1.4 Footer con logo reducido, enlaces de redes sociales y formas decorativas

ABOUT

1.1 Header igual que en Home
1.2 Hero con encabezado y texto descriptivo
1.3 Bloque de valores o equipo en columnas
1.4 Footer igual que en Home

WORK

1.1 Header
1.2 Hero con título "Work" y flecha decorativa
1.3 Grid de proyectos (misma estructura que en Home) con filtros opcionales
1.4 Footer

BLOG

1.1 Header
1.2 Lista de artículos con imágenes y excerpt
1.3 Sidebar con categorías y suscripción
1.4 Footer

CONTACT

1.1 Header
1.2 Formulario de contacto con campos nombre, email, mensaje y botón animado
1.3 Información de contacto y mapa incrustado
1.4 Footer

PROMPTS RELACIONADOS · ENTRETENIMIENTO

Otros prompts de la misma categoría

Ficha de marca

Nombre: LumenForge
Sector: Agencia creativa de diseño digital y desarrollo web
Claim: Ideas que brillan en pantalla

Bloques de la home

1.1 Header con logo, menú hamburguesa circular y enlaces numerados 01‑05
1.2 Hero con video destacado, subtítulo animado, botón con flecha y scroll indicator
1.3 Sección "Work" con título grande, flecha decorativa y galería de proyectos en grid, cada pieza con foto, overlay circular y texto rotativo
1.4 Footer con logo reducido, enlaces de redes sociales y formas decorativas

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

LumenForge — Prompt de diseño web para Claude AI

Cópialo y pégalo en Claude Design

Tabla de secciones

HOME

ABOUT

WORK

BLOG

CONTACT

Otros prompts de la misma categoría

Ludicra Studios

Ludoteca Nova

LumenArtes

Lúmina Arte