SALUD Y MEDICINA · Claude Design · HTML

SaludDent — Prompt de diseño web para Claude AI

★★★★★4,7 3.348 descargas

Clínica dental y venta de productos de higiene bucal Cuidamos tu sonrisa día a día.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea un sitio web completo para la marca ficticia **SaludDent** (clínica dental y tienda de productos de higiene bucal) usando **HTML estático, Tailwind CSS vía CDN y JavaScript vanilla** en un solo archivo. El proyecto debe reproducir fielmente la estructura y estética del sitio original (mega‑dropdown con tarjetas, hero con título y botón, secciones en cuadrícula, carrusel de testimonios, tarjetas de blog, footer con múltiples columnas). 

**Paleta de colores** (usar como variables Tailwind):
- #1F2A44 (azul marino profundo) → primary
- #FFFFFF (blanco) → background
- #F5F7FA (gris muy claro) → surface
- #0EA5E9 (azul cian) → accent
- #4B5563 (gris medio) → text‑secondary

**Tipografía**: Inter (Google Fonts) para todo el texto, peso 400 normal y 600 semibold para encabezados.

**Header**: barra fija con logo SVG, enlaces Home, Sobre Nosotros, Servicios, Productos, Blog, Contacto. Incluir mega‑dropdown que muestra mini‑tarjetas con imagen, título y breve descripción (simular 6 enlaces). El dropdown debe abrir al pasar el ratón y cerrarse al mover fuera.

**Hero**: sección a pantalla completa, fondo suave (#F5F7FA), título grande (text‑primary, 4xl), subtítulo gris, botón primary con hover (bg‑accent). 

**Sección 1 – Servicios**: grid de 3 columnas, cada tarjeta con icono SVG, título y descripción corta.

**Sección 2 – Productos destacados**: grid de 4 columnas, tarjeta con imagen placeholder, nombre, precio y botón "Añadir al carrito".

**Sección 3 – Testimonios**: carrusel horizontal simple (sin librerías) que recorre 3 testimonios con foto circular, nombre y comentario.

**Sección 4 – Blog reciente**: 3 tarjetas en fila, cada una con imagen, título, extracto y enlace "Leer más".

**Sección 5 – CTA cita**: barra contrastante (bg‑primary) con texto blanco y botón secundario (border‑white).

**Footer**: 4 columnas – Navegación rápida, Servicios, Información de contacto, Redes sociales (iconos SVG). Fondo gris oscuro (#1F2A44), texto claro.

**Requisitos técnicos**:
- Incluir `<script>` al final para manejar el dropdown y el carrusel (vanilla). 
- Utilizar clases Tailwind utilitarias (`flex`, `grid`, `gap-6`, `p-8`, etc.) sin archivo CSS propio. 
- Añadir meta viewport y SEO básico.
- Mantener la accesibilidad: atributos `aria-label`, `role`, `alt` en imágenes.
- Todo el contenido textual debe ser original en español de España, sin copiar del original.
- No incluir URL externa del proyecto original.

Entrega el código HTML completo 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.843 caracteres · 53 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Barra de navegación fija con logo y mega‑dropdown
1.2 Hero principal con título, subtítulo y CTA
1.3 Servicios destacados en 3 columnas
1.4 Productos destacados en grid de 4 columnas
1.5 Testimonios en carrusel
1.6 Últimos artículos del blog
1.7 CTA de cita previa
1.8 Footer informativo

ABOUT

1.1 Encabezado con imagen y texto descriptivo
1.2 Historia de la clínica en dos columnas
1.3 Equipo profesional en tarjetas con foto y bio
1.4 Valores y certificaciones en iconos
1.5 CTA para agendar consulta
1.6 Footer

SERVICES

1.1 Listado de servicios con imagen y descripción breve
1.2 Íconos de beneficios
1.3 Preguntas frecuentes en acordeón
1.4 CTA de reserva
1.5 Footer

PRODUCTS

1.1 Cabecera de tienda con filtro y búsqueda
1.2 Grid de productos (imagen, nombre, precio, botón)
1.3 Paginación
1.4 Footer

BLOG

1.1 Banner de blog con título
1.2 Lista de artículos en tarjeta (imagen, título, extracto)
1.3 Sidebar con categorías y newsletter
1.4 Footer

CONTACT

1.1 Formulario de contacto con campos básicos
1.2 Mapa incrustado
1.3 Información de horario y teléfono
1.4 Footer

PROMPTS RELACIONADOS · SALUD Y MEDICINA

Otros prompts de la misma categoría

Ficha de marca

Nombre: SaludDent
Sector: Clínica dental y venta de productos de higiene bucal
Claim: Cuidamos tu sonrisa día a día

Bloques de la home

1.1 Barra de navegación fija con logo, enlaces principales y mega‑dropdown con vista previa de tarjetas
1.2 Hero principal con título, subtítulo y botón CTA
1.3 Cuadrícula de servicios destacados con iconos
1.4 Sección de productos en formato grid con tarjetas de precio
1.5 Área de testimonios con carrusel simple
1.6 Blog reciente con tarjetas de artículo
1.7 Llamada a la acción de cita previa
1.8 Footer con enlaces de navegación, 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