SALUD Y MEDICINA · Claude Design · HTML

LuminAura — Prompt de diseño web para Claude AI

★★★★★4,9 2.390 descargas

Clínica de dermatología y tratamientos estéticos Cuidado experto para una piel radiante.

↓ 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 LuminAura, clínica de dermatología y tratamientos estéticos, usando solo HTML, Tailwind CSS (CDN) y JavaScript vanilla en un único fichero. La página debe incluir:
- **Header**: barra fija con logo (icono circular y texto "LuminAura"), menú horizontal (Inicio, Sobre nosotros, Servicios, Novedades, FAQ, Contacto) y botón destacado "Reservar consulta". En móvil, colapsar en icono hamburguesa que despliegue el menú.
- **Hero**: sección a pantalla completa con fondo degradado claro, título grande "Porque tu piel merece lo mejor", subtítulo opcional y dos botones primarios ("Reservar consulta" y "Explorar servicios").
- **Bloques de acción**: tres tarjetas horizontales con imagen de fondo, título y flecha, enlazando a Sobre nosotros, Servicios y Novedades respectivamente.
- **Sección informativa**: texto descriptivo con un chip etiquetado "Servicios" y tres iconos grandes estilo lineal alineados horizontalmente.
- **Servicios destacados**: grid de 4 columnas (responsive a 2 en tablet, 1 en móvil) con tarjetas blancas que contienen icono SVG, nombre del servicio (p.ej. "Tratamiento de acné"), y una imagen alternada a la derecha/izquierda. Debajo del grid, banner CTA con mensaje "Disfruta de un análisis de piel gratuito y 15% de descuento en tu primer tratamiento" y botón "Reservar consulta".
- **Testimonios**: carrusel simple (JS) con 2 bloques alternados (imagen a la izquierda o derecha), nombre, texto de testimonio, información del servicio, duración y valoración (4.9/5). Incluye estrellas SVG.
- **Footer**: fondo gris oscuro, columnas con enlaces de navegación secundaria, datos de contacto (email, teléfono, dirección), y pequeños iconos de redes sociales.
- **Paleta de colores**: primary #0D47A1 (azul profundo), secondary #FFFFFF, accent #F9A825 (ámbar), background #F5F7FA, text #212121.
- **Tipografía**: usar Google Font "Poppins" para títulos y "Open Sans" para cuerpo. Tamaños responsivos.
- **Interactividad**: menú hamburguesa toggle, scroll suave, botón de reserva con scroll a sección de contacto, carrusel de testimonios automático cada 5s y con controles manuales.
- **Requisitos técnicos**: incluir Tailwind CSS vía CDN (`https://cdn.tailwindcss.com`), cargar fuentes con `link` en `<head>`, script al final del body para la lógica del menú y carrusel. Mantener todo el código en un solo archivo HTML sin dependencias externas de JS.
Produce el código listo para copiar‑pegar.

---

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

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Barra de navegación con logo y menú principal
1.2 Hero principal con título destacado y dos botones principales
1.3 Bloques de acción (Sobre nosotros, Servicios, Novedades) con imágenes y enlaces
1.4 Sección informativa con texto y grandes iconos decorativos
1.5 Sección de servicios destacados con tarjetas, iconos y galería de imágenes, botón CTA y banner promocional
1.6 Testimonios de pacientes con foto, valoración y detalle del servicio
1.7 Pie de página con enlaces de navegación secundaria y datos de contacto

ABOUT

2.1 Encabezado interno con breadcrumb
2.2 Imagen destacada y texto descriptivo de la clínica
2.3 Equipo profesional con tarjetas y foto
2.4 Llamada a la acción para reservar consulta

SERVICES

3.1 Lista de servicios con icono, título y breve descripción
3.2 Galería de casos antes y después
3.3 Botón para descargar folleto y CTA de reserva

NEWS

4.1 Blog de noticias y actualizaciones del centro
4.2 Tarjetas de artículo con imagen, título y extracto
4.3 Paginación inferior

FAQ

5.1 Preguntas frecuentes en acordeón
5.2 CTA final para contacto rápido

CONTACT

6.1 formulario de contacto con campos nombre, email, mensaje
6.2 mapa incrustado y datos de ubicación
6.3 botón de reserva directa

PROMPTS RELACIONADOS · SALUD Y MEDICINA

Otros prompts de la misma categoría

Ficha de marca

Nombre: LuminAura
Sector: Clínica de dermatología y tratamientos estéticos
Claim: Cuidado experto para una piel radiante

Bloques de la home

1.1 Barra de navegación con logo y menú principal
1.2 Hero principal con título destacado y dos botones principales
1.3 Bloques de acción (Sobre nosotros, Servicios, Novedades) con imágenes y enlaces
1.4 Sección informativa con texto y grandes iconos decorativos
1.5 Sección de servicios destacados con tarjetas, iconos y galería de imágenes, botón CTA y banner promocional
1.6 Testimonios de pacientes con foto, valoración y detalle del servicio
1.7 Pie de página con enlaces de navegación secundaria 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

LuminAura — Prompt de diseño web para Claude AI

Cópialo y pégalo en Claude Design

Tabla de secciones

HOME

ABOUT

SERVICES

NEWS

FAQ

CONTACT

Otros prompts de la misma categoría

Lirio Sereno

Lumara Salud

Lumara Studio

Lumare Skin Studio