EDUCACIÓN · Claude Design · HTML

LumenArq — Prompt de diseño web para Claude AI

★★★★★4,9 4.663 descargas

Estudio de arquitectura y diseño de interiores Espacios que inspiran.

↓ 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 **LumenArq**, estudio de arquitectura y diseño de interiores, siguiendo el estilo visual y estructural del sitio analizado. Utiliza únicamente HTML, Tailwind CSS (CDN) y JavaScript vanilla en un único archivo. 

**Alcance**
- Genera todas las páginas listadas en la tabla (HOME, ABOUT, PROJECT, NEWS, CONTACT) con la misma arquitectura de componentes. 
- Cada página debe incluir el mismo header y footer reutilizados mediante componentes HTML simples (puedes usar <template> y clonarlos con JS). 
- El diseño debe ser **oscuro** con acentos claros, tipografía principal **"Inter"** (Google Fonts) para textos y **"Playfair Display"** para encabezados. 
- Paleta de colores: 
  - Fondo principal: #0A0A0A 
  - Texto principal: #E5E5E5 
  - Acento primario: #FF7F50 
  - Acuerdo secundario: #2C2C2C 
  - Botón primario: #FF7F50 con hover #FF9566 
- Header: logo alineado a la izquierda, menú horizontal centrado (Home, About, Project, News, Contact) con efecto de subrayado animado, hamburguesa que abre un panel lateral en móvil mostrando el mismo menú y datos de contacto (teléfono, email, dirección). 
- Hero Home: sección full‑screen, fondo de imagen de arquitectura (placeholder) con overlay negro 30 % y texto centrado. Título estático "Más que arquitectura," y debajo un slider de frases ("diseñamos el futuro", "entregamos precisión", "creamos lo que importa", "modelamos espacios modernos"). Animación de texto tipo fade‑in cada 4 s. Logo grande semi‑transparente detrás del texto. 
- Bloque "Sobre LumenArq": contenedor con fondo #2C2C2C, texto alineado a la izquierda, título h2 grande, párrafo descriptivo y botón redondeado que lleva a /about. 
- Sección de proyectos: grid responsivo 3‑col en escritorio, 2‑col en tablet, 1‑col en móvil. Cada celda muestra una imagen (placeholder) o video (autoplay, loop, muted) con overlay y botón play/pause personalizado. Implementa scroll horizontal automático (marquee) que repite las tarjetas. 
- Footer: fondo #0A0A0A, columnas con logo, texto institucional, datos de contacto (teléfono, email, dirección) y botón redondo "Solicitar información" que enlaza a /contact. En móvil, columnas se apilan. 
- Página About: hero similar con imagen diferente, texto extenso sobre filosofía, sección de equipo con tarjetas (foto redonda, nombre, puesto). 
- Página Project: galería filtrable (categorías placeholder) usando JS para mostrar/ocultar, detalle del proyecto con carrusel de imágenes y descripción. 
- Página News: lista de artículos en cards, cada una con imagen, título, extracto y enlace "Leer más". Paginación simple al fondo. 
- Página Contact: formulario con campos nombre, email, mensaje; validación JS (required, email format). Mensaje de éxito simulado. Incluye mapa estático usando un iframe de Google Maps con coordenadas ficticias. 
- Interacciones: botones con transición suave, enlaces subrayados animados, menú hamburguesa toggle, video play/pause overlay, slider de frases en hero, marquee de proyectos. 
- Accesibilidad: atributos alt en imágenes, roles ARIA para menús y botones, contraste suficiente. 
- Optimiza para SEO básico: etiquetas meta, título dinámico por página, encabezados jerárquicos. 

**Entrega**: un solo archivo index.html que contenga todo el código (HTML, <style> con @import de Tailwind CDN y fuentes, <script> con lógica JS). Usa clases Tailwind para todo el estilo, sin CSS externo. No incluir ninguna URL del sitio 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>
```

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

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Header con logo y navegación principal
1.2 Hero con título principal, texto rotativo y fondo de imagen
1.3 Bloque "Sobre LumenArq" con subtítulo, título y botón
1.4 Sección de proyectos: grid de imágenes, video con autoplay y controles de play/pause
1.5 Footer con texto institucional, datos de contacto y botón "Solicitar información"

ABOUT

2.1 Header (reutilizado)
2.2 Hero secundario con imagen de fondo y título
2.3 Texto descriptivo del estudio y valores
2.4 Equipo (tarjetas con foto y descripción)
2.5 Footer

PROJECT

3.1 Header
3.2 Galería filtrable de proyectos (grid responsivo)
3.3 Detalle de proyecto: carrusel de imágenes, descripción y datos técnicos
3.4 Footer

NEWS

4.1 Header
4.2 Lista de artículos con imagen, título y extracto
4.3 Paginación simple
4.4 Footer

CONTACT

5.1 Header
5.2 Formulario de contacto (nombre, email, mensaje) con validación JS
5.3 Mapa estático incrustado
5.4 Footer

PROMPTS RELACIONADOS · EDUCACIÓN

Otros prompts de la misma categoría

Ficha de marca

Nombre: LumenArq
Sector: Estudio de arquitectura y diseño de interiores
Claim: Espacios que inspiran

Bloques de la home

1.1 Header con logo, menú horizontal y hamburguesa móvil
1.2 Hero full‑screen con título estático y slides de texto, fondo de imagen y logo central
1.3 Bloque "Sobre LumenArq" con subtítulo, encabezado y botón CTA
1.4 Sección de proyectos en carrusel/scroll con imágenes y video de fondo
1.5 Footer con información de contacto y botón redondo de llamada a la acción

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