SALUD Y MEDICINA · Claude Design · HTML

Sonrisa Lumen — Prompt de diseño web para Claude AI

★★★★★4,6 3.132 descargas

Clínica dental privada con enfoque en odontología estética y familiar Cuidamos tu sonrisa con calma y precisión.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea un sitio web autocontenido en un único archivo HTML usando Tailwind CSS por CDN y JavaScript vanilla para una clínica dental ficticia llamada "Sonrisa Lumen" (dominio sonrisalumen.com, email hola@sonrisalumen.com, año 2025). Sector: clínica dental privada con enfoque en odontología estética y familiar. Claim: "Cuidamos tu sonrisa con calma y precisión". Tono: cálido, profesional, sereno, en español de España, sin jerga marketinera y sin precios concretos.

ALCANCE
Genera la HOME completa con todos los bloques descritos abajo. Todas las imágenes pueden ser placeholders de https://images.unsplash.com relacionados con dentistas, sonrisas, consulta, equipamiento, o ilustraciones SVG inline. Todos los iconos en SVG inline (sin librerías externas).

STACK
- HTML5 semántico, single-file.
- Tailwind CSS vía <script src="https://cdn.tailwindcss.com"></script>.
- Fuentes Google: "Fraunces" (serif) para titulares y "Inter" (sans) para cuerpo.
- JavaScript vanilla para: menú móvil, dropdowns del header, slider de testimonios, acordeón FAQ y contadores animados al hacer scroll.
- Configurar tailwind.config con la paleta y fuentes personalizadas.

PALETA
- Fondo crema principal: #F5EFE6
- Fondo blanco roto secundario: #FBF8F3
- Verde menta acento: #9DC4B5
- Verde menta oscuro hover: #6FA08C
- Texto principal oscuro: #1F2A24
- Texto secundario gris: #5C6660
- Bordes suaves: #E4DCD0
- Detalles dorado tenue: #C9A86A

TIPOGRAFÍA
- Titulares: Fraunces, peso 400-500, tracking ligeramente negativo, tamaños grandes (hasta 80px en hero).
- Cuerpo: Inter 400-500, 16-18px, line-height 1.6.
- Etiquetas y eyebrows en mayúsculas con letter-spacing amplio, en color verde oscuro.

HEADER (sticky, fondo crema con sombra muy sutil al hacer scroll)
- Logo a la izquierda: marca "Sonrisa Lumen" con icono SVG inline de una hoja/sonrisa estilizada al lado del nombre en Fraunces.
- Menú centrado con items: Inicio (dropdown: Home clásica, Home alternativa), Servicios (dropdown: Estética, Familiar), Odontólogos, Páginas (dropdown: Ficha odontólogo, Contacto, Registro, Acceso, 404).
- Botón CTA a la derecha "Pedir cita" con flecha SVG, fondo verde oscuro, texto crema, hover invertido.
- Menú móvil hamburguesa con panel deslizante desde la derecha.

HOME — SECCIONES EN ORDEN

1) HERO
- Fondo crema con dos bloques decorativos rectangulares con esquinas redondeadas que enmarcan una imagen central.
- Titular en Fraunces, dos líneas: "Una sonrisa serena / para cada etapa de tu vida".
- Subtítulo breve en una línea.
- Botón primario "Conocer al equipo" verde oscuro.
- Imagen central de paciente sonriendo en círculo/recorte orgánico.
- Dos badges flotantes pequeños: uno con icono de estrella y texto "Más de 12.000 sonrisas atendidas"; otro con icono de calendario "Citas en menos de 48 h".
- Pequeños elementos SVG decorativos (puntos, líneas curvas) animados con un sutil float.

2) TIRA DE MÉTRICAS
- Fondo blanco roto, 4 columnas: "+20 años de experiencia", "+12.000 pacientes", "15 especialistas", "3 sedes en la ciudad". Números grandes en Fraunces con contador animado al entrar en viewport.

3) SOBRE NOSOTROS
- Dos columnas. Izquierda: eyebrow "NUESTRA CLÍNICA", titular serif "Atención dental con tiempo, escucha y precisión", párrafo de 3-4 líneas y lista de 4 valores con bullets verde menta (Diagnóstico sin prisas, Materiales de alta calidad, Equipo multidisciplinar, Seguimiento personalizado). Botón secundario outline.
- Derecha: imagen circular grande de la clínica con marco verde menta.

4) GRID DE SERVICIOS
- Eyebrow centrado "TRATAMIENTOS", titular "Lo que hacemos por ti".
- 6 tarjetas en grid 3x2 (responsive a 1 columna en móvil): Limpieza e higiene, Ortodoncia invisible, Implantes, Blanqueamiento, Endodoncia, Odontopediatría. Cada tarjeta con icono SVG dentro de círculo verde menta, título serif, descripción de 2 líneas y enlace "Saber más →". Fondo blanco roto, borde sutil, hover que eleva la tarjeta.

5) TRATAMIENTO DESTACADO
- Dos columnas. Izquierda imagen de tratamiento con esquinas redondeadas y badge dorado en esquina ("Más solicitado"). Derecha: eyebrow, titular "Ortodoncia invisible adaptada a ti", párrafo, lista de 4 beneficios con check SVG verde, y botón primario "Solicitar valoración".

6) EQUIPO DE ODONTÓLOGOS
- Eyebrow "NUESTRO EQUIPO", titular "Profesionales con vocación".
- 4 tarjetas en grid: foto vertical recortada en arco superior, nombre en Fraunces, especialidad en sans más pequeña, breve descripción de una línea e iconos sociales (LinkedIn, Instagram) en SVG. Nombres ficticios: Dra. Elena Ferrer (Estética), Dr. Tomás Riaño (Implantología), Dra. Carla Mendizábal (Ortodoncia), Dr. Andrés Vilanova (Odontopediatría).
- Botón centrado debajo "Ver todo el equipo".

7) PROCESO DE VISITA EN 4 PASOS
- Fondo verde menta claro. Eyebrow "CÓMO TRABAJAMOS", titular "Tu primera visita, paso a paso".
- 4 columnas con número grande en Fraunces (01-04), título corto y descripción: 01 Pides cita, 02 Revisión y diagnóstico, 03 Plan personalizado, 04 Seguimiento.
- Línea horizontal punteada conectando los pasos en desktop.

8) TESTIMONIOS (slider)
- Fondo crema. Eyebrow "PACIENTES", titular "Lo que cuentan quienes confían en nosotros".
- Slider con 3 testimonios visibles a la vez en desktop, 1 en móvil. Cada tarjeta con 5 estrellas SVG doradas, cita de 3-4 líneas, foto circular pequeña, nombre y tratamiento realizado. Controles prev/next con flechas circulares y bullets indicadores. Autoplay cada 6s con pausa al hover.

9) FAQ (acordeón)
- Dos columnas. Izquierda: eyebrow "PREGUNTAS", titular "Resolvemos tus dudas", párrafo y botón "Contactar con la clínica". Derecha: 6 preguntas en acordeón con animación suave, una abierta por defecto. Preguntas: ¿Atendéis primera visita sin compromiso?, ¿Puedo financiar mi tratamiento?, ¿Trabajáis con seguros dentales?, ¿Cuánto dura una ortodoncia invisible?, ¿Es doloroso un implante?, ¿Atendéis a niños desde qué edad?

10) CTA FINAL
- Banda verde menta oscuro con texto crema. Titular serif grande "Reserva tu primera revisión". Subtítulo breve. Dos botones: primario crema "Pedir cita ahora" y secundario outline crema "Llamar al 900 000 000".

11) FOOTER
- Fondo verde muy oscuro (#1F2A24) con texto crema.
- Columna 1: logo + breve descripción de la clínica + iconos sociales.
- Columna 2: Servicios (lista de 5 enlaces).
- Columna 3: Clínica (Sobre nosotros, Equipo, Blog, Contacto, Empleo).
- Columna 4: Contacto (dirección ficticia Calle Mayor 24, Madrid; teléfono +34 900 000 000; email hola@sonrisalumen.com; horario L-V 9-20h, S 10-14h).
- Línea inferior: "© 2025 Sonrisa Lumen. Todos los derechos reservados." + enlaces a Aviso legal, Privacidad y Cookies.

REQUISITOS TÉCNICOS
- Totalmente responsive (móvil, tablet, desktop) con breakpoints Tailwind estándar.
- Accesibilidad básica: roles ARIA en menú, acordeón y slider; alt en imágenes; contraste suficiente.
- Animaciones sutiles con clases utility y transiciones CSS; fade-in y translate-y al entrar en viewport usando IntersectionObserver.
- Contadores animados con requestAnimationFrame.
- Sin dependencias externas más allá de Tailwind CDN y Google Fonts.
- Código limpio, comentado por secciones y listo para previsualizar en un Artifact.
- Todo el copy en español de España, original, sin mencionar ninguna marca real.

---

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

7.648 caracteres · 111 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Header con navegación y CTA
1.2 Hero ilustrado con titular serif
1.3 Tira de métricas de confianza
1.4 Bloque sobre la clínica
1.5 Grid de servicios
1.6 Tratamiento destacado
1.7 Equipo de odontólogos
1.8 Proceso de visita en 4 pasos
1.9 Slider de testimonios
1.10 Acordeón FAQ
1.11 CTA final de reserva
1.12 Footer completo

SERVICIOS

2.1 Header
2.2 Cabecera de página con breadcrumb
2.3 Listado completo de tratamientos en grid
2.4 Bloque de tecnología y equipamiento
2.5 CTA reserva
2.6 Footer

ODONTÓLOGOS (LISTADO)

3.1 Header
3.2 Cabecera con título y filtros por especialidad
3.3 Grid de profesionales
3.4 CTA contacto
3.5 Footer

FICHA ODONTÓLOGO

4.1 Header
4.2 Cabecera con foto, nombre, especialidad y datos
4.3 Biografía y formación
4.4 Tratamientos que realiza
4.5 Horario y reserva de cita
4.6 Footer

CONTACTO

5.1 Header
5.2 Cabecera con datos de contacto
5.3 Formulario de reserva con mapa lateral
5.4 Bloque de horarios y direcciones
5.5 Footer

REGISTRO / ACCESO

6.1 Header simplificado
6.2 Formulario centrado con imagen lateral
6.3 Footer mínimo

404

7.1 Header
7.2 Bloque centrado con ilustración y botón volver
7.3 Footer

PROMPTS RELACIONADOS · SALUD Y MEDICINA

Otros prompts de la misma categoría

Ficha de marca

Nombre: Sonrisa Lumen
Sector: Clínica dental privada con enfoque en odontología estética y familiar
Claim: Cuidamos tu sonrisa con calma y precisión

Bloques de la home

1.1 Header con logo, navegación con dropdowns (Inicio, Servicios, Odontólogos, Páginas) y botón CTA "Pedir cita"
1.2 Hero con titular serif a dos líneas, botón primario, imagen recortada con esquinas decorativas y badges flotantes
1.3 Tira de confianza con métricas (años de experiencia, pacientes, especialistas, sedes)
1.4 Bloque "Sobre nosotros" en dos columnas: texto con lista de valores e imagen circular
1.5 Grid de servicios (6 tarjetas con icono, título y descripción breve)
1.6 Sección destacada de tratamiento estrella con imagen lateral, lista de beneficios y CTA
1.7 Equipo de odontólogos (4 tarjetas con foto, nombre, especialidad y enlaces sociales)
1.8 Proceso de visita en 4 pasos numerados con conector horizontal
1.9 Testimonios en slider con foto, cita, nombre y valoración en estrellas
1.10 Bloque FAQ tipo acordeón con 6 preguntas frecuentes
1.11 CTA final "Reserva tu primera revisión" con fondo verde menta
1.12 Footer con logo, columnas (servicios, clínica, legal), datos de contacto y redes

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