AGENCIA DIGITAL · Claude Design · HTML

Luminara Studio — Prompt de diseño web para Claude AI

★★★★★4,9 4.080 descargas

Agencia creativa de diseño y experiencia de usuario Diseñamos interfaces que simplifican la vida.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crear una página web completa para la marca ficticia Luminara Studio, una agencia digital de diseño UX/UI. Usar solo HTML, Tailwind CSS vía CDN y JavaScript vanilla en un único archivo. 

Paleta de colores: #0F172A (azul muy oscuro), #1E293B (gris profundo), #3B82F6 (azul primario), #F1F5F9 (gris claro), #FFFFFF (blanco). 
Tipografía: "Inter" para cuerpo y "Playfair Display" para títulos, cargar desde Google Fonts. 

Estructura:
- HEADER: barra de navegación fija, fondo #0F172A, logo Luminara (texto), enlaces "Sobre mí", "Proyectos", "Blog", botón "Contáctanos" con fondo #3B82F6 y texto blanco.
- HERO: contenedor flex con imagen a la derecha (placeholder 800x600, fondo gris), título grande en Playfair Display, color #FFFFFF, frase descriptiva en Inter, color #F1F5F9, botón "Ver proyectos" con estilo outline blanco y flecha SVG.
- SECCIÓN ABOUT: fondo #1E293B, título centrado con highlight en azul #3B82F6, párrafo explicativo, grid de 9 iconos/etiquetas que representan herramientas (usar placeholders SVG), efecto hover que muestra nombre y breve descripción.
- SECCIÓN PROJECTS: fondo blanco, título central, grid 3 columnas responsive, cada tarjeta con imagen (placeholder), overlay negro semitransparente al hover, título del proyecto en blanco, categoría en gris claro, enlace a detalle.
- FOOTER: fondo #0F172A, columnas con enlaces de navegación, redes sociales (iconos SVG), email de contacto y copyright 2026.

Requisitos técnicos: todas las transiciones deben ser suaves (200ms) usando clases de Tailwind. Responsivo en móviles (colapsar navbar a menú hamburguesa con drawer). Incluir scroll suave y animación de aparición (fade‑in) de bloques al entrar en viewport usando IntersectionObserver en JS. No usar imágenes reales, colocar URLs de placeholder (https://via.placeholder.com). Generar código limpio y semántico.

---

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

CAPTURA COMPLETA · HOME

PROMPTS RELACIONADOS · AGENCIA DIGITAL

Otros prompts de la misma categoría

Ficha de marca

Nombre: Luminara Studio
Sector: Agencia creativa de diseño y experiencia de usuario
Claim: Diseñamos interfaces que simplifican la vida

Bloques de la home

1.1 Barra de navegación fija con logo, enlaces y botón de contacto
1.2 Hero con imagen a la derecha, título grande, descripción y llamada a la acción
1.3 Sección "Sobre mí" con título destacado, párrafo y lista de herramientas en formato grid con interacción hover
1.4 Galería de proyectos en tres columnas, cada una con imagen, título y categoría
1.5 Footer con enlaces de navegación 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

Luminara Studio — Prompt de diseño web para Claude AI

Cópialo y pégalo en Claude Design

Otros prompts de la misma categoría

Lectora Nova

Lectora Nova

Lectoria

Línea Áurea