BELLEZA / SPA · Claude Design · HTML

LumenForge — Prompt de diseño web para Claude AI

★★★★★4,7 2.529 descargas

Agencia de diseño y marketing digital Ideas que iluminan tu negocio.

↓ 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 LumenForge, agencia de diseño y marketing digital. Utiliza solo HTML, Tailwind CSS vía CDN y JavaScript vanilla en un único archivo. La paleta de colores debe incluir:
- Fondo oscuro: #0A0A0A
- Texto principal: #FFFFFF
- Destacados/acolores de acento: #F5A623 (ámbar), #00C9A7 (turquesa), #E94F7A (rosa);
Tipografía: Inter (Google Fonts) para títulos y cuerpo, tamaños responsive (h1 4xl, h2 3xl, párrafos 1xl). 
Estructura y bloques:
1. Header: barra fija, logo a la izquierda (placeholder), menú colapsable para móvil con icono hamburguesa, enlaces: Home, Services, Portfolio, Blog, Contact. Botón destacado "Ver todo" a la derecha.
2. Hero: sección a pantalla completa con fondo degradado oscuro, título grande "Ready to elevate your brand with strategic advertising?", subtítulo breve, botón principal "Get In Touch" (link a #contact), iconos de redes sociales (Instagram, Facebook) y badges transparentes con palabras clave (Branding, Marketing, Product Design, Web Development). Añade una pequeña etiqueta superior "Booking Open — 2 Spots Left".
3. Clients Trusted: título centrado, texto descriptivo, cuadrícula de logos de clientes (45x45px placeholders) en dos filas, animación sutil al hacer scroll.
4. Services: título "Our Services", descripción, cuadrícula de 4 tarjetas con icono placeholder, título del servicio y texto breve.
5. Portfolio: título "Our Work", filtros de categoría (All, Branding, Web, Marketing), cuadrícula de 6 tarjetas de proyecto con imagen, título y categoría.
6. Blog: título "Latest Insights", lista de 3 artículos con imagen, título, fecha y extracto, enlace "Read more".
7. Contact: formulario simple (Nombre, Email, Mensaje) con validación mínima, botón "Send", y al lado datos de contacto (email, teléfono) y mapa estático (imagen placeholder).
8. Footer: fondo #151515, texto gris claro, columnas con enlaces de navegación, redes sociales, aviso legal y copyright 2026.
Requisitos técnicos:
- Todas las secciones deben ser accesibles y responsivas.
- Usa clases Tailwind para espaciado, tipografía y colores.
- Implementa scroll‑reveal simple con IntersectionObserver para animar la opacidad y traslación de cada bloque.
- El menú móvil debe abrir/cerrar con JavaScript sin dependencias externas.
- No incluir ningún contenido copiado del sitio original; generar textos originales en español de España.
- El archivo debe ser autocontenido y listo para abrirse 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.814 caracteres · 38 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Header con logo y menú colapsable
2.1 Hero con título, subtítulo, botones y enlaces a redes
3.1 Sección de clientes con carrusel de logos
4.1 Servicios en tarjetas con iconos y breves descripciones
5.1 Portafolio con cuadrícula de proyectos y filtros
6.1 Blog con vista previa de artículos
7.1 Footer con navegación secundaria, datos de contacto y redes sociales

SERVICES

1.1 Título de sección y descripción
1.2 Cuatro tarjetas de servicio con icono, título y texto breve

PORTFOLIO

1.1 Título de sección y filtro de categorías
1.2 Cuadrícula de 6 proyectos con imagen, título y categoría

BLOG

1.1 Título de sección y lista de 3 artículos destacados con imagen, fecha y extracto

CONTACT

1.1 Formulario simple (nombre, email, mensaje) y botón enviar
1.2 Información de contacto y mapa estático

FOOTER

1.1 Enlaces de navegación rápida
1.2 Redes sociales y aviso legal

PROMPTS RELACIONADOS · BELLEZA / SPA

Otros prompts de la misma categoría

Ficha de marca

Nombre: LumenForge
Sector: Agencia de diseño y marketing digital
Claim: Ideas que iluminan tu negocio

Bloques de la home

1.1 Header con logo y menú colapsable
2.1 Hero con título, subtítulo, botones y enlaces a redes
3.1 Sección de clientes con carrusel de logos
4.1 Servicios en tarjetas con iconos
5.1 Portafolio con cuadrícula de proyectos
6.1 Blog con lista de artículos
7.1 Footer con enlaces, 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