BELLEZA / SPA · Claude Design · HTML

Luz Serena — Prompt de diseño web para Claude AI

★★★★★4,9 4.307 descargas

Centro de yoga y bienestar integral Espacios tranquilos para tu práctica diaria.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea un sitio web estático para la marca ficticia "Luz Serena" (estudio de yoga y bienestar) usando solo HTML, Tailwind CSS CDN y JavaScript vanilla en un único archivo. Reproduce fielmente la estructura y el estilo del sitio analizado, sin copiar texto ni imágenes originales. 

**Paleta de colores**: #F5F9FF (fondo), #E0F0FF (acento suave), #A3C4F3 (botones), #2C3E50 (texto principal), #7A9EB1 (texto secundario). 
**Tipografía**: Google Font "Playfair Display" para títulos y "Inter" para cuerpo. 

**Header**: barra de navegación fija con logo tipográfico, botón hamburguesa que abre un mega‑menu lateral con enlaces a Home, Programas, Talleres, Sobre Nosotros, Contacto y botón destacado "Reserva una sesión". 

**Home**:
1.1 Hero a pantalla completa con fondo desenfocado de naturaleza, título grande en Playfair, subtítulo en Inter, y botón primary "Reserva ahora".
1.2 Sección de filosofía: dos columnas, texto descriptivo y foto a la derecha.
1.3 Cuadrícula de 3 tarjetas (Programas) con ícono, nombre y breve texto; hover cambia fondo a #E0F0FF.
1.4 Área de talleres: tarjetas horizontales con imagen, título, fecha y botón "Más info".
1.5 Testimonios: carrusel simple (JS) con foto circular, nombre y comentario.
1.6 Newsletter: barra con campo email y botón "Suscribirme".
1.7 Footer: columnas con enlaces, redes sociales (iconos SVG), mini‑formulario de contacto y copyright.

**Programas page**: encabezado, lista de tarjetas similares al bloque 1.3, botón "Ver detalle" bajo cada una.
**Talleres page**: galería de tarjetas con filtro por categoría, botón "Agenda completa".
**Sobre Nosotros page**: texto extenso, foto del equipo, valores en bloques iconográficos.
**Contacto page**: formulario (nombre, email, teléfono, fecha, clase), mapa estático (iframe de Google Maps placeholder), datos de contacto y horario.

**Interactividad**: menú hamburguesa + cierre, carrusel de testimonios auto‑reproducido, scroll suave, botón "Back to top" visible al hacer scroll.

**Requisitos técnicos**: incluir Tailwind vía CDN (`<script src="https://cdn.tailwindcss.com"></script>`), cargar fuentes con `<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Inter:wght@400;500&display=swap" rel="stylesheet">`, usar `data-theme` para modo claro, hacer que todo el CSS sea responsivo (mobile‑first). No usar ningún framework adicional. El HTML debe estar bien indentado y comentado por secciones.

Entrega el código 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>
```

2.838 caracteres · 43 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Hero con título, subtítulo y botón de reserva
1.2 Bloque de presentación de la filosofía del estudio
1.3 Cuadrícula de programas y clases
1.4 Área de talleres y retiros con tarjetas
1.5 Testimonios en carrusel sencillo
1.6 Llamada a la acción para suscripción al newsletter
1.7 Footer con enlaces, redes y datos de contacto

PROGRAMAS

2.1 Encabezado de sección
2.2 Lista de programas en tarjetas con icono y breve descripción
2.3 Botón para ver más detalles

TALLERES

3.1 Encabezado de sección
3.2 Galería de talleres en tarjetas con imagen y fecha
3.3 Enlace a agenda completa

TESTIMONIOS

4.1 Carrusel de testimonios con foto, nombre y comentario

SOBRE NOSOTROS

5.1 Texto descriptivo del equipo y la misión
5.2 Foto grupal del estudio

CONTACTO

6.1 Formulario de reserva simple (nombre, email, fecha, clase)
6.2 Mapa estático de ubicación
6.3 Información de contacto y horario

FOOTER

7.1 Enlaces rápidos, redes sociales, suscripción a newsletter, copyright

PROMPTS RELACIONADOS · BELLEZA / SPA

Otros prompts de la misma categoría

Ficha de marca

Nombre: Luz Serena
Sector: Centro de yoga y bienestar integral
Claim: Espacios tranquilos para tu práctica diaria

Bloques de la home

1.1 Hero con título, subtítulo y botón de reserva
1.2 Bloque de presentación de la filosofía del estudio
1.3 Cuadrícula de programas y clases
1.4 Área de talleres y retiros con tarjetas
1.5 Testimonios en carrusel sencillo
1.6 Llamada a la acción para suscripción al newsletter
1.7 Footer con enlaces, redes 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