SAAS / STARTUP · Claude Design · HTML

SaludNova — Prompt de diseño web para Claude AI

★★★★★4,8 2.669 descargas

Plataforma SaaS de análisis de datos para centros de salud Transformamos datos clínicos en decisiones claras.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea una web completa en un único archivo HTML utilizando Tailwind CSS vía CDN y JavaScript vanilla. La marca es SaludNova (saludnova.com), una plataforma SaaS de análisis de datos para centros de salud. Reproduce fielmente la estructura y estilo del sitio original (hero con título grande, dos botones CTA, galería de miniaturas lateral, menú de navegación colapsable, botón de compra en header, footer minimalista). 

**Paleta de colores**: 
- Azul principal: #0A71B5 
- Azul claro: #E5F2FF 
- Gris oscuro: #1F2937 
- Gris medio: #6B7280 
- Blanco: #FFFFFF 

**Tipografía**: 
- Fuente principal: Inter (cargar desde Google Fonts) 
- Peso: 400, 600, 700 

**Header** (sticky, sombra bajo): 
- Logo a la izquierda (placeholder SVG) 
- Menú horizontal con enlaces: Home, Demo, Inner Pages, Utility 
- Botón primario "Comprar plantilla" (fondo azul, texto blanco) visible en escritorio, oculto en móvil 
- Botón hamburguesa para móvil que despliega el menú

**Sección Hero**: 
- Contenedor centrado, fondo blanco 
- Título h1 grande, color gris oscuro, animación de aparición 
- Grupo de botones: 
   * Primario: "Obtener plantilla" (fondo azul, ícono flecha blanca) 
   * Secundario: "Ver todas las plantillas" (borde azul, texto azul) 
- A la derecha, galería horizontal de 10 miniaturas (imagenes placeholder) con scroll infinito y efecto hover (zoom ligero). Cada miniatura tiene atributo alt descriptivo.

**Footer**: 
- Fondo gris oscuro, texto blanco, enlaces en columnas (Política de privacidad, Términos, Contacto, Redes). 
- Botón secundario de compra similar al header.

**Páginas internas** (solo marcar la estructura, contenido placeholder): 
- Demo: hero con formulario (nombre, email, teléfono, mensaje) y botón "Solicitar demo". 
- Inner Pages: grid 3 columnas de tarjetas con título, breve descripción y enlace. 
- Utility: lista de recursos con íconos y descripción breve.

**Requisitos técnicos**: 
- Usa Tailwind CDN (`<script src="https://cdn.tailwindcss.com"></script>`) y configúralo para incluir la fuente Inter. 
- Todo el CSS debe estar en línea con clases Tailwind, sin archivos externos. 
- JavaScript solo para menú móvil y scroll de galería (vanilla). 
- Asegura accesibilidad: atributos alt en imágenes, roles ARIA en navegación y botones. 
- Optimiza para dispositivos móviles (breakpoints: md, lg). 
- El HTML debe ser válido y bien indentado.

Genera el código completo 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>
```

2.770 caracteres · 62 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Header con logo a la izquierda y menú de navegación (Home, Demo, Inner Pages, Utility) + botón de compra de plantilla y menú hamburguesa responsive
1.2 Hero principal, texto centrado, título grande, dos botones CTA, y galería de imágenes en carrusel/scroll horizontal
1.3 Sección de botones secundarios bajo el hero (Ver todas las plantillas, Comprar plantilla)
1.4 Footer minimalista con enlaces a política, contacto y redes sociales (no extraído del HTML pero implícito)

DEMO PAGE

2.1 Header reutilizado
2.2 Hero con descripción del demo y formulario de solicitud
2.3 Lista de características del producto
2.4 Testimonios y métricas
2.5 Footer reutilizado

INNER PAGES

3.1 Header reutilizado
3.2 Grid de tarjetas que muestra distintas secciones internas (blog, perfil, precios, etc.)
3.3 Paginación o filtrado simple
3.4 Footer reutilizado

UTILITY PAGE

4.1 Header reutilizado
4.2 Lista de recursos útiles (documentación, API, soporte)
4.3 CTA para contacto
4.4 Footer reutilizado

PROMPTS RELACIONADOS · SAAS / STARTUP

Otros prompts de la misma categoría

Ficha de marca

Nombre: SaludNova
Sector: Plataforma SaaS de análisis de datos para centros de salud
Claim: Transformamos datos clínicos en decisiones claras

Bloques de la home

1.1 Header con logo y menú colapsable
1.2 Hero central con título, botones primario/secondario y galería de vistas previas
1.3 Sección de demo y enlaces a plantillas
1.4 Footer con enlaces institucionales y botón de compra

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

SaludNova — Prompt de diseño web para Claude AI

Cópialo y pégalo en Claude Design

Tabla de secciones

HOME

DEMO PAGE

INNER PAGES

UTILITY PAGE

Otros prompts de la misma categoría

JurisNova

Kinetix Flow

KitePulse

Lumen Docs