BELLEZA / SPA · Claude Design · HTML

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

★★★★★4,7 588 descargas

Centro de estética y cuidado facial Cuidado especializado para una piel saludable y radiante.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea una landing page completa para la marca ficticia Luminara Spa, un centro de estética especializado en cuidados faciales. Usa única y exclusivamente HTML con Tailwind CSS vía CDN y JavaScript vanilla en un solo archivo. Aplicar la siguiente paleta de colores: #0A0A0A (negro profundo), #FFFFFF (blanco), #F5C6A5 (rosa suave), #D7A87A (dolly), #ECECEC (gris claro). Fuente principal: 'Inter', sans‑serif; fuente de encabezados: 'Playfair Display', serif.

Estructura y componentes:
- **Header**: barra fija, logo dual (versión negra y blanca), menú horizontal con enlaces: Inicio, Sobre nosotros, Servicios, Blog, Contacto. Botones de llamada a la acción "Reservar" (outline) y "Reservar ahora" (filled). Incluye icono hamburguesa para móvil.
- **Hero**: sección a pantalla completa con imagen de fondo difuminada, título grande "Piel radiante <span class='italic text-dolly-200'>comienza</span> aquí", dos párrafos descriptivos y botón circular "Reservar ahora".
- **Marquee**: carrusel horizontal automático sin controles, repite íconos de sol (SVG) y frases alternadas: "LA CONFIANZA COMIENZA CON UNA PIEL SALUDABLE" y "CUIDADO SUAVE, RESULTADOS VISIBLES".
- **Filosofía**: bloque con texto intercalado a lo largo de imágenes inline (iconos de consulta y ojo). Usa layout flex con imágenes inline y texto envolvente.
- **Servicios**: slider automático (JS) con tarjetas. Cada tarjeta contiene imagen de fondo con overlay, título, breve descripción y botón "Leer más" (outline). Incluye al menos tres tarjetas: Ritual de Renovación, Facial Glow, Mascarilla Detox.
- **Footer**: fondo gris claro, columnas con enlaces de navegación, redes sociales (iconos SVG), formulario de suscripción (email + botón) y datos de contacto (email, teléfono).

Requisitos técnicos:
- Todas las interacciones (menú hamburguesa, slider y marquee) deben implementarse con JavaScript sin dependencias externas.
- Utiliza clases Tailwind para espaciado, tipografía y colores según la paleta.
- Mantén la accesibilidad: atributos `alt` en imágenes, `aria-label` en botones y `role="navigation"` en el menú.
- El archivo debe ser autocontenido: incluir el enlace al CDN de Tailwind (`https://cdn.tailwindcss.com`) y a Google Fonts para Inter y Playfair Display.
- Añade meta tags básicos (charset, viewport, title, description).
- No incluir contenido real del sitio original; redactar textos originales en español de España.

Entrega el código listo para copiar‑pegar en un archivo `index.html`.

---

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

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Header con logo dual, menú y botones de reserva
1.2 Hero con imagen a pantalla completa, título con énfasis y botón circular
1.3 Marquee de iconos sol y frases repetidas
1.4 Filosofía con texto mezclado con imágenes inline
1.5 Slider de servicios (tarjetas con imagen, título, descripción y enlace)
1.6 Footer con navegación secundaria, redes y datos de contacto

ABOUT US

2.1 Header igual que Home
2.2 Sección de historia con texto y foto
2.3 Valores en columnas con iconos
2.4 Equipo con fotos circulares y breves bios
2.5 CTA para reservar

SERVICES

3.1 Header estándar
3.2 Lista de servicios con tarjetas tipo grid
3.3 Detalle de cada servicio (imagen, descripción, beneficios)
3.4 Botón de reserva

BLOG

4.1 Header estándar
4.2 Grid de artículos con miniatura, título y extracto
4.3 Paginación

CONTACT

5.1 Header estándar
5.2 Formulario de contacto (nombre, email, mensaje, botón)
5.3 Mapa incrustado
5.4 Información de localización y horario

FOOTER (presente en todas las páginas)

Enlaces principales, redes sociales, suscripción a newsletter, datos legales

PROMPTS RELACIONADOS · BELLEZA / SPA

Otros prompts de la misma categoría

Ficha de marca

Nombre: Luminara Spa
Sector: Centro de estética y cuidado facial
Claim: Cuidado especializado para una piel saludable y radiante

Bloques de la home

1.1 Header con logo dual (claro/oscuro), menú horizontal y botones de reserva
1.2 Hero con imagen de fondo, título destacado y botón circular
1.3 Marquee horizontal de iconos y mensajes recurrentes
1.4 Sección de filosofía con texto intercalado con imágenes inline
1.5 Slider de servicios con tarjetas, overlay y botón "Leer más"
1.6 Footer con enlaces de navegación, redes sociales 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