EDUCACIÓN · Claude Design · HTML

Lúmina Creativa — Prompt de diseño web para Claude AI

★★★★★4,6 2.796 descargas

Agencia digital especializada en diseño web y branding Diseño claro, resultados visibles.

↓ 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 "Lúmina Creativa" (agencia digital) usando solo un archivo HTML con Tailwind CSS CDN y JavaScript vanilla. El alcance incluye todas las páginas listadas en la tabla (home, about, work, pricing, blog, contact) y sus bloques estructurados según la descripción. 

**Paleta de colores**: 
- Primario: #0D3B66 (azul marino profundo) 
- Secundario: #FAF0CA (crema suave) 
- Acento: #F4D35E (amarillo cálido) 
- Texto oscuro: #273043 
- Texto claro: #FFFFFF 

**Tipografía**: 
- Font family "Inter", peso 400 para párrafos, 600 para subtítulos, 700 para títulos. Usa `@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');` y aplícala con `font-sans`.

**Header**: barra de navegación fija, fondo blanco, logo dual (versión negra y blanca) a la izquierda, menú hamburguesa que despliega un panel lateral con enlaces a todas las secciones (Home, About, Work, Pricing, Blog, Contact) y botones interior "Book a Call". Incluye ícono de carrito que abre un modal sencillo mostrando cantidad de ítems.

**Footer**: fondo #0D3B66, texto claro, muestra ubicación (Sydney, Australia), hora y fecha estática, derechos de autor (©2026 Lúmina Creativa), enlaces de navegación, y enlaces a Política de privacidad y Términos.

**Home**: 
1. Hero: contenedor full‑width, fondo con degradado #0D3B66 a #FAF0CA, título grande (text-5xl lg:text-6xl) en blanco, subtítulo gris claro, botón CTA en #F4D35E con hover #FAF0CA. 
2. Servicios: grid 3‑col (md:grid-cols-3), tarjetas con ícono SVG, título y breve descripción, fondo #FAF0CA, borde sutil. 
3. Portafolio: filtro de categorías (All, Branding, UI/UX, Motion) y tarjetas de proyecto con imagen, overlay oscuro y título, efecto hover escala. 
4. Precios: tres tarjetas alineadas, borde superior #F4D35E, encabezado del plan, precio grande, lista de beneficios, botón CTA interior. 
5. Testimonios: carrusel horizontal con `overflow-x-auto` y scroll suave, tarjetas con foto redonda, nombre, cargo y comentario, fondo blanco, sombra. 
6. Blog: tarjetas de artículo (imagen, título, extracto, fecha) en grid 2‑col, fondo #FAF0CA. 
7. CTA final: sección centrada con texto invitando a suscribirse, campo email y botón secundario. 

**Otras páginas** siguen la misma cabecera y pie de página; cada una contiene los bloques descritos en la tabla. Usa componentes reutilizables con clases Tailwind para mantener consistencia.

**Interactividad**: 
- Menú hamburguesa abre/cierra panel lateral con `classList.toggle('hidden')`. 
- Carrusel de testimonios permite scroll con flechas o swipe. 
- Modal de carrito se muestra/oculta con `classList.toggle('hidden')`. 
- Filtros de portafolio aplican clases `hidden` a tarjetas no coincidentes.

**Requisitos técnicos**: 
- Archivo único `index.html` que contiene todo el markup y scripts al final del body. 
- Incluir `<script>` con lógica mínima para toggle de menú, modal y filtros. 
- No usar librerías externas excepto Tailwind CDN (`https://cdn.tailwindcss.com`) y Google Fonts. 
- Asegurar responsividad con utilidades Tailwind (sm, md, lg, xl). 
- SEO básico: títulos `<h1>`‑`<h3>` estructurados, meta description, atributos `alt` en imágenes.

Genera el HTML completo listo para copiar y pegar.

---

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

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Cabecera (navbar) con logo dual, menú responsive y botón carrito
1.2 Hero con título, subtítulo y CTA
1.3 Servicios en tres columnas
1.4 Portafolio destacado con filtros
1.5 Precios con tres planes
1.6 Testimonios en carrusel
1.7 Blog reciente
1.8 CTA final
1.9 Footer con datos de contacto y enlaces

ABOUT

2.1 Cabecera (igual que home)
2.2 Hero interno con imagen y texto introductorio
2.3 Texto sobre la historia y valores
2.4 Equipo en tarjetas con foto y bio
2.5 CTA para contactar

WORK

3.1 Cabecera
3.2 Galería de proyectos en cuadrícula filtrable
3.3 Detalle de proyecto con imágenes y texto
3.4 CTA "Ver más proyectos"

PRICING

4.1 Cabecera
4.2 Tabla comparativa de tres planes con beneficios
4.3 Preguntas frecuentes accordion
4.4 CTA de compra

BLOG

5.1 Cabecera
5.2 Lista de artículos en tarjetas con imagen, título y extracto
5.3 Sidebar con categorías y búsqueda
5.4 CTA suscripción al newsletter

CONTACT

6.1 Cabecera
6.2 Formulario de contacto con campos nombre, email, asunto y mensaje
6.3 Mapa integrado
6.4 Información de oficina y horario
6.5 CTA "Envíanos un mensaje"

PROMPTS RELACIONADOS · EDUCACIÓN

Otros prompts de la misma categoría

Ficha de marca

Nombre: Lúmina Creativa
Sector: Agencia digital especializada en diseño web y branding
Claim: Diseño claro, resultados visibles

Bloques de la home

1.1 Cabecera (navbar) con logo dual, menú responsive y acceso al carrito
1.2 Hero con título principal, subtítulo y botón CTA
1.3 Bloque de servicios en grid de tres columnas con iconos y descripción
1.4 Portafolio destacado con tarjetas de proyecto y filtro
1.5 Sección de precios con tres tarjetas de plan y botón de contratación
1.6 Testimonios en carrusel horizontal
1.7 Blog con tarjetas de artículo reciente
1.8 Llamada a la acción final (newsletter / contacto)
1.9 Pie de página con información de la empresa, enlaces de navegación y datos legales

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