TECNOLOGÍA · Claude Design · HTML

Finova — Prompt de diseño web para Claude AI

★★★★★4,7 1.759 descargas

Plataforma SaaS de gestión financiera personal Herramientas simples para entender tu dinero.

↓ 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 Finova (finova.com) siguiendo el estilo visual y la estructura del template analizado. Utiliza HTML5 y Tailwind CSS vía CDN en un único archivo, con JavaScript vanilla solo para el menú móvil y los accordions. 

Paleta de colores: 
- Primario: #0A84FF (azul vibrante) 
- Secundario: #1F2937 (gris oscuro) 
- Fondo: #F9FAFB (gris muy claro) 
- Accent: #10B981 (verde) 
- Texto principal: #111827 (casi negro) 

Tipografía: Inter (carga desde Google Fonts), peso 400 y 600 para titulares. 

Header: barra superior sticky, logo a la izquierda, enlaces de navegación (Home, Funcionalidades, Precios, Sobre nosotros, Blog) con subrayado animado, botón CTA "Obtener plantilla" a la derecha. Menú colapsable en móvil con icono hamburguesa. 

Home sections (numeradas según "secciones"):
1.1 Header ya descrito.
2.1 Hero: título grande "Domina tus finanzas con Finova", párrafo descriptivo, dos botones de descarga (App Store y Google Play) con imágenes SVG, fondo con ilustración abstracta en tono azul tenue.
3.1 Área de imágenes del producto: tres columnas con mockups del dashboard, cada una envuelta en una tarjeta con sombra ligera; al pasar el ratón, efecto de elevación.
4.1 Métricas: bloque de tres tarjetas horizontales mostrando "10K+ Usuarios activos", "200K+ Descargas" y "4.8/5 Valoración"; número animado con contador simple.
5.1 Footer: fondo gris oscuro, enlaces organizados en tres columnas (Producto, Empresa, Legal), iconos de redes sociales, texto de copyright y enlace de contacto (mailto:hola@finova.com).

Additional pages (Features, Pricing, About, Blog, Contact) deben conservar la misma cabecera y pie de página. Cada página incluye secciones descritas en la tabla, usando tarjetas, tablas y accordions con clases Tailwind (e.g., `grid`, `flex`, `bg-white`, `rounded-lg`, `shadow`). 

Requisitos técnicos:
- Incluir `<meta charset="utf-8">`, viewport responsive, y título descriptivo.
- Cargar Tailwind CDN: `<script src="https://cdn.tailwindcss.com"></script>` y configurar colores personalizados mediante `tailwind.config = {theme:{extend:{colors:{primary:'#0A84FF',secondary:'#1F2937',accent:'#10B981'}}}}`.
- Cargar Inter: `<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">` y aplicar con `font-sans`.
- Implementar script para toggle del menú móvil y para contadores animados.
- Mantener la semántica HTML5 (`<header>`, `<nav>`, `<main>`, `<section>`, `<footer>`).

---

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

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Header con logo, menú y botón CTA
2.1 Hero con título, párrafo, botones de app stores
3.1 Galería de imágenes del producto (variantes V1‑V5)
4.1 Estadísticas de usuarios y testimonios breves
5.1 Footer con enlaces institucionales y redes sociales

FEATURES

1.1 Lista de características en tarjetas con iconos
2.1 Imagen ilustrativa a la derecha de cada bloque

PRICING

1.1 Tabla comparativa de planes con botones de selección
2.1 FAQ accordion bajo la tabla

ABOUT

1.1 Historia de la empresa y misión
2.1 Equipo con fotos y breves biografías

BLOG

1.1 Lista de artículos con imágenes, títulos y extractos
2.1 Paginación al final

CONTACT

1.1 Formulario de contacto simple (nombre, email, mensaje)
2.1 Mapa incrustado y datos de dirección

PROMPTS RELACIONADOS · TECNOLOGÍA

Otros prompts de la misma categoría

Ficha de marca

Nombre: Finova
Sector: Plataforma SaaS de gestión financiera personal
Claim: Herramientas simples para entender tu dinero

Bloques de la home

1.1 Header con logo, menú de navegación y CTA "Obtener plantilla"
2.1 Hero principal con titular, subtítulo, botones de tiendas y barra de usuarios
3.1 Imagen ilustrativa del producto con overlays decorativos
4.1 Sección de métricas de usuarios (10k+, 200k+ happy users)
5.1 Footer con enlaces de navegación 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