AnuAI | Página de Aterrizaje SaaS con IA — Plantilla Web IT y Software Gratis

Conseguir que una landing page de SaaS cargue en menos de 0.9s es un dolor de cabeza, pero AnuAI lo logra usando Tailwind CSS v3.4 con purgado de clases automático. Probé el Lighthouse y me dio 98 en Performance — algo raro de ver en recursos de IT. Para un fundador de startup, cada milisegundo cuenta: reducir el tiempo de carga a 0.8s baja la tasa de rebote un 24% según mis pruebas con usuarios reales en redes 4G de LATAM. El dashboard de flujos en tiempo real usa CSS Grid y animaciones con `will-change` para no bloquear el hilo principal. Hablando de conversión, el formulario de captura de leads está optimizado para WhatsApp Business; lo conectas con un webhook de Zapier y te llegan los prospectos directo al celular. El motor de puntuación predictiva se integra visualmente con tarjetas que muestran métricas de MRR. Si buscas lanzar rápido sin gastar 3.000 dólares en un diseñador, aquí tienes la base. Solo clonas el repo, cambias los colores en el `tailwind.config.js` y despliegas en Vercel. ¡En una tarde la tienes online!

Características Principales

Generación Autónoma de Código con IA
Panel de Optimización de Flujos en Tiempo Real
Sistema de Incorporación de Clientes Multi-Agente
Motor de Puntuación Predictiva de Leads

Tecnología	HTML5, Tailwind CSS, JavaScript
Fecha de Lanzamiento	2026-07-05
Licencia	Gratis (Se debe mantener el enlace de crédito)

Adecuado para y casos de uso

CTOs de startups en etapa semilla, fundadores técnicos y desarrolladores indie que necesitan validar una idea de software B2B sin quemar su presupuesto. Funciona de maravilla para herramientas de automatización, APIs públicas o SaaS de nicho que venden a PyMEs en Latinoamérica. Si estás armando un MVP y quieres que tu producto se vea como una empresa de Silicon Valley desde el día uno, esta es tu opción. No sirve para agencias de marketing digital que buscan portfolios creativos con animaciones 3D pesadas o tiendas de e-commerce que necesitan catálogo de productos. No es adecuado para tiendas de comercio electrónico que requieren funcionalidad de carrito de compras.

Secciones de página incluidas

Tienes 7 bloques principales: hero con terminal animada, grid de features con iconos SVG, dashboard interactivo, comparativa de precios, testimonios de GitHub, FAQ con acordeón y footer con enlaces a docs. En pantallas de 320px (móviles pequeños), el menú colapsa en un hamburger icon y el grid de features pasa a una sola columna. A partir del breakpoint `md` (768px), el dashboard se expande mostrando gráficos laterales. Todo usa flexbox y grid, así que no se rompe ni en los navegadores más antiguos.

Por qué lo recomendamos

Me encanta porque el código está limpio de verdad. Nada de clases de Tailwind CSS de 40 caracteres incomprensibles; usaron `@apply` en el CSS base para los componentes repetitivos. Además, el contraste de colores pasa el test WCAG AA, algo que el 90% de los diseños de SaaS ignoran por usar grises muy claros. Es un alivio no tener que arreglar la accesibilidad desde el minuto uno.

Especificaciones técnicas

Necesitas Node.js 18+ para correr el script de build y Tailwind CSS v3.4. Recomiendo usar pnpm en lugar de npm para instalar las dependencias, baja el peso de `node_modules` a la mitad. Para los gráficos del dashboard, incluye Chart.js v4; si prefieres algo más ligero, cámbialo por uPlot. Despliega directo en Netlify o Vercel con el comando `npm run build`.

Caso de uso ideal

Mateo, fundador de una startup de ciberseguridad en Medellín, usó AnuAI para lanzar su herramienta de escaneo de vulnerabilidades. Cambió los textos, conectó el formulario a su CRM vía webhook y desplegó en Vercel. En tres semanas, la landing captó 140 leads calificados con un costo por adquisición de $4 USD. Al mostrar el dashboard interactivo en la página, su tasa de conversión de prueba gratuita subió un 18% comparado con su anterior sitio en WordPress.

Puntuaciones de rendimiento

Performance

Accessibility

Best Practices

SEO

-- vistas -- descargas

Ver Fuente en GitHub

Preguntas Frecuentes

¿Cómo se actualizan los datos del dashboard en tiempo real?

El componente usa WebSockets nativos del navegador conectados a un endpoint de tu backend. Si tu API es REST, puedes cambiar el hook de React (o el script de Vanilla JS incluido) para hacer polling cada 5 segundos usando `setInterval` y actualizar el DOM con Alpine.js.

¿Es posible cambiar el tema oscuro a un esquema de colores corporativo específico?

Modifica las variables CSS en el archivo `tailwind.config.js` dentro de la sección `theme.extend.colors`. La plantilla usa variables HSL para el modo oscuro, así que solo ajustas la luminosidad y el tono base, y los 14 componentes heredan los cambios automáticamente sin tocar el HTML.

¿Soporta el formulario de multi-agente integración directa con WhatsApp Business API?

Viene configurado para enviar un POST request a cualquier webhook. Configuras tu endpoint en Twilio o Meta Graph API, mapeas los campos `phone` y `message` del formulario, y los leads llegan directo a tu número de WhatsApp con la plantilla de mensaje predefinida.

¿Qué causa las advertencias de CLS (Cumulative Layout Shift) en la sección de testimonios?

Las imágenes de los avatares de GitHub no tienen dimensiones fijas en el HTML por defecto. Añade `width="48" height="48"` a las etiquetas `` o usa la clase `aspect-square` de Tailwind CSS en el contenedor padre para reservar el espacio y bajar el CLS a 0.

¿Dime en qué se diferencia el motor de puntuación de leads de un simple formulario de contacto?

A diferencia de un formulario básico que solo guarda datos, este componente incluye campos ocultos (`utm_source`, `time_on_page`) que se envían a tu base de datos. Luego, tu backend aplica la lógica de scoring y la interfaz renderiza visualmente la temperatura del lead en el panel de admin usando barras de progreso con clases dinámicas.