Kombai: la herramienta de IA para generar diseños frontend que no parecen hechos con IA

Si has trabajado con generadores de sitios web con inteligencia artificial, seguramente ya conoces el problema: casi todos producen lo mismo. Recuadros con textos, colores planos y estructuras genéricas que se reconocen a kilómetros. Es el famoso AI slop: diseños que técnicamente funcionan, pero que se sienten vacíos y repetidos.

Durante mucho tiempo se asumió que eso era el techo de lo que la IA podía hacer en diseño web. En este artículo te quiero mostrar una herramienta que rompe esa idea: Kombai, un agente que trabaja dentro de tu editor de código y que genera diseños frontend que no parecen generados por una IA, sino diseños profesionales, con animaciones, estructura compleja y código real que puedes editar.

Lo mejor es que no solo crea el diseño, sino también el código, y te da herramientas para editar todo de forma sencilla. Si ya estás cansado de generar los mismos diseños de siempre y te enfocas en frontend, esta puede ser una de las mejores opciones que pruebes este año.

Vamos paso a paso.

¿Qué es Kombai?

Kombai es una plataforma que te permite generar sitios web frontend completos, desde el diseño hasta el código, utilizando skills y herramientas propias que hacen que el resultado se vea profesional.

Lo interesante es que no es una herramienta que tengas que descargar como aplicación aparte. Se integra directamente en tu editor de código —VS Code, Cursor, Trae, Kiro, Antigravity y varios más— a través de una extensión. Si ya eres desarrollador, no necesitas instalar nada nuevo en tu flujo de trabajo.

Además, incluye un canvas que te permite editar el diseño con simples clics, interactuando directamente con la IA. Es decir, no te limita a escribir prompts: puedes seleccionar elementos, cambiar textos, colores y estilos visualmente, como si estuvieras en una herramienta de diseño.

La idea central de Kombai es no generar esos diseños comunes y genéricos, sino permitirte crear, con unos cuantos prompts, un diseño sorprendente e incluso con animaciones.

Instalación: cuestión de un par de clics

Empezar es bastante fácil. Entra a su sitio web y busca el botón "Try Kombai for free". Allí te dará varias opciones para instalarlo según tu editor: VS Code, Cursor, Antigravity, Trae o Kiro.

Para este recorrido usaremos VS Code, que es el más popular:

1. Haz clic en "Instalar en Visual Studio Code".
2. Te enviará a la extensión que debes instalar.
3. Presiona Instalar, luego Confiar, y listo.

Tras unos segundos lo tendrás disponible. Verás una pantalla de bienvenida con un resumen de lo que puedes hacer (construir UI o generar código de producción). Para empezar, haz clic en "Let's get started" y luego en Abrir.

A partir de ahí, simplemente crea una carpeta para tu proyecto —por ejemplo, my-project— y arrástrala dentro de tu editor. Al instalar Kombai tendrás un ícono que abre el chat desde donde le pides la creación de tu sitio.

Dato útil: al momento de escribir esto, Kombai ofrece un 50% de descuento al usar el modelo Fabel 5. Los modelos se seleccionan desde el panel del chat.

El panel: modelos y modos de trabajo

Cuando entras a Kombai tienes un panel —el chat del agente— donde lo más básico es poder cambiar entre modelos inteligentes: Claude Opus, Qwen, e incluso Fabel 5.

Pero hay algo igual de importante que los modelos: los modos de trabajo. Más allá de qué modelo uses, puedes cambiar cómo trabaja Kombai. Puedes pedirle que:

• Planifique una tarea antes de ejecutarla.
• Escriba código directamente.
• Debuguee un problema.
• Chatee para resolver dudas.

Esta separación entre modelo y modo te da mucho control sobre el tipo de respuesta que obtienes.

Generando tu primer diseño con "Design"

La primera característica que vale la pena probar se llama Design, y como su nombre indica, sirve para generar diseños frontend.

Para el ejemplo, pedimos algo concreto:

"Crea un landing page de una marca de un teclado mecánico en dark mode con temática cyberpunk."

Lo primero que hace Kombai no es generar desde cero. Busca referencias e inspiración en otros diseños, carga algunas imágenes de ejemplo y a partir de ahí construye el sitio. Por eso los resultados no se sienten genéricos.

Mientras trabaja, no solo escribe código: te muestra una especie de canvas donde ves cómo el sitio se va cargando, con herramientas extras para editarlo. Incluso aparece un borrador en progreso.

Si esperas un poco, el resultado es un landing page que no luce nada mal: diseños con referencias de múltiples sitios, animaciones y una estructura compleja. No es el típico recuadro con textos que delata a la IA. Kombai analiza parte por parte y genera el proyecto completo, con secciones distintas, videos de demostración y efectos de hover.

Y todo esto lo hace relativamente rápido.

Editar el diseño visualmente, sin escribir código

Una vez generado el sitio, puedes abrirlo en el navegador (se abre en tu localhost) y empezar a revisar y modificar cada parte simplemente seleccionándola.

Dentro del canvas, los elementos son seleccionables. Verás un botón que dice "Edit design". Al activarlo puedes:

• Editar textos: doble clic sobre cualquier texto y lo cambias al instante. Por ejemplo, cambiar "telemetría" por "actualizaciones".
• Añadir elementos: textos, SVGs y más debajo de una sección.
• Cambiar colores: seleccionas un elemento y ajustas su color para que combine con el resto del diseño.
• Modificar orientación, background y estilos de textos e imágenes.

Todo esto se hace elemento por elemento, con hover y clics, de forma muy parecida a una herramienta de diseño tradicional. El propio editor incluso tiene su modo oscuro.

Generar variaciones y secciones nuevas

¿Y si te falta una sección? Por ejemplo, un formulario de contacto. Para eso está la opción "Generate versions":

1. Selecciona el estilo o tamaño de pantalla (por ejemplo, el de laptop, la pantalla más grande).
2. Escribe lo que quieres añadir: "añade un formulario de contacto".
3. Dale a "Generate version".

En lugar de reescribir todo, Kombai toma en cuenta el diseño actual y lo continúa. El nuevo formulario aparece con el mismo tema y estilo del sitio, manteniendo la coherencia visual.

Aquí entra en juego algo clave: Kombai usa sus propios skills. Por eso los diseños tienen ese acabado distinto. No trabaja con el modelo "en crudo", sino que añade instrucciones adicionales propias para elevar la calidad del resultado.

Si una sección nueva no tiene animación al cargar, puedes seleccionarla, darle "añadir elemento al contexto" y pedir algo como "añade una animación cuando se ve por primera vez". Kombai hace el cambio y lo aplica respetando el diseño existente.

De diseño a código de producción

Aquí está la parte más importante: además de generar y editar el diseño, puedes convertirlo en código real.

Hay un botón grande que dice "Code design". Al hacer clic, Kombai entiende que te refieres al diseño completo. Puedes pedírselo tan simple como "crea el proyecto".

Cuando lo haces, Kombai te pregunta con qué stack quieres construirlo:

• React con TypeScript
• Next.js
• HTML simple
• Astro
• Y más opciones

En el ejemplo elegimos React con TypeScript. A partir de ahí, Kombai lanza un subagente que revisa el diseño y empieza a construir el código. Te da un resumen de lo que va a usar y te permite guardar ese stack (con sus librerías de animación como GSAP o Anime.js) para reutilizarlo en futuros diseños.

Como todo buen agente, te preguntará si quieres ejecutar comandos. Puedes activar "Auto run all commands" para que ejecute un comando tras otro automáticamente, y verás cómo se lanzan dentro de VS Code mientras crea el proyecto.

Kombai prueba su propio trabajo

Cuando termina de generar el sitio, notarás algo interesante: además del código, Kombai prueba el resultado por sí mismo. Tienes una nueva interfaz para probar el diseño y seguir modificándolo.

Ahora ya no es solo un diseño en HTML, sino código de React transcrito, con correcciones que Kombai aplicó al revisarlo. Verás cómo el propio agente interactúa con el sitio y prueba cada una de las interactividades que diseñó antes.

Al final, te muestra todos los archivos que ha ido modificando, así que puedes revisar uno a uno los cambios de código por si quieres ajustar algo tú mismo. Recuerda: sigues estando dentro de VS Code todo el tiempo. También puedes aceptar todos los cambios de una vez.

Edición avanzada: el árbol de etiquetas HTML

La vista especial del canvas trae íconos extra para intercambiar o modificar elementos con precisión. Si seleccionas, por ejemplo, la sección de navegación, aparece el árbol de etiquetas HTML, lo que te permite seleccionar elemento por elemento.

Desde ahí puedes:

• Seleccionar un selector y añadirlo al chat como referencia de lo que quieres editar.
• Usar el ícono "T" para editar textos directamente.
• Pedir cosas más complejas, como: "añade un dropdown de versiones y, al dar clic, envía a una página dedicada de las versiones del teclado".

En este último caso, Kombai genera una página nueva manteniendo las mismas animaciones y estilos, lo que hace muy fácil seguir construyendo a partir de ahí.

Funciones adicionales que marcan la diferencia

Más allá del flujo básico, Kombai tiene varias funciones que lo hacen potente para trabajo serio de frontend:

Conexión con el navegador. Tienes un navegador adaptado al diseño para continuar modificaciones sobre la UI renderizada.

Tech Stack configurable. Defines y cambias las tecnologías de tu proyecto cuando quieras.

Administrar reglas. Dentro de las configuraciones tienes un archivo .md donde puedes añadir instrucciones que Kombai siempre tomará en cuenta. Por ejemplo: "si el elemento es nuevo en el landing, añade una animación". Es básicamente una regla persistente para todos tus diseños.

Context Graph. Una de las funciones más útiles. Le indicas un reusable source code dentro de tu workspace, seleccionas una carpeta y Kombai escanea el proyecto: colores, espaciados, imágenes, textos, fuentes... todo. La próxima vez que pidas algo nuevo —por ejemplo, un panel de control— tomará ese Context Graph como referencia, manteniendo la coherencia de diseño sin que tengas que describirlo de nuevo.

Soporte para MCPs. Puedes añadir servidores MCP externos, sobre todo si ya tienes uno integrado o has desarrollado el tuyo.

Inspirations (referencias visuales). Al crear un diseño no tienes que limitarte a texto. El ícono "Inspirations" abre una ventana con varios landing pages de referencia que no parecen hechos con IA. Puedes navegarlos, ver una descripción detallada y darle a "usar de inspiración" para que el siguiente diseño tome ese estilo como base.

Conclusión

Kombai es una herramienta sorprendentemente fácil de usar y, aunque vive dentro de tu editor de código, hace todo el trabajo pesado por ti: tanto el diseño como la escritura del código.

Lo que más destaca es la combinación de tres cosas que normalmente están separadas: diseños con criterio estético real (gracias a sus referencias y skills propios), código de producción en el stack que elijas, y herramientas de edición visual que te dejan refinar cada detalle sin pelear con prompts interminables.

Si tu enfoque está en trabajos de frontend y estás cansado de los diseños genéricos que produce la mayoría de herramientas de IA, vale mucho la pena probarla. Tiene un plan gratuito para empezar y comprobar por ti mismo de qué se trata.

¿Tienes alguna duda o te gustaría ver algo específico creado con esta herramienta? Déjamelo en los comentarios. Nos vemos en el próximo.