EDUCACIÓN · Claude Design · HTML

Luna Vía — Prompt de diseño web para Claude AI

★★★★★4,8 3.299 descargas

Diseño de experiencia de usuario y productos digitales Diseñamos interacciones que inspiran.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea una página web completa para la marca ficticia Luna Vía, una agencia de diseño UX/UI, usando únicamente HTML, Tailwind CSS (via CDN) y JavaScript vanilla en un único archivo. Reproduce fielmente la estructura y estilo del sitio analizado, pero con contenido original en español (España).

**Alcance**
- Header fijo con logo (imagen placeholder) y menú hamburguesa que despliega un sidebar con enlaces: Sobre mí, Habilidades, Experiencia, Proyectos, Contacto.
- Footer con líneas decorativas y copyright.
- Home con secciones numeradas según la tabla anterior.
- Cada bloque debe usar los mismos patrones de UI (hero, tarjetas rotadas, bloques de info, skill cards, galerías de proyecto) pero sin copiar texto ni imágenes literales.
- Todos los textos deben ser originales, tono profesional y activo.

**Paleta de colores** (hex):
- Primario: #0A4FFF (azul intenso)
- Secundario: #671A3C (magenta oscuro)
- Accent 1: #FF7A00 (naranja vibrante)
- Accent 2: #00C2FF (cian brillante)
- Accent 3: #28C76F (verde lima)
- Fondo: #FFFFFF
- Texto: #111111

**Tipografía**
- Fuente principal: 'Inter', sans-serif (cargar desde Google Fonts).
- Fuente secundaria manuscrita para captions: 'Pacifico', cursive.
- Usar clases Tailwind para tamaños: text-5xl, text-2xl, etc.

**Componentes**
1. **Header**: flex, items-center, justify-between, sticky top-0, bg-white, shadow-md. Logo con imagen circular y nombre + rol debajo.
2. **Hero**: grid md:grid-cols-2, fondo blanco, izquierda con h1 grande (nombre), p con font-cursive, dos botones (primary: bg-primary text-white, hover: bg-primary-600; secondary: border-2 border-primary text-primary). derecha con tres tarjetas rotadas (transform -rotate-3, rotate-3) usando los colores accent.
3. **Sección Sobre mí**: container centrálico, título h2, subtítulo cursivo, grid 2 columnas con bloques de información (w-1/2) y foto central (rounded-lg). Bloques con label grande semibold y valor.
4. **Sección Habilidades**: título, botón secundario, grid 3 columnas de tarjetas color accént, cada una con encabezado y lista de items.
5. **Banner CTA**: fondo gris claro, texto centrado h3 y dos botones como en hero.
6. **Sección Proyectos**: galería responsive (grid cols-1 md:grid-cols-2 lg:grid-cols-3, gap-6). Cada tarjeta es un enlace bloque con fondo de color (usar variables de color del proyecto), imagen de portada placeholder, overlay con nombre del proyecto y categoría en pillas negras.
7. **Sección Contacto**: formulario simple (nombre, email, mensaje) con validación mínima, botón submit primary.
8. **Footer**: líneas horizontales finas, texto centrado, enlace mailto.

**Interactividad**
- Menú hamburguesa abre/cierra sidebar con transición Tailwind (ease-in-out, duration-300).
- Botones con efectos hover (scale-105).
- Tarjetas de proyecto con efecto hover zoom de la imagen y cambio de opacidad del overlay.
- Formulario muestra mensaje de éxito al enviar (simulado con JS alert).

**Requisitos técnicos**
- Incluir `<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Pacifico&display=swap" rel="stylesheet">`.
- Incluir Tailwind CDN: `<script src="https://cdn.tailwindcss.com"></script>` y configurar colores personalizados dentro de `tailwind.config` inline usando `tailwind.config = { theme: { extend: { colors: { primary: '#0A4FFF', secondary: '#671A3C', orange: '#FF7A00', cyan: '#00C2FF', green: '#28C76F' } } } }`.
- Todo el HTML debe estar bien indentado y semántico (header, main, section, footer).
- No usar imágenes externas reales; usar placeholders de `https://via.placeholder.com/600x400` con descripción en alt.
- El archivo debe ser autocontenido y listo para abrir en 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>
```

4.026 caracteres · 62 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

PROMPTS RELACIONADOS · EDUCACIÓN

Otros prompts de la misma categoría

Ficha de marca

Nombre: Luna Vía
Sector: Diseño de experiencia de usuario y productos digitales
Claim: Diseñamos interacciones que inspiran

Bloques de la home

1.1 Encabezado (logo, icono mail, menú hamburguesa)\n2.1 Hero principal (nombre, subtítulo, botones CTA, bloques rotados de especialidades)\n3.1 Sección Sobre mí (texto introductorio, bloques de información izquierda, foto, bloques de información derecha, botón CTA)\n4.1 Sección Habilidades (título, bloques de skill con colores, banner CTA)\n5.1 Sección Proyectos (galería de trabajos con tarjetas coloreadas y etiquetas)\n6.1 Sección Contacto (formulario simple y enlaces)\n7.1 Pie de página (líneas decorativas, copyright)

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

Luna Vía — Prompt de diseño web para Claude AI

Cópialo y pégalo en Claude Design

Otros prompts de la misma categoría

Línea Prisma

LinguaNova

LinguaPulse

LinguaPulse