PORTAFOLIO · Claude Design · HTML

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

★★★★★4,8 2.034 descargas

Agencia de diseño digital y desarrollo web Diseñamos experiencias digitales con esencia.

↓ 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 de diseño digital y desarrollo web). Utiliza únicamente HTML, Tailwind CSS vía CDN y JavaScript vanilla en un único archivo. Reproduce la estructura y apariencia del sitio analizado, pero con contenido original en español (España) y sin copiar texto, nombres o imágenes reales.

Palette:
- Primary: #0D3B66 (azul marino profundo)
- Secondary: #FAF0CA (beige claro)
- Accent: #F4D35E (amarillo cálido)
- Neutral Dark: #333333
- Neutral Light: #F9F9F9

Tipografía (Google Fonts):
- Headings: 'Playfair Display', serif
- Body: 'Inter', sans-serif

Header:
- Logo SVG ficticio a la izquierda.
- Menú horizontal con enlaces: Inicio, Proyectos, Sobre nosotros, Blog, Contacto.
- Año actual a la derecha "@2026".
- Botón de menú responsive que muestra un overlay lateral con los mismos enlaces, teléfono, email y dirección.

Hero section:
- Fondo blanco con un pequeño separador de línea.
- Texto alineado a la izquierda: "Hola, soy" + nombre "Ariadna Vega" en subtítulo, gran título "Ariadna Vega".
- A la derecha, dos bloques de texto: "Basada en Madrid, España" y "Directora creativa y desarrolladora No‑code".
- Imagen grande de portada (placeholder) bajo el bloque izquierdo, con forma ligeramente recortada y sombra.
- Título secundario bajo la imagen: "Diseñadora Digital".

About section:
- Título central "SOBRE MÍ" con separador decorativo.
- Párrafo descriptivo original que hable de la pasión por el diseño, experiencia de 10 años y enfoque en usabilidad.
- Tres contadores animados (incremento suave con JS):
  1) 9+ Años de experiencia
  2) 140+ Clientes satisfechos
  3) 85+ Proyectos entregados
- Cada contador muestra número grande con símbolo "+" y texto descriptivo bajo.

Projects section:
- Título "PROYECTOS DESTACADOS" con separador.
- Cuadrícula responsiva 3 columnas (mobile: 1 columna). Cada tarjeta contiene:
  * Imagen de proyecto (placeholder).
  * Título del proyecto (ejemplo: "VivaPulse").
  * Lista de categorías como etiquetas (ejemplo: Branding, Desarrollo, Motion).
- Al pasar el cursor, la tarjeta se eleva ligeramente y muestra una sombra.

Footer:
- Fondo gris muy claro.
- Columnas: Información de contacto (teléfono, email), Dirección (Calle Falsa 123, Madrid), Enlaces rápidos (Inicio, Proyectos, Blog, Contacto).
- Texto pequeño con copyright "© 2026 Lúmina Creativa".

Interactividad:
- Menú mobile abre/cierra overlay con transición de opacidad.
- Contadores se animan al entrar en viewport.
- Tarjetas de proyecto con efecto hover.

Requisitos técnicos:
- Incluir Tailwind CSS CDN `<script src="https://cdn.tailwindcss.com"></script>` y configurar colores personalizados.
- Usar `@import` de Google Fonts en `<head>`.
- Script vanilla para toggle del menú y animación de contadores.
- Todo el HTML debe estar bien estructurado con secciones semánticas (`<header>`, `<main>`, `<section>`, `<footer>`).
- Mantener accesibilidad: atributos `alt` en imágenes, roles ARIA en menús.
- No usar ninguna librería externa aparte de Tailwind y Google Fonts.
- El archivo debe ser autocontenido y listo para abrir en cualquier 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>
```

3.483 caracteres · 78 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Encabezado con logo, menú y año
1.2 Hero con saludo, nombre y especialidades
1.3 Imagen destacada del héroe y título secundario
1.4 Sección “Sobre mí” con título, texto y contadores
1.5 Galería de proyectos seleccionados en cuadrícula
1.6 Footer con información de contacto y enlaces

PROYECTOS

2.1 Listado en cuadrícula de tarjetas de proyecto con imagen, título y categorías
2.2 Paginación o carga bajo desplazamiento (opcional)

SOBRE NOSOTROS

3.1 Texto institucional y valores
3.2 Equipo con foto y breve bio

BLOG

4.1 Lista de artículos con imagen, título, fecha y extracto

CONTACTO

5.1 Formulario de contacto simple (nombre, email, mensaje)
5.2 Información de localización y teléfono

PROMPTS RELACIONADOS · PORTAFOLIO

Otros prompts de la misma categoría

Ficha de marca

Nombre: Lúmina Creativa
Sector: Agencia de diseño digital y desarrollo web
Claim: Diseñamos experiencias digitales con esencia

Bloques de la home

1.1 Encabezado con logo, menú y año
1.2 Hero con saludo, nombre y especialidades
1.3 Imagen destacada del héroe y título secundario
1.4 Sección “Sobre mí” con título, texto descriptivo y tres contadores animados
1.5 Sección de proyectos seleccionados con cuadrícula de tarjetas, cada una con imagen, título y categorías
1.6 Footer con datos de contacto, dirección y enlaces rápidos

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