ARQUITECTURA · Claude Design · HTML

LumenArq — Prompt de diseño web para Claude AI

★★★★★4,9 1.037 descargas

Estudio de arquitectura y diseño de espacios Diseñamos entornos que trascienden.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea un website estático en un solo archivo HTML que reproduzca el diseño analizado, usando Tailwind CSS vía CDN y JavaScript vanilla (sin frameworks). Marca ficticia: LumenArq (estudio de arquitectura). Dominio ficticio: lumenarq.com. Paleta de colores: #0F172A (azul noche) como fondo principal, #1E293B (gris oscuro) para encabezados, #3B82F6 (azul accent) para botones y enlaces, #F1F5F9 (gris claro) para áreas de contenido, #FFFFFF para texto. Tipografía: Inter (Google Fonts) para todo el texto, con tamaños base 16px, h1 48px, h2 36px, h3 24px, peso 600. 

Estructura:
- Header fijo, fondo semi‑transparente, logo LumenArq, menú ancla (Featured, About, Portfolio, Service, Contact) y botón de contacto con icono de flecha.
- Hero ocupando viewport completo, fondo blanco, texto rotativo (3 titulares) con animación fade‑in/out, cada titular contiene frase principal + resaltado en negrita entre corchetes. Debajo, CTA "Elevating the Future of Built Environments" centrado.
- Sección Featured: video de fondo (autoplay, muted, loop) con overlay oscuro y subtítulo centrado.
- About: dos columnas, foto a la izquierda, texto a la derecha con título y párrafo descriptivo, fondo gris claro.
- Portfolio: grid de 3 columnas en desktop, 1 columna en móvil, tarjetas con imagen de proyecto y overlay que muestra nombre del proyecto al pasar el cursor.
- Service: fila de cuatro iconos (SVG inline) con título y breve descripción bajo cada uno, fondo blanco.
- CTA final: formulario simple (nombre, email, mensaje) centrado, botón "Enviar" con color accent, validación mínima con JS.
- Footer: fondo azul noche, columnas con enlaces de navegación, datos de contacto y redes sociales (icons SVG), texto pequeño en gris claro.

Requisitos técnicos:
- Incluir <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">.
- Tailwind CDN: <script src="https://cdn.tailwindcss.com"></script> y configurar colores personalizados vía tailwind.config.
- JS para menú hamburguesa (abrir/cerrar) y rotación de textos del hero.
- Mantener accesibilidad: atributos alt en imágenes, aria‑labels en botones, foco visible.
- Todo el contenido textual debe ser original en español de España, sin copiar del sitio fuente.
- No incluir imágenes reales; usa placeholders como https://via.placeholder.com/800x600.
- El archivo HTML debe ser autocontenido y listo para abrir en un 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.756 caracteres · 37 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Header con logo, menú ancla y botón de contacto
1.2 Hero con carrusel de titulares y frase complementaria
1.3 Sección Featured con video de fondo y subtítulo
1.4 About con texto descriptivo y foto del equipo
1.5 Portfolio en cuadrícula de proyectos con hover
1.6 Service con iconos y breve explicación
1.7 CTA final con formulario de contacto simple
1.8 Footer con navegación secundaria, redes y datos de contacto

ABOUT

1.1 Header (reutilizado)
1.2 Bloque de presentación con imagen y texto amplio
1.3 Valores destacados en columnas
1.4 Footer

PORTFOLIO

1.1 Header
1.2 Galería filtrable de proyectos (grid de tarjetas)
1.3 Detalle de proyecto (modal o página interna) – imágenes, descripción, datos técnicos
1.4 Footer

SERVICES

1.1 Header
1.2 Lista de servicios con iconos y textos breves
1.3 CTA de solicitud de presupuesto
1.4 Footer

CONTACT

1.1 Header
1.2 Formulario de contacto (nombre, email, mensaje)
1.3 Mapa incrustado (imagen estática)
1.4 Footer

PROMPTS RELACIONADOS · ARQUITECTURA

Otros prompts de la misma categoría

Ficha de marca

Nombre: LumenArq
Sector: Estudio de arquitectura y diseño de espacios
Claim: Diseñamos entornos que trascienden

Bloques de la home

1.1 Header con logo, menú ancla y botón de contacto
1.2 Hero con carrusel de titulares y frase complementaria
1.3 Sección Featured con video de fondo y subtítulo
1.4 About con texto descriptivo y foto del equipo
1.5 Portfolio en cuadrícula de proyectos con hover
1.6 Service con iconos y breve explicación
1.7 CTA final con formulario de contacto simple
1.8 Footer con navegación secundaria, redes y datos de contacto

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

LumenArq — Prompt de diseño web para Claude AI

Cópialo y pégalo en Claude Design

Tabla de secciones

HOME

ABOUT

PORTFOLIO

SERVICES

CONTACT

Otros prompts de la misma categoría

Línea Naranja

Línea Óptima

LíneaArq

LíneaEspacio Studio