BLOG / REVISTA · Claude Design · HTML

LumenAtlas — Prompt de diseño web para Claude AI

★★★★★4,9 2.002 descargas

Plataforma digital de diarios personales y colecciones de recuerdos Espacios íntimos para tus pensamientos.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea un sitio web completo basado en la marca ficticia LumenAtlas (plataforma digital de diarios personales). Usa HTML, Tailwind CSS vía CDN y JavaScript vanilla en un solo archivo. La paleta de colores debe ser tonos oscuros y neutros con acentos blancos y gris suave: #111111, #222222, #333333, #FFFFFF, #CCCCCC. Utiliza la tipografía "Inter" para cuerpo y "Playfair Display" para encabezados. 

Estructura:
- HEADER fijo con logo (texto LumenAtlas), menú ancla (Sobre Nosotros, Destacados, Galería, Journal) y barra lateral con email, ubicación y teléfono. Incluye iconos sociales (Instagram, X, WhatsApp) usando SVG.
- HERO ocupa pantalla completa con video de fondo (loop, muted, autoplay) y overlay difuso. Título grande dividido en dos líneas: "Silent" y "Notes" con tipografía Playfair, colores blanco. Subtítulo descriptivo y botón primario "Continuar leyendo" que enlaza a la sección Journal.
- SECCIÓN "Sobre Nosotros" con animación de título en tres palabras (p.ej. "One of Many") usando efectos de fade‑in y desplazamiento. Galería doble de imágenes interiores y retratos, cada imagen con efecto hover de escala ligera. Texto descriptivo a la derecha y botones internos (Home, Journal) con iconos.
- SECCIÓN "Galería" con cuadrícula responsive de 3 columnas en desktop, 2 en tablet y 1 en móvil. Cada tarjeta muestra una imagen y un overlay que revela el título al pasar el cursor.
- SECCIÓN "Journal" muestra tarjetas de entradas de blog: miniatura, título, breve extracto y enlace "Leer más". Botón "Cargar más" al final.
- FOOTER con tres columnas: contacto (email, teléfono, ubicación), enlaces de navegación y redes sociales. Texto de derechos reservados.

Requisitos técnicos:
- Todos los componentes deben ser accesibles (aria‑labels, contraste suficiente).
- Animaciones con CSS (transiciones y keyframes) y JavaScript minimal para el menú hamburguesa en móviles y para el botón cargar más (simulación).
- Código limpio, sin dependencias externas más allá de Tailwind CDN y Google Fonts.
- Incluir comentarios HTML que describan cada bloque.

Entrega el código listo para copiar‑pegar en un archivo index.html.

---

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

CAPTURA COMPLETA · HOME

PROMPTS RELACIONADOS · BLOG / REVISTA

Otros prompts de la misma categoría

Ficha de marca

Nombre: LumenAtlas
Sector: Plataforma digital de diarios personales y colecciones de recuerdos
Claim: Espacios íntimos para tus pensamientos

Bloques de la home

1.1 Barra de navegación fija con logo, menú de anclaje y contactos sociales
1.2 Hero video de fondo con título dividido y llamado a la acción
1.3 Sección “Sobre Nosotros” con encabezados animados y galería de imágenes dobles
1.4 Sección “Galería Destacada” (no incluida en el extracto pero implícita por el menú)
1.5 Sección “Journal” con enlaces a entradas de diario
1.6 Footer con información de contacto y enlaces 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

LumenAtlas — Prompt de diseño web para Claude AI

Cópialo y pégalo en Claude Design

Otros prompts de la misma categoría

Cortexia Labs

JurisNova

LogiFlux

Lúcida Blog