Kombai

Kombai

Kombai · Programación

Kombai es un agente de diseño frontend con IA que prueba interfaces en un lienzo y escribe código listo para producción dentro de tu propio repositorio.

Vista previa de la interfaz de Kombai

Acerca de Kombai

About

Qué es Kombai

Kombai es un agente de ingeniería de diseño para trabajo frontend. Vive en dos sitios a la vez: un lienzo infinito donde pruebas distribuciones y tu base de código, donde escribe componentes que encajan con lo que ya publicas. Ahí está la diferencia. Casi todas las herramientas de código con IA arrancan desde un prompt y devuelven un archivo, mientras que Kombai parte de una decisión de diseño y termina en un diff que puedes revisar.

La empresa nació con una herramienta de Figma a código y después reconstruyó el producto alrededor de una capa de criterio propio que llama taste agent. Esa capa elige estructura, tipografía, espaciado y movimiento para cada tarea, en lugar de repetir los valores por defecto de la IA. Kombai mide la diferencia en su propio Design Creativity Bench, donde reporta mejoras de hasta 13 puntos porcentuales en originalidad y 23 puntos en rango creativo. Son cifras de la casa, así que conviene leerlas como una afirmación del fabricante.

Como herramienta de diseño UI con IA funciona mejor cuando hay algo que seguir. Un repositorio, un sistema de diseño, un Storybook o un archivo de Figma le dan restricciones reales al agente, y el resultado se acerca más a producción. Los proyectos desde cero también salen, aunque dedicas más tiempo a corregir el rumbo. El otro límite está en el formato: es una app de escritorio y una extensión de IDE, sin versión que corra solo en el navegador.

Primeros pasos

  1. Descarga la app de escritorio para Windows, macOS o Linux, o instala la extensión desde el marketplace de VS Code, Cursor, Antigravity, Trae o Kiro.
  2. Inicia sesión y abre una carpeta de proyecto para que Kombai lea tus componentes, tokens y archivos de dependencias.
  3. Importa un archivo de Figma o describe la pantalla que quieres, y deja que el enrutador automático elija el modelo o escógelo tú.
  4. Retoca el resultado en el lienzo o en Kombai Browser, genera el código y revisa el diff antes de hacer merge.

Información del producto

Un vistazo rápido a los precios, las plataformas compatibles y el rendimiento de Kombai.

Plan gratuitoSí
Planes de pago$0 - $40/user/mo
PlataformaWindows, macOS, Linux; VS Code, Cursor, Antigravity, Trae, Kiro
DesarrolladorKombai
CategoríaProgramación
Fecha de lanzamientoJul 2024
Última actualizaciónOct 2026
Visitas al sitio web127.8K
Ranking global del sitio317.8K
Disponibilidad de la APINo

Ideal para

Los usuarios, tareas y casos de uso en los que esta herramienta encaja mejor.

Usuarios

  • Desarrolladores frontend
  • Diseñadores de producto
  • Equipos de producto pequeños

Tareas

  • Convertir pantallas de Figma en componentes React
  • Crear landings y secciones de marketing
  • Reestilizar una página según el sistema de diseño
  • Revisar un flujo de usuario antes del merge

Casos de uso

  • Un sprint de rediseño con fecha límite dura
  • Tu primera semana en un código que no conoces
  • Pulido semanal de interfaz

Funciones clave

Modo diseño sobre un lienzo infinito

Kombai abre con un lienzo en lugar de una caja de chat. Colocas pantallas una al lado de otra, editas texto, espaciado y distribución a mano, y pides variaciones cuando una dirección se queda corta. Todo se mantiene como HTML vivo con estados y animaciones, así que lo que comparas se parece bastante a lo que se publica.

Código de producción en tu repositorio

El modo código escribe dentro de tu proyecto, no en un entorno aislado. Kombai lee tu framework, tus patrones de componentes y la estructura de archivos, y aplica prácticas conocidas para más de 400 librerías frontend. El resultado llega como un diff revisable, algo que importa si tu equipo exige revisión antes de integrar.

Context Graphs y memoria del sistema de diseño

Los Context Graphs indexan componentes, tokens, hooks y utilidades, incluidos paquetes privados de npm e historias de Storybook. El agente reutiliza lo que encuentra en vez de escribir una segunda versión de un botón que ya existe. Con el tiempo, las decisiones guardadas mantienen las páginas nuevas alineadas con las antiguas.

Importación nativa desde Figma

Los archivos de Figma entran por una integración directa, sin servidor MCP de por medio. Kombai interpreta archivos complejos y arregla problemas habituales, como grupos anidados que esconden el espaciado o capas que nunca debieron verse. Los iconos y recursos llegan junto con la distribución.

Navegador editable y pruebas automáticas

Kombai Browser renderiza tu frontend y te deja cambiar textos, estilos y distribución de forma visual. Esos ajustes vuelven al código, y luego el agente recorre los flujos de usuario por su cuenta para detectar estados rotos. Es un ciclo rápido para el último diez por ciento de una página, que suele ser la parte lenta.

Selector con más de 50 modelos

Kombai incluye un agente de IA para frontend que puede llamar a modelos de Claude, GPT, Grok, Kimi y otros, además de un enrutador que asigna el modelo a cada trabajo. Puedes gastar un modelo potente en decisiones de estructura y uno más barato en tareas repetitivas de componentes. La generación de imágenes, vídeo y animación pasa por Veo, Seedance y Nano Banana.

Ventajas y desventajas

Ventajas

  • El código generado reutiliza tus componentes y tokens, así que los comentarios de revisión suelen ser de detalle y no de estructura.
  • La importación de Figma aguanta archivos reales, incluidos los grupos desordenados que atascan a conversores más simples.
  • Diseño, código y pruebas de navegador conviven en una app, lo que elimina casi todo el cambio de herramienta.
  • Más de cincuenta modelos y un enrutador te dan una palanca directa sobre coste y calidad en cada tarea.
  • El plan gratuito sirve para evaluar, y los planes de pago añaden cumplimiento SOC 2 y la promesa de no entrenar con tus datos.

Desventajas

  • Los créditos se agotan rápido cuando exploras mucho, y los paquetes extra se pagan aparte de la suscripción.
  • No hay opción solo web, así que un Chromebook o un equipo bloqueado se queda fuera.
  • Los proyectos pequeños desde cero aprovechan menos el contexto, porque no hay sistema de diseño que reutilizar.
  • Los comandos de terminal y las pruebas de navegador todavía necesitan revisión humana antes de llegar a producción.

Preguntas frecuentes

Diseña y escribe código de interfaces frontend. Exploras distribuciones en un lienzo y luego el agente redacta código de producción en tu repositorio con tus componentes y convenciones. También edita la página en marcha dentro de un navegador propio y prueba flujos.