SALUD Y MEDICINA · Claude Design · HTML

Lumora Dental — Prompt de diseño web para Claude AI

★★★★★4,7 3.955 descargas

Clínica dental con servicios integrales y equipo de odontólogos especialistas Cuidamos tu sonrisa con tecnología y cercanía.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea una web completa de una sola página (single-file HTML) para una clínica dental ficticia llamada **Lumora Dental** usando HTML + Tailwind CSS vía CDN + JavaScript vanilla. Todo el contenido debe ir en un único archivo index.html autocontenido, sin frameworks ni dependencias externas más allá de Tailwind CDN y Google Fonts.

## Marca
- Nombre: Lumora Dental
- Sector: clínica dental con servicios integrales y equipo de odontólogos especialistas
- Dominio: lumoradental.com
- Email de contacto: hola@lumoradental.com
- Teléfono ficticio: +34 910 000 000
- Dirección ficticia: Calle del Olmo 24, 28012 Madrid
- Claim (no marketinero): "Cuidamos tu sonrisa con tecnología y cercanía"
- Año: 2025

## Estética general
- Estilo cálido, profesional y sereno, con aire editorial.
- Paleta:
  - Fondo principal crema suave: #F5EFE6
  - Verde oscuro profundo (color principal de marca): #1F3A34
  - Verde menta claro de acento: #C7E0D6
  - Mostaza suave para detalles: #D8A24A
  - Texto principal: #1A2622
  - Texto secundario: #5A6661
  - Blanco hueso para tarjetas: #FBF8F2
- Tipografía:
  - Titulares: "Fraunces" (serif moderna, peso 500-600, ligero italic en algunas palabras destacadas)
  - Cuerpo y UI: "Inter" (sans, 400-500)
- Bordes redondeados generosos (rounded-2xl y rounded-3xl), sombras suaves, mucho aire, decoraciones SVG flotantes (puntos, líneas curvas, hojas) en los bloques principales.
- Idioma: español de España. Tono cercano y claro, verbos en activo. Sin precios concretos.

## Estructura de la home (en orden)

1. **Header sticky** con fondo crema translúcido y leve blur al hacer scroll. A la izquierda logo en SVG inline (inventa un símbolo geométrico tipo diente estilizado + wordmark "Lumora Dental"). En el centro menú con enlaces: Inicio (dropdown con Inicio y Inicio alternativo), Servicios (dropdown), Doctores, Páginas (dropdown con Detalle doctor, Contacto, Registro, Acceso, 404). A la derecha botón primario verde oscuro con texto "Pedir cita" y un icono de flecha → dentro de un círculo. En móvil menú hamburguesa que despliega un panel lateral.

2. **Hero** a pantalla casi completa con fondo crema:
   - A la izquierda: pequeño badge con punto verde "Clínica dental en Madrid", titular grande en Fraunces a dos líneas tipo "Una sonrisa sana / para una vida más plena" (inventa algo similar, no copies), subtítulo de 2 líneas, botón primario "Conoce al equipo" y un botón secundario fantasma "Ver servicios".
   - A la derecha: bloque grande con esquinas redondeadas, dentro una imagen de una persona sonriendo (usa una imagen placeholder de unsplash dental). En las esquinas del bloque, decoraciones SVG flotantes (círculo con puntos, hoja, arco) animadas con un leve float en CSS.
   - Pequeñas tarjetas flotantes superpuestas: una con "+15 años de experiencia" y otra con valoración "4.9/5 · 1.200 reseñas".

3. **Tira de partners/aseguradoras** en escala de grises con 6 logos inventados (texto en mayúsculas con icono simple).

4. **Sobre nosotros**: dos columnas. Izquierda: collage de dos imágenes con esquinas redondeadas y un badge circular giratorio con texto "Lumora · desde 2010 ·". Derecha: etiqueta "Sobre nosotros", titular Fraunces, párrafo, y lista de 4 ventajas con icono check en círculo menta (Equipo titulado, Tecnología 3D, Trato personalizado, Sedación consciente).

5. **Servicios**: grid de 6 tarjetas en blanco hueso con icono circular menta, título y descripción corta. Servicios inventados: Odontología general, Ortodoncia invisible, Implantes, Estética dental, Endodoncia, Odontopediatría. Hover: la tarjeta se eleva y el icono cambia a verde oscuro.

6. **Proceso en 4 pasos** horizontal con números grandes serif (01, 02, 03, 04), título y descripción corta. Pasos: Primera visita, Diagnóstico digital, Plan personalizado, Tratamiento y seguimiento.

7. **Equipo**: grid de 4 tarjetas con foto vertical, overlay con nombre Fraunces, especialidad y mini iconos sociales. Inventa nombres (Dra. Elena Soriano, Dr. Marcos Vidal, Dra. Inés Ortuño, Dr. Javier Peñalver) y especialidades.

8. **Contadores**: 4 cifras en fila sobre fondo verde oscuro con texto crema. Animadas con IntersectionObserver al entrar en viewport: 15 años, 12.000 pacientes, 18 especialistas, 3 sedes.

9. **Testimonios**: slider horizontal de tarjetas grandes en blanco hueso con cita, 5 estrellas mostaza, foto redonda y nombre + tratamiento. Controles prev/next y bullets. Auto-play cada 6s. Inventa 4 testimonios.

10. **FAQ**: dos columnas. Izquierda: etiqueta, titular, párrafo y botón "Contactar". Derecha: acordeón de 6 preguntas con + que rota a × al abrir. Solo una abierta a la vez.

11. **CTA banner final**: fondo verde oscuro #1F3A34 con decoración SVG, titular grande crema "¿Listo para cuidar tu sonrisa?" (inventa variante), botón crema con flecha "Reservar cita".

12. **Footer**: 4 columnas sobre fondo crema más oscuro. Col 1: logo + descripción breve + iconos sociales. Col 2: Enlaces (Inicio, Servicios, Doctores, Contacto). Col 3: Servicios (lista de 5). Col 4: Contacto (dirección, teléfono, email, horario). Línea inferior con copyright "© 2025 Lumora Dental" y enlaces a Aviso legal y Privacidad.

## Requisitos técnicos
- Un único archivo `index.html` autocontenido.
- Tailwind vía `<script src="https://cdn.tailwindcss.com"></script>` con configuración inline para los colores y fuentes personalizados.
- Google Fonts: Fraunces e Inter.
- JavaScript vanilla para: menú móvil, dropdowns del nav, acordeón FAQ, slider de testimonios con auto-play y controles, contadores animados al hacer scroll, animaciones de entrada suaves con IntersectionObserver (fade-up).
- Imágenes: usa Unsplash con `source.unsplash.com` o URLs concretas de fotos de odontología/sonrisas/clínicas.
- SVGs inline para iconos, logo y decoraciones flotantes.
- Accesible: contraste correcto, aria-labels en botones de icono, focus visibles.
- Responsive impecable: mobile first, breakpoints md y lg.
- Sin lorem ipsum: todos los textos en español de España, originales y coherentes con una clínica dental.
- No incluyas precios concretos ni referencias a marcas reales.

Entrega solo el archivo HTML completo, listo para abrir en 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>
```

6.519 caracteres · 87 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Header sticky con menú y CTA
1.2 Hero con titular, botón e imagen decorada
1.3 Tira de logos partners
1.4 Sobre Nosotros con imagen y lista de ventajas
1.5 Grid de servicios (6 tarjetas)
1.6 Proceso de 4 pasos
1.7 Equipo de odontólogos (4 tarjetas)
1.8 Contadores de cifras
1.9 Slider de testimonios
1.10 FAQ en acordeón
1.11 CTA banner final
1.12 Footer en 4 columnas

SERVICIOS

2.1 Header
2.2 Hero compacto con título y breadcrumb
2.3 Listado completo de servicios con imagen y descripción
2.4 Bloque de tecnología/equipamiento
2.5 CTA banner
2.6 Footer

DOCTORES (LISTADO)

3.1 Header
3.2 Hero compacto
3.3 Filtros por especialidad
3.4 Grid de odontólogos (8 tarjetas)
3.5 CTA banner
3.6 Footer

DETALLE DOCTOR

4.1 Header
4.2 Cabecera con foto grande, nombre, especialidad, datos de contacto
4.3 Biografía y formación
4.4 Especialidades y horarios
4.5 Formulario de cita con este doctor
4.6 Footer

CONTACTO

5.1 Header
5.2 Hero compacto
5.3 Bloque con datos (dirección, teléfono, email) e iconos
5.4 Formulario de contacto
5.5 Mapa
5.6 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, mensaje y botón volver
7.3 Footer

PROMPTS RELACIONADOS · SALUD Y MEDICINA

Otros prompts de la misma categoría

Ficha de marca

Nombre: Lumora Dental
Sector: Clínica dental con servicios integrales y equipo de odontólogos especialistas
Claim: Cuidamos tu sonrisa con tecnología y cercanía

Bloques de la home

1.1 Header sticky con logo SVG, menú con dropdowns (Inicio, Servicios, Doctores, Páginas) y botón CTA Pedir cita con flecha
1.2 Hero con titular grande a dos líneas, botón primario, imagen grande de paciente sonriendo dentro de un bloque con esquinas redondeadas y decoración SVG flotante
1.3 Tira de logos de partners/aseguradoras en escala de grises
1.4 Bloque Sobre Nosotros con imagen a la izquierda y texto + lista de ventajas con iconos check a la derecha
1.5 Grid de servicios (6 tarjetas) con icono circular, título y descripción corta
1.6 Sección de proceso paso a paso (4 pasos numerados horizontales)
1.7 Equipo de odontólogos en grid de 4 tarjetas con foto, nombre, especialidad y redes
1.8 Contador de cifras (años de experiencia, pacientes, especialistas, sedes)
1.9 Testimonios en slider con foto, estrellas, cita y autor
1.10 FAQ en acordeón a dos columnas (texto + preguntas)
1.11 CTA banner final con fondo verde oscuro y botón claro para reservar cita
1.12 Footer en 4 columnas (marca + descripción, enlaces, servicios, contacto) con línea inferior de copyright 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