BELLEZA / SPA · Claude Design · HTML

Patitas Felices — Prompt de diseño web para Claude AI

★★★★★4,8 1.460 descargas

Peluquería y estética canina y felina con servicios a domicilio Cuidamos a tu compañero como si fuera nuestro.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea en un único archivo HTML autocontenido (HTML + Tailwind CDN + JS vanilla, sin frameworks ni dependencias externas salvo Google Fonts) la home de una marca ficticia llamada 'Patitas Felices', un centro de peluquería y estética para mascotas con servicios en salón y a domicilio. Dominio patitasfelices.com, email hola@patitasfelices.com, año 2025. Claim: 'Cuidamos a tu compañero como si fuera nuestro'. Texto 100% original en español de España, tono cercano y profesional, sin jerga marketinera y sin precios concretos.

ESTILO VISUAL
- Paleta cálida y amable: fondo crema #FBF6EE, color principal coral suave #F2785C, secundario verde menta #6FB39A, acento mostaza #E9B949, textos en marrón oscuro #2A1F18 y gris medio #6B5E55, blanco puro para tarjetas.
- Tipografía: 'Fraunces' (serif redondeada) para titulares grandes con weight 600-700, 'Inter' para cuerpo y UI.
- Esquinas muy redondeadas (rounded-3xl en tarjetas y botones tipo pill rounded-full).
- Mucho aire entre secciones (py-24), contenedores max-w-7xl centrados.
- Sombras suaves y difusas, hover con leve elevación.
- Iconografía estilo lineal redondeada (usar SVG inline simples de mascotas, tijeras, ducha, corazón, pata, etc.).
- Imágenes de mascotas: usar placeholders de https://images.unsplash.com con queries de perros y gatos.

HEADER
- Fondo transparente sobre el hero, se vuelve sólido crema al hacer scroll (JS).
- Logo a la izquierda (texto 'Patitas Felices' con una pata SVG coral al lado).
- Navegación centrada: Inicio, Sobre nosotros, Servicios, Páginas (dropdown con Equipo, Paquetes, Blog, Tienda, Sedes), Contacto.
- A la derecha botón pill coral 'Pide tu cita'.
- Menú hamburguesa funcional en móvil.

HOME, sección a sección
1.2 HERO: a dos columnas. Izquierda: pequeño badge pill verde menta 'Estética animal de confianza', titular grande en Fraunces a 2 líneas ('Mimamos a tu mascota / con manos expertas'), párrafo de 2 líneas, dos botones (coral sólido 'Reservar cita' y outline marrón 'Ver servicios'), debajo mini-fila con avatares circulares + texto 'Más de 4.200 familias confían en nosotros'. Derecha: foto recortada de un perro feliz dentro de un blob orgánico coral, con pequeñas tarjetas flotantes (una con icono de tijeras 'Corte personalizado' y otra con icono corazón '+15 años cuidando').
1.3 LOGOS: tira con título pequeño 'Colaboramos con clínicas veterinarias de toda España' y 6 logos en gris claro (textuales tipo 'VetNorte', 'AnimalCare', 'PetClinic Madrid', etc., inventados).
1.4 SOBRE NOSOTROS: dos columnas. Izquierda imagen redondeada con una segunda foto pequeña superpuesta y un sello circular giratorio 'Centro certificado · Desde 2010'. Derecha: eyebrow 'Nuestra historia', titular Fraunces, párrafo, lista con checks verdes de 4 valores y botón 'Conócenos'.
1.5 SERVICIOS: eyebrow 'Lo que hacemos', titular centrado, grid 3x2 de 6 tarjetas (Baño e hidratación, Corte y peinado, Estética felina, Cuidado dental, Spa relajante, Servicio a domicilio). Cada tarjeta: fondo blanco, icono SVG en círculo coral, título, descripción corta, enlace 'Saber más →'. Al hover, la tarjeta sube y el círculo cambia a menta.
1.6 CÓMO FUNCIONA: fondo verde menta suave, titular, 4 pasos horizontales con número grande translúcido detrás, icono pequeño y descripción (Elige servicio, Reserva fecha, Te recogemos / vienes, Disfruta el resultado). Línea punteada conectando los pasos en desktop.
1.7 PAQUETES: 3 tarjetas grandes (Esencial, Bienestar, Premium). La del medio destacada con fondo coral y texto blanco, badge 'Más elegida'. Cada tarjeta lista 5-6 prestaciones con checks y botón 'Reservar'. Sin precios numéricos, sustituirlos por 'Consulta condiciones'.
1.8 EQUIPO: carrusel horizontal con flechas y arrastre. 6 tarjetas con foto circular, nombre inventado, especialidad ('Estilista canina senior', 'Especialista felina', etc.) e iconos sociales pequeños. Scroll snap en JS.
1.9 TESTIMONIOS: slider de 1 testimonio a la vez con foto de la mascota a la izquierda en formato circular grande, comillas decorativas Fraunces enormes, cita original, nombre del cliente y mascota, y dots de navegación. Auto-rotación cada 6s.
1.10 CIFRAS: banda marrón oscuro con 4 contadores animados al hacer scroll (4.200 mascotas felices, 15 años de experiencia, 12 profesionales, 3 sedes).
1.11 BLOG: eyebrow 'Desde el blog', titular, 3 tarjetas de artículos con imagen redondeada arriba, categoría pill, fecha, titular en Fraunces y enlace.
1.12 CTA FINAL: bloque grande con fondo coral, ilustración de pata blanca grande translúcida de fondo, titular Fraunces blanco a dos líneas, párrafo y botón blanco pill 'Reservar ahora'.
1.13 FOOTER: fondo crema oscuro, 4 columnas (marca + claim + redes; Servicios; Empresa; Recursos), una fila newsletter con input pill + botón coral, barra inferior con copyright '© 2025 Patitas Felices', enlaces legales y selector de idioma.

INTERACTIVIDAD JS
- Menú móvil toggle.
- Header que cambia de fondo al scroll.
- Dropdown de 'Páginas' al hover/click.
- Contadores animados con IntersectionObserver.
- Slider de testimonios con auto-rotación + dots.
- Carrusel del equipo con drag/scroll-snap y flechas.
- Acordeón (no aplica en home, pero deja la función lista por si se reutiliza).
- Animaciones de entrada suaves con IntersectionObserver añadiendo clase 'opacity-100 translate-y-0'.

REQUISITOS TÉCNICOS
- Un único archivo .html válido, responsive mobile-first (breakpoints sm, md, lg).
- Accesible: alt en imágenes, aria-labels en botones de iconos, foco visible.
- Tailwind por CDN con config inline extendiendo colores y fuentes.
- Sin lorem ipsum: todos los textos coherentes con la marca Patitas Felices.
- No mencionar plantillas, Webflow ni ninguna referencia externa.
- Código limpio, comentado por secciones.

---

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

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Header transparente con navegación y CTA
1.2 Hero con titular, subtítulo, dos botones y foto de mascota
1.3 Tira de logos de confianza
1.4 Bloque sobre nosotros a dos columnas
1.5 Grid de 6 servicios con icono
1.6 Cómo funciona en 4 pasos
1.7 Paquetes / packs en 3 tarjetas
1.8 Carrusel del equipo
1.9 Slider de testimonios
1.10 Contador de cifras
1.11 Últimas entradas del blog
1.12 CTA final reserva
1.13 Footer amplio con newsletter

SOBRE NOSOTROS

2.1 Cabecera con titular y migas
2.2 Historia del centro a dos columnas con imagen
2.3 Misión, visión y valores en 3 tarjetas
2.4 Galería de instalaciones en mosaico
2.5 Cifras destacadas
2.6 CTA contacto
2.7 Footer

SERVICIOS

3.1 Cabecera con titular y descripción
3.2 Grid extendido de servicios (9 tarjetas)
3.3 Bloque comparativo de modalidades (en salón / a domicilio)
3.4 FAQ acordeón
3.5 CTA reserva
3.6 Footer

SERVICIO DETALLE

4.1 Cabecera con migas, título y badge de duración
4.2 Galería del servicio
4.3 Descripción larga con lista de incluido
4.4 Sidebar con resumen y botón reservar
4.5 Servicios relacionados
4.6 Footer

EQUIPO

5.1 Cabecera con titular
5.2 Grid de profesionales con foto y especialidad
5.3 Banner 'Únete al equipo'
5.4 Footer

EQUIPO DETALLE

6.1 Cabecera con foto grande y bio
6.2 Especialidades y formación
6.3 Galería de trabajos
6.4 Testimonios sobre la profesional
6.5 CTA reservar con ella
6.6 Footer

PAQUETES

7.1 Cabecera
7.2 Tabla comparativa de packs
7.3 Sección de beneficios incluidos
7.4 Testimonios
7.5 FAQ
7.6 Footer

RESERVA CITA

8.1 Cabecera
8.2 Formulario multipaso (servicio, mascota, fecha/hora, datos)
8.3 Panel lateral con resumen de la reserva
8.4 Garantías y políticas
8.5 Footer

BLOG

9.1 Cabecera con buscador
9.2 Post destacado grande
9.3 Grid de artículos con filtro por categoría
9.4 Paginación
9.5 Newsletter
9.6 Footer

POST DETALLE

10.1 Cabecera con categoría, título, autor y fecha
10.2 Imagen destacada
10.3 Cuerpo del artículo
10.4 Compartir y autor
10.5 Artículos relacionados
10.6 Footer

TIENDA

11.1 Cabecera
11.2 Filtros laterales y grid de productos
11.3 Banner de promoción
11.4 Footer

PRODUCTO DETALLE

12.1 Galería + ficha con opciones y botón añadir
12.2 Descripción larga en tabs
12.3 Productos relacionados
12.4 Footer

SEDES

13.1 Cabecera
13.2 Mapa interactivo
13.3 Listado de sedes con dirección y horarios
13.4 Footer

CONTACTO

14.1 Cabecera
14.2 Formulario y datos de contacto a dos columnas
14.3 Mapa
14.4 Footer

PRÓXIMAMENTE

15.1 Pantalla completa con cuenta atrás y formulario de aviso

404

16.1 Ilustración, mensaje y botón volver al inicio

PROMPTS RELACIONADOS · BELLEZA / SPA

Otros prompts de la misma categoría

Ficha de marca

Nombre: Patitas Felices
Sector: Peluquería y estética canina y felina con servicios a domicilio
Claim: Cuidamos a tu compañero como si fuera nuestro

Bloques de la home

1.1 Header transparente con logo, navegación (Inicio, Sobre nosotros, Servicios, Páginas con dropdown) y botón CTA 'Pide tu cita'
1.2 Hero a pantalla con titular grande, subtítulo en dos líneas, dos botones (reservar / ver servicios) y foto recortada de mascota sobre fondo color crema
1.3 Tira de logos / sellos de confianza (clínicas asociadas, certificaciones) en escala de grises
1.4 Bloque 'Sobre nosotros' a dos columnas: imagen redondeada a la izquierda, texto + lista de valores + botón a la derecha
1.5 Grid de servicios (6 tarjetas) con icono ilustrado, título, descripción corta y enlace 'Saber más'
1.6 Banner 'Cómo funciona' en 4 pasos numerados horizontales con icono y descripción
1.7 Sección de paquetes / packs (3 tarjetas destacadas con lista de prestaciones y CTA, sin precios concretos)
1.8 Bloque del equipo: carrusel horizontal de tarjetas con foto circular, nombre, especialidad y enlaces sociales
1.9 Testimonios en formato slider con foto de la mascota, cita del cliente y nombre
1.10 Contador de cifras (mascotas atendidas, años de experiencia, profesionales, sedes)
1.11 Últimas entradas del blog (3 tarjetas con imagen, categoría, fecha y titular)
1.12 Llamada final con fondo de color: 'Reserva una visita' + botón grande
1.13 Footer amplio con logo, claim, columnas de enlaces, newsletter y barra inferior

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