SAAS / STARTUP · Claude Design · HTML

NexuFlow — Prompt de diseño web para Claude AI

★★★★★4,9 989 descargas

Plataforma de gestión de tesorería y pagos digitales para empresas Control absoluto de los flujos financieros operativos.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea una web profesional para 'NexuFlow', una plataforma SaaS de gestión financiera y pagos, utilizando HTML5, Tailwind CSS y JavaScript vanilla en un único archivo. 

DISEÑO VISUAL:
- Paleta de colores: Fondo principal blanco puro (#FFFFFF), primario azul profundo corporativo (#0A2540), acentos en azul eléctrico (#635BFF) y grises suaves para bordes (#E6EBF1).
- Tipografía: Sans-serif moderna y geométrica (estilo Inter o Montserrat), con pesos contrastados entre titulares (Bold) y cuerpo (Regular).
- Estética: Minimalista, aire 'Enterprise', bordes ligeramente redondeados (rounded-xl), sombras suaves y mucho espacio en blanco (whitespace).

ESTRUCTURA DETALLADA:
1. HEADER: Navbar sticky y transparente que se vuelve sólida al hacer scroll. Debe incluir un logo textual elegante, un menú con dropdowns complejos (Mega-menus) para 'Funcionalidades' y 'Recursos', y un botón de acción 'Empezar ahora' destacado en azul eléctrico.
2. HERO SECTION: Layout de dos columnas. Izquierda: Titular impactante sobre el control financiero, párrafo descriptivo corto y botón CTA primario. Derecha: Un contenedor simulando una interfaz de software (mockup) con tarjetas de saldo, gráficos de barras simples y transacciones recientes.
3. SOCIAL PROOF: Franja horizontal con logotipos en escala de grises que pasan a color al hacer hover.
4. FEATURES: Bloques alternos (Imagen-Texto / Texto-Imagen). Usa iconos lineales y bullets con checks para enumerar ventajas técnicas.
5. INTERACTIVE SECTION: Un componente de 'Tabs' donde el usuario pueda cambiar entre 'Gestión de Gastos' y 'Automatización'. Al cambiar la pestaña, el contenido visual y el texto deben actualizarse dinámicamente.
6. PRICING: Tres tarjetas de precios. La central debe estar resaltada como 'Recomendada'. Incluye un toggle switch para cambiar entre pago 'Mensual' y 'Anual'.
7. FOOTER: Fondo gris muy claro. Cuatro columnas de enlaces (Producto, Compañía, Legal, Soporte) y una sección final con copyright y redes sociales.

REQUISITOS TÉCNICOS:
- Responsividad total (Mobile First).
- Implementar los desplegables del menú y el switch de precios con JavaScript vanilla.
- Animaciones suaves de entrada (fade-in) al hacer scroll utilizando Intersection Observer.
- Uso exclusivo de CDN para Tailwind CSS.

---

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

CAPTURA COMPLETA · HOME