SALUD Y MEDICINA · Claude Design · Tailwind · Vanilla JS

Lumare Skin Studio – Clínica dermoestética premium

★★★★★4,6 3.499 descargas

Theme de una página única para Lumare Skin Studio, clínica dermoestética en España. Incluye hero con degradado, secciones de servicios, testimonios y FAQ, todo responsive con Tailwind y micro‑interacciones.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea un sitio web completo de una sola página HTML autocontenida para la marca ficticia LUMARE SKIN STUDIO, una clínica dermoestética premium en España. Claim: 'Tratamientos pensados para tu piel, paso a paso'. Dominio lumareskin.com, email hola@lumareskin.com, año 2025.

STACK Y REQUISITOS TÉCNICOS:
- Un único archivo HTML con Tailwind CSS por CDN (script de cdn.tailwindcss.com) y JavaScript vanilla embebido.
- Sin frameworks externos más allá de Tailwind. Iconos en SVG inline (no librerías).
- Tipografías Google Fonts: 'Fraunces' para titulares (display, weight 400-500, ligeramente itálica permitida) y 'Inter' para texto (400-500).
- Imágenes de Unsplash (URLs directas con parámetros de tamaño) coherentes con dermoestética: retratos en tonos cálidos, manos con sérums, gotas, mascarillas faciales, masajes spa, ambientes minerales.
- Responsive total (mobile-first), menú hamburguesa en móvil que despliega overlay.
- Microinteracciones: hover en tarjetas con leve scale y cambio de icono flecha, fade-in al hacer scroll usando IntersectionObserver, acordeón FAQ animado, contador animado en cifras.
- Accesible: focus visible, contrastes correctos, alt en imágenes.

PALETA EXACTA:
- Fondo principal crema cálido: #F4EFE8
- Fondo secundario marfil: #FBF7F1
- Acento terracota suave (CTAs y chips): #C97B5E
- Acento oscuro vino tierra (hover y detalles): #8E4A33
- Texto principal marrón profundo: #2E1F17
- Texto secundario topo: #6B5A4E
- Línea/borde sutil: #E2D8CB
- Hero con fondo degradado de #C97B5E a #8E4A33 y texto blanco roto #FBF7F1.

TIPOGRAFÍA Y ESCALA:
- H1 display 72-96px tight, Fraunces 400.
- H2 48-56px, H3 28-32px, H4 22-24px.
- Body 16-18px Inter 400, line-height 1.6.
- Etiquetas chip: 13px uppercase ligero con tracking, acompañadas de un círculo decorativo a la izquierda.

HEADER (fijo, fondo translúcido con blur al hacer scroll):
- Logo a la izquierda: icono SVG de sol minimalista (círculo con rayos cortos) + wordmark 'lumare' en minúsculas.
- Menú centrado: Sobre nosotros, Servicios, Novedades, FAQ.
- Botón CTA a la derecha 'Reservar consulta' con fondo terracota y texto blanco roto, esquinas redondeadas pill.
- En móvil: hamburguesa que abre panel a pantalla completa con los enlaces grandes.

FOOTER:
- Fondo marrón profundo #2E1F17, texto crema.
- Cuatro columnas: marca + claim corto + dirección ficticia en Valencia; Navegación; Servicios destacados; Contacto (email hola@lumareskin.com, teléfono inventado, horario L-S).
- Fila inferior con © 2025 Lumare Skin Studio, enlaces a aviso legal y privacidad, e iconos sociales SVG inline.

HOME SECCIÓN A SECCIÓN:

1.2 HERO: Pantalla casi completa con fondo degradado terracota. Etiqueta chip blanca arriba 'Clínica dermoestética'. Titular grande 'Tu piel merece un cuidado preciso y cercano'. Subtexto de dos líneas sobre enfoque personalizado. Dos botones: primario blanco con texto terracota 'Reservar consulta' y secundario outline blanco 'Ver tratamientos'. Esquina inferior con scroll indicator sutil.

1.3 BLOQUES DE ACCIÓN: Tres tarjetas grandes en fila (stack en móvil) sobre fondo crema. Cada tarjeta tiene a la izquierda etiqueta pequeña ('Quiénes somos', 'Tratamientos', 'Diario clínico'), un H4 a dos líneas, e icono flecha diagonal arriba-derecha. A la derecha una imagen cuadrada con esquinas redondeadas. Hover: la flecha rota ligeramente y la imagen hace zoom suave.

1.4 INTRO DE MARCA: Dos columnas. Izquierda con chip 'Nuestra esencia', párrafo en Fraunces grande sobre el enfoque integrativo entre dermatología y bienestar, y dos botones (primario terracota 'Conócenos', secundario outline 'Leer novedades'). Derecha: composición de tres iconos sol de tamaños distintos dispuestos en triángulo, con animación de relleno al hover.

1.5 SERVICIOS DESTACADOS: Sección con fondo marfil. Cabecera con chip 'Tratamientos' y H2 'Resultados visibles, cuidado real' a la izquierda; botón 'Ver todos' a la derecha. Grid de 3 columnas en desktop intercalando tarjetas blancas (icono SVG lineal + nombre del tratamiento) e imágenes reales. Tratamientos: Tratamiento del acné, Resurfacing láser, Eliminación de tatuajes, Depilación láser, Eliminación de lunares y verrugas, Peeling químico. Tarjetas con borde sutil y radius 16px.

1.6 BANNER CTA INTERMEDIO: Caja blanca dentro de la misma sección, con H4 'Diagnóstico gratuito y 15% en tu primer tratamiento' y botón terracota 'Reservar consulta'.

1.7 TESTIMONIOS: Sección crema. Cabecera centrada con chip 'Testimonios' y H2 'Personas reales, resultados reales'. Tres bloques apilados verticalmente, alternando lado: foto circular grande a un lado, contenido al otro. Contenido: nombre ficticio, cita entre comillas tipográficas, y fila inferior con tres datos (Tratamiento, Duración, Valoración X.X/5.0). Nombres inventados: Marta C., Iván R., Lucía P.

1.8 PROCESO: Cuatro pasos numerados en fila (01-04) con icono lineal, título corto y descripción: Consulta inicial, Plan personalizado, Tratamiento guiado, Seguimiento. Fondo marfil con línea decorativa horizontal que une los números.

1.9 EQUIPO: Cuatro tarjetas con retrato vertical, nombre ficticio y especialidad (Dermatóloga, Esteticista médica, Terapeuta láser, Coordinadora de pacientes). Hover revela un pequeño párrafo.

1.10 FAQ: Acordeón a una columna centrada, máximo 720px de ancho. Seis preguntas sobre primera visita, dolor, cuidados posteriores, duración de resultados, edad mínima y pagos. Apertura suave con altura animada.

1.11 CTA FINAL: Banda a pantalla completa con imagen de fondo (mujer recibiendo tratamiento facial) oscurecida con overlay terracota translúcido. Titular grande blanco 'Empieza hoy el cuidado que tu piel necesita' y botón blanco 'Reservar consulta'.

1.12 FOOTER según especificación previa.

COPY: 100% original en español de España, tono cercano y profesional, frases cortas, verbos en activo, sin tecnicismos vacíos ni precios. No mencionar ninguna marca real ni referenciar la fuente. Entrega el HTML completo y funcional en un único bloque listo para previsualizar.

---

## 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>
```

6.368 caracteres · 80 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Header fijo con logo, menú y CTA
1.2 Hero con titular display y dos botones
1.3 Tres bloques de acción con imagen
1.4 Intro de marca con iconos animados
1.5 Grid de servicios alternado con fotos
1.6 Banner CTA blanco intermedio
1.7 Testimonios alternados con datos
1.8 Proceso en pasos numerados
1.9 Equipo con retratos
1.10 FAQ en acordeón
1.11 CTA final a pantalla
1.12 Footer amplio

SOBRE NOSOTROS

2.1 Header
2.2 Hero de página con título y breadcrumb sutil
2.3 Bloque historia con foto vertical y texto a dos columnas
2.4 Banda de valores en cuatro tarjetas con icono
2.5 Sección de cifras (años, pacientes, tratamientos, satisfacción)
2.6 Galería de instalaciones en masonry
2.7 CTA reserva
2.8 Footer

SERVICIOS

3.1 Header
3.2 Hero con título y filtros tipo chip
3.3 Grid de servicios con tarjeta, icono, nombre, descripción y enlace
3.4 Sección comparativa de tratamientos en tabla
3.5 Banner CTA intermedio
3.6 FAQ específico de servicios
3.7 Footer

NOVEDADES

4.1 Header
4.2 Hero con título y chip de categorías
4.3 Artículo destacado a ancho completo con imagen grande
4.4 Grid de tarjetas de artículo con fecha, categoría y resumen
4.5 Bloque newsletter con input y botón
4.6 Footer

FAQ

5.1 Header
5.2 Hero de FAQ con título y buscador
5.3 Grupos de preguntas por categoría en acordeón
5.4 CTA contacto
5.5 Footer

RESERVA CONSULTA

6.1 Header
6.2 Hero corto con título
6.3 Formulario a dos columnas con selector de tratamiento, calendario visual y datos
6.4 Lateral con resumen de cita y datos de la clínica
6.5 Footer

PROMPTS RELACIONADOS · SALUD Y MEDICINA

Otros prompts de la misma categoría

Ficha de marca

Nombre: Lumare Skin Studio
Sector: Clínica dermoestética con tratamientos faciales y corporales avanzados
Claim: Tratamientos pensados para tu piel, paso a paso

Bloques de la home

1.1 Header fijo con logo (icono sol estilizado + wordmark), menú horizontal y botón CTA de reserva
1.2 Hero a pantalla con fondo cálido degradado, titular grande tipo display y dos botones (primario blanco y secundario outline)
1.3 Banda de tres bloques de acción con título, etiqueta superior, icono flecha diagonal e imagen grande a la derecha (Nosotros / Servicios / Novedades)
1.4 Sección de introducción a la marca con etiqueta chip, párrafo largo, dos botones y composición decorativa de tres iconos sol con animación de hover
1.5 Sección con fondo crema: encabezado con chip y H2 a la izquierda, botón Ver todos a la derecha; grid alternado de tarjetas de servicio (icono + nombre) e imágenes reales de tratamientos
1.6 Banner CTA blanco dentro de la sección anterior con titular y botón de reserva
1.7 Sección de testimonios centrada con chip y H2, seguida de tarjetas grandes alternadas izquierda/derecha con foto, cita, servicio, duración y nota sobre 5
1.8 Sección de proceso o metodología en pasos numerados con iconografía lineal
1.9 Sección de equipo con retratos circulares, nombre y especialidad
1.10 Bloque FAQ en acordeón con preguntas frecuentes sobre tratamientos
1.11 CTA final a pantalla completa con imagen de fondo, titular y botón de reserva
1.12 Footer amplio con logo, columnas de enlaces, datos de contacto, redes y línea legal

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

Lumare Skin Studio – Clínica dermoestética premium

Cópialo y pégalo en Claude Design

Tabla de secciones

HOME

SOBRE NOSOTROS

SERVICIOS

NOVEDADES

FAQ

RESERVA CONSULTA

Otros prompts de la misma categoría

Lirio Sereno

Lumara Salud

Lumara Studio

Lumavid Salud