EDUCACIÓN · Claude Design · HTML

LunaPixel — Prompt de diseño web para Claude AI

★★★★★4,6 3.346 descargas

Estudio creativo especializado en diseño digital y experiencias interactivas Diseñamos visuales que hablan por sí mismos.

↓ 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 LunaPixel, estudio creativo de diseño digital. Usa solo un archivo HTML con Tailwind CSS CDN y JavaScript vanilla. Sigue la estructura y estilo del sitio original pero con contenido y textos originales en español (España).

--- CONFIGURACIÓN GLOBAL ---
- Paleta de colores: #1A1A1A (fondo oscuro), #F5F5F5 (texto claro), #E63946 (accent rojo), #FFB703 (accent amarillo), #2A9D8F (accent verde).
- Tipografía: "Inter", sans-serif para cuerpo; "Playfair Display", serif para encabezados.
- Animaciones: fade‑in + slide‑up al cargar los bloques, contadores que incrementan con JavaScript usando setInterval.
- Responsividad: diseño mobile‑first, colapsar menú en hamburguesa con overlay.

--- HEADER ---
- Barra superior fija, altura 80px, fondo #1A1A1A, logo texto "LunaPixel" en Playfair Display, color #F5F5F5.
- Menú horizontal (Home, Sobre mí, Proyectos, Servicios, Blog, Contacto). En móvil, botón hamburguesa que muestra un panel lateral con los enlaces.
- Botón CTA “Contacto” a la derecha con fondo #E63946, texto blanco, ícono de flecha derecha.

--- HERO SECTION (HOME) ---
- Contenedor dividido 2 columnas en escritorio, apilado en móvil.
- Columna izquierda: subtítulo "Hola, soy", título grande "Ana Luna" (Playfair, 4rem), párrafo descriptivo breve, botón “Descubre mi trabajo” (bg #2A9D8F).
- Columna derecha: imagen circular de perfil (placeholder) y fondo de video autoplay, loop, muted (use video tag con source placeholders). Sobre el video, superpone una capa semi‑transparente #00000066.
- Debajo del texto, fila de 4 contadores animados con números grandes y label: “Proyectos”, “Satisfacción”, “Años de experiencia”, “Clientes felices”. Cada número aumenta de 0 al valor final (ej. 120+, 98%, 8+, 150+).

--- SECCIÓN PROYECTOS ---
- Título central "Proyectos" con underline animado.
- Grid de 3 columnas (2 en tablet, 1 en móvil) de tarjetas. Cada tarjeta: imagen de proyecto, título, breve descripción, overlay al hover con botón "Ver proyecto" (bg #E63946).
- Añadir filtro por categoría (todos, UI, Branding, Motion) usando botones que filtran las tarjetas con JS.

--- FOOTER ---
- Fondo #1A1A1A, texto #F5F5F5.
- Primera fila: logo "LunaPixel" y breve tagline.
- Segunda fila: enlaces de navegación en columna, y columnas de redes sociales (iconos SVG) con hover color #E63946.
- Última fila: texto de derechos © 2026 LunaPixel. Todos los enlaces sin URL real.

--- PÁGINAS ADICIONALES ---
- Sobre mí: foto grande, biografía, habilidades en tarjetas con iconos.
- Servicios: lista de servicios en tarjetas con iconos y breve texto.
- Blog: lista de artículos con imagen, título, extracto y botón leer más.
- Contacto: formulario sencillo (nombre, email, mensaje) con validación básica, botón enviar (bg #2A9D8F).

--- REQUISITOS TÉCNICOS ---
- Usa solo HTML5 y Tailwind v3 CDN.
- Incluye <script> al final para manejar el menú móvil, filtrado de proyectos, animaciones de contadores y efectos de scroll (IntersectionObserver).
- Optimiza imágenes con atributos loading="lazy" y srcset.
- Asegura accesibilidad: etiquetas alt, contraste suficiente, foco visible en enlaces.
- No incluir ninguna URL externa del sitio original.

Genera el archivo completo listo para abrir en el 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.605 caracteres · 61 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Cabecera con logo, navegación y CTA de contacto
1.2 Hero con subtítulo, título, foto, video de fondo y texto descriptivo
1.3 Bloque de contadores animados (Proyectos, Satisfacción, Experiencia, Clientes)
1.4 Sección de proyectos: título y grid de tarjetas
1.5 Footer: logo, navegación secundaria, redes sociales, derechos de autor

ABOUT

1.1 Cabecera compartida
1.2 Bloque de presentación personal con foto y texto
1.3 Experiencia y habilidades en columnas
1.4 Testimonios en carrusel
1.5 Footer compartido

PROJECTS

1.1 Cabecera compartida
1.2 Galería filtrable de imágenes en mosaico
1.3 Detalle de proyecto con descripción, imágenes y vídeo
1.4 CTA para contactar
1.5 Footer compartido

SERVICES

1.1 Cabecera compartida
1.2 Lista de servicios en tarjetas con iconos
1.3 Bloque de precios estimados (texto sin cifras exactas)
1.4 Formulario de contacto rápido
1.5 Footer compartido

BLOG

1.1 Cabecera compartida
1.2 Lista de artículos con imagen, título y extracto
1.3 Paginación simple
1.4 Sidebar con categorías y últimas entradas
1.5 Footer compartido

CONTACT

1.1 Cabecera compartida
1.2 Formulario de contacto con campos nombre, email, mensaje
1.3 Mapa estático de ubicación (imagen de ejemplo)
1.4 Información de contacto y redes sociales
1.5 Footer compartido

PROMPTS RELACIONADOS · EDUCACIÓN

Otros prompts de la misma categoría

Ficha de marca

Nombre: LunaPixel
Sector: Estudio creativo especializado en diseño digital y experiencias interactivas
Claim: Diseñamos visuales que hablan por sí mismos

Bloques de la home

1.1 Cabecera con logo, navegación principal y botón de contacto
1.2 Hero: saludo, nombre, descripción, foto, video de fondo y contadores de métricas
1.3 Sección de proyectos con título y cuadrícula de tarjetas
1.4 Footer con información de contacto, enlaces y redes 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