SALUD Y MEDICINA · Claude Design · HTML

VitalPaws — Prompt de diseño web para Claude AI

★★★★★4,9 1.533 descargas

Servicios de salud preventiva para mascotas Cuidamos la vida de tu mascota, paso a paso.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea una web completa para la marca ficticia VitalPaws, una clínica virtual de salud preventiva para mascotas. Usa HTML estático en un solo archivo, Tailwind CSS vía CDN y JavaScript vanilla solo para los dropdowns y animaciones de carga. 

PALETA de colores: 
- Fondo principal: #0A0F14 (casi negro) 
- Texto principal: #FFFFFF 
- Texto secundario: #A0A0A0 
- Acento principal: #34D399 (verde menta) 
- Hover/acento botones: #10B981 
- Estrellas rating: #FBBF24 (amarillo) 

TIPOGRAFÍA: Inter (Google Fonts) para encabezados y texto, peso 400/600. 

ESTRUCTURA:

HEADER (nav) fijo, alto 80px, fondo #0A0F14, logo a la izquierda (svg placeholder), menú central con opción "Explore" que despliega un dropdown con dos columnas: "Pages" (Home, About, Services, Blog, Pricing) y "Other Pages" (Contact, Blog Details, Blog Category). Cada enlace con clase .text-simple y hover color #34D399. Botón secundario a la derecha "Learn More" con estilo .button.is-secondary (fondo #34D399, texto blanco). 

HOME:
1. HERO sección ocupando pantalla completa, fondo de imagen responsiva (placeholder) con overlay negro 0.6. Texto centrado verticalmente: título h1 grande (text-5xl, font-bold, color blanco) "Prioritizing Your Pet's Health and Longevity". Subtítulo p mediano, color #A0A0A0. Rating de 5 estrellas alineado a la derecha, cada estrella SVG con color #FBBF24. Botones bajo el texto: "Get Started" (bg #34D399, hover #10B981) y "Learn More" (transparent, borde #34D399, texto #34D399). Animaciones de entrada usando Tailwind utilities (opacity-0 -> opacity-100 con delay). 

2. SECCIÓN "How it works" con contenedor centrado, fondo #0A0F14. Título h2 (text-3xl, color blanco) "Get peace of mind in 3 simple steps". Subtítulo p gris claro. Grid de 3 columnas (lg:grid-cols-3) con tarjetas: cada tarjeta tiene icono placeholder, título pequeño (uppercase, color #34D399), descripción en texto blanco, fondo #1A1F26, hover escala 105%. Imagen de fondo en cada tarjeta (placeholder) con overlay oscuro. 

FOOTER:
- Fondo #0A0F14, división en 4 columnas en desktop: Navegación, Servicios, Información, Redes sociales. Enlaces con .text-simple, color #A0A0A0, hover #34D399. Datos de contacto (email, teléfono) y pequeños íconos de redes (svg). Texto de copyright pequeño, color #555555. 

EXIGENCIAS TÉCNICAS:
- Archivo index.html con estructura completa, incluye <head> con meta responsive, enlace a Tailwind CDN (`https://cdn.tailwindcss.com`) y a Google Font Inter.
- Script inline al final para manejar el dropdown "Explore" (toggle class "hidden" on click) y para animaciones de scroll simple (intersection observer). 
- Todas las clases deben ser utilidades Tailwind, sin CSS externo.
- Optimiza imágenes con atributos `loading="lazy"` y `srcset` simulados.
- Asegura accesibilidad: roles nav, aria‑expanded, alt en imágenes.

Entrega el código listo para copiar y 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>
```

3.211 caracteres · 49 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

PROMPTS RELACIONADOS · SALUD Y MEDICINA

Otros prompts de la misma categoría

Ficha de marca

Nombre: VitalPaws
Sector: Servicios de salud preventiva para mascotas
Claim: Cuidamos la vida de tu mascota, paso a paso

Bloques de la home

1.1 Barra de navegación con logo, menú desplegable "Explorar" y botón "Learn More"
2.1 Hero principal con título, subtítulo, rating de estrellas, botones "Get Started" y "Learn More" y fondo de imagen hero
3.1 Sección "Cómo funciona" con título, subtítulo, texto descriptivo y grid de tres tarjetas con icono, título y descripción
4.1 Footer con enlaces de navegación, información de contacto y redes sociales

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

VitalPaws — Prompt de diseño web para Claude AI

Cópialo y pégalo en Claude Design

Otros prompts de la misma categoría

Lirio Sereno

Lumara Salud

Lumara Studio

Lumare Skin Studio