El flujo de trabajo de Claude Code + Cursor + Kombai que hizo que los frontends generados por IA se sientan listos para producción

@Suryanshti777
INGLÉShace 1 mes · 04 jun 2026
273K
157
36
21
230

TL;DR

Este artículo explora un flujo de trabajo de desarrollo moderno con IA que utiliza Claude Code para la planificación, Cursor para la construcción y Kombai para la sincronización de diseño a código, con el fin de crear interfaces de usuario consistentes y de alta calidad.

Algo extraño ocurrió en el último año.

La IA se volvió increíblemente buena creando software.

Y, de alguna manera, los productos empezaron a sentirse más genéricos.

Suena contradictorio.

Los modelos se volvieron más inteligentes. Los agentes mejoraron. Las ventanas de contexto explotaron. Los desarrolladores se volvieron dramáticamente más productivos.

Sin embargo, si has pasado tiempo navegando por Product Hunt, lanzamientos de emprendedores independientes o demos de startups de IA recientemente, probablemente has notado el mismo patrón.

Fundadores diferentes.

Productos diferentes.

Industrias diferentes.

Pero las interfaces empiezan a sentirse extrañamente familiares.

Las mismas tarjetas.

Los mismos paneles.

Los mismos diseños.

La misma jerarquía visual.

La misma estética de "SaaS generado por IA".

El código funciona.

El frontend no se siente memorable.

Y creo que eso se debe a que la mayoría de los desarrolladores están enfocados en un problema que ya no existe.

Generar código.

Hoy en día, generar código es fácil.

Generar un frontend que realmente se sienta intencional es mucho más difícil.

La mayoría de los flujos de trabajo modernos con IA ya se ven así:

Claude Code para planificar.

Cursor para implementar.

Publicar.

Repetir.

Y, honestamente, eso ya es suficientemente poderoso para construir productos más rápido que nunca.

Claude Code se ha convertido en mi herramienta principal para razonar sobre arquitectura, desglosar sistemas y descubrir qué se debe construir.

Cursor sigue siendo uno de los mejores entornos para convertir esas ideas en software funcional.

Ninguna de las dos herramientas es el problema.

De hecho, son la razón por la que la creación de software se ha vuelto tan ridículamente rápida.

El problema comienza después de que se genera el código.

Ahí es donde la calidad del frontend se convierte en un desafío completamente diferente.

Cuantos más productos miraba, más me daba cuenta de que la brecha entre un producto funcional y un gran producto ya rara vez es la funcionalidad.

Es el refinamiento.

Es la consistencia.

Son las decisiones de diseño.

Es el contexto.

Y es exactamente por eso que me he interesado en los flujos de trabajo nativos del frontend.

Suryansh Tiwari - inline image

Cuando vi este flujo de trabajo visualizado por primera vez, capturó perfectamente cómo he empezado a pensar sobre el desarrollo moderno con IA.

Claude me ayuda a pensar.

Cursor me ayuda a construir.

Pero todavía hay una capa faltante entre "software funcional" y "producto listo para producción".

Esa es la capa que Kombai intenta resolver.

No reemplazando a ninguna de las herramientas.

Sino llenando un vacío que ninguna de ellas fue diseñada para resolver.

La forma más fácil de explicar esto es con una pregunta simple:

¿Por qué los frontends generados por IA todavía se sienten generados por IA?

No todos.

Pero suficientes como para que normalmente puedas identificar uno en cuestión de segundos.

Rara vez es porque el código sea malo.

El problema suele ser mucho más profundo.

La mayoría de las herramientas de IA entienden instrucciones.

Los ingenieros de frontend entienden sistemas.

Esa distinción suena pequeña.

No lo es.

Un ingeniero senior de frontend no mira un botón y piensa:

"Eso es un botón".

Piensan:

¿Qué componente es este?

¿Qué token de diseño lo impulsa?

¿Ya existe esto en otro lugar?

¿Sigue la escala tipográfica?

¿Pertenece al sistema de diseño?

¿Este patrón es reutilizable?

Esas preguntas son las que crean consistencia.

Y la consistencia es lo que crea calidad.

Los mejores frontends no son colecciones de componentes.

Son colecciones de decisiones.

Y esas decisiones se acumulan con el tiempo.

Suryansh Tiwari - inline image

Aquí es donde creo que la mayoría de los flujos de trabajo con IA fallan hoy en día.

La versión generada a menudo funciona.

La versión lista para producción se siente intencional.

La versión generada cumple con los requisitos.

La versión lista para producción genera confianza.

Y la diferencia entre esos dos resultados generalmente no es más código.

Es más contexto.

  1. Modo Diseño: Empezando por la Interfaz, No por la Implementación

Cada proyecto de frontend que he construido con herramientas de IA comenzó de la misma manera: prompt → código → recargar → repetir.

El Modo Diseño de Kombai invierte eso por completo.

En lugar de comenzar con la implementación, empiezas con la interfaz misma. Trabajas en un lienzo infinito — dibujando diseños, iterando sobre componentes, ajustando decisiones visuales — con una IA que tiene un gusto creativo genuino incorporado.

El resultado no se parece a un starter predeterminado de Tailwind. No se parece a una plantilla de shadcn. Se parece a algo que fue diseñado.

Lo que hace que esto importe: los diseños no están desconectados de tu código base. Viven en tu repositorio.

Lo que lleva a lo siguiente que realmente me sorprendió.

Suryansh Tiwari - inline image
  1. La Sincronización en Cuatro Direcciones Que Lo Cambia Todo

La mayoría de los flujos de trabajo con IA tienen un muro duro entre el diseño y el código.

Diseñas en algún lugar (Figma, v0, lo que sea). Implementas en otro lugar (Cursor, Claude Code). Y luego vives dentro de esa segunda capa para siempre, haciendo cambios editando archivos y recargando el navegador.

Kombai rompe ese muro — en las cuatro direcciones.

Tus diseños, código y UI renderizada viven juntos en tu repositorio e IDE. Puedes editar cualquiera de ellos. Los demás se actualizan con un clic.

Esto es lo que realmente significa en la práctica:

Diseños en el lienzo → Código en tu repositorio

Tus lienzos y diseños se crean como código y viven dentro de tu repositorio. Así que puedes referenciarlos directamente en prompts usando @, tomar su contexto para cualquier tarea y generar código de producción directamente a partir de ellos. ¿Quieres crear un nuevo componente a partir de un elemento de tu diseño? Apunta al agente hacia él. ¿Quieres actualizar tus tokens para que coincidan con un nuevo diseño? Un solo prompt.

Código en tu repositorio → Diseños en el lienzo

El Modo Diseño de Kombai tiene contexto completo de tu repositorio en todo momento. Así que también puedes ir en la otra dirección — usar tu código existente para crear nuevos diseños. ¿Quieres crear variaciones de tu carrusel de productos? Pídele que copie ese componente a un lienzo y genere versiones creativas. ¿Quieres diseñar el estado maximizado de un modal que ya existe en tu código base? Ya sabe cómo se ve el modal.

Editar UI renderizada en el navegador → Código en tu repositorio

Abre cualquier parte de tu aplicación en ejecución en el navegador de Kombai. Edita texto, estilos y diseño visualmente — exactamente como lo harías en una herramienta de diseño. Luego envía esas ediciones al agente con un clic y él las implementa en tu código real.

No más cambios de contexto entre el navegador, el inspector y el editor de código. Lo ves, lo arreglas, está listo.

UI renderizada en el navegador → Diseños en el lienzo

Usa la función de captura web para enviar cualquier parte de tu UI en vivo directamente a tu lienzo de diseño. Funciona para páginas ejecutándose en localhost y URLs externas fuera de tu repositorio. Desde allí puedes iterar sobre ellas, generar variaciones o usarlas como inspiración referenciándolas en prompts.

Suryansh Tiwari - inline image

Esto no es un truco de demostración. Es un modelo mental fundamentalmente diferente para el trabajo de frontend.

En lugar de "código → recargar → inspeccionar → repetir", estás trabajando a través de tres vistas de la misma verdad — y puedes entrar y salir desde cualquiera de ellas.

El ciclo de retroalimentación se vuelve drásticamente más corto. Y cuando tomas docenas de decisiones de frontend cada día, eso se acumula rápidamente.

  1. Código de Producción Que Realmente Reutiliza Tu Sistema Existente

Una de las ideas más interesantes dentro de Kombai es algo que suena simple pero es profundo.

Entiende tu stack antes de generar cualquier cosa.

Aquí está lo que la mayoría de los frontends generados por IA hacen mal.

Generan nuevos componentes cuando ya existen otros. Crean nuevos tokens cuando el sistema de diseño ya los tiene. Añaden inconsistencia — lentamente, de forma invisible — hasta que el código base comienza a sentirse como si hubiera sido construido por cinco equipos diferentes.

Kombai primero mira tus componentes, hooks y tokens existentes. Luego reutiliza lo que ya está ahí.

Un ingeniero senior de frontend no solo escribe código nuevo. Pregunta: ¿esto ya existe? ¿Debería estar reutilizando algo? ¿Esto sigue el patrón que hemos establecido?

Ese es el pensamiento que Kombai intenta codificar.

Suryansh Tiwari - inline image

Esa imagen probablemente lo explica mejor que cualquier página de marketing.

La mayoría de las herramientas de IA ven instrucciones.

Kombai intenta entender el entorno en el que viven esas instrucciones.

Y esa diferencia se vuelve cada vez más valiosa a medida que los proyectos crecen.

Porque nadie tiene problemas para generar un solo componente hoy en día.

El desafío es generar el componente número cien sin romper la consistencia.

El desafío es añadir nuevas funciones sin degradar lentamente el sistema de diseño.

El desafío es escalar la calidad del frontend mientras se avanza rápido.

Ahí es donde el contexto comienza a convertirse en una ventaja competitiva.

El Stack Completo Que Estoy Usando Ahora

Así es como las tres herramientas dividen el trabajo:

Claude Code → Arquitectura, planificación, razonamiento sobre qué construir y por qué.

Cursor → Implementación, convertir planes en software funcional.

Kombai → Diseño, refinamiento del frontend y mantener la interfaz consistente a medida que el proyecto escala.

Cada capa tiene un trabajo claro. Ninguna intenta reemplazar a las otras.

Suryansh Tiwari - inline image

La mayor revelación que he tenido en el último año es que el futuro probablemente no pertenece a una sola herramienta de IA.

Pertenece a los stacks de IA.

Herramientas especializadas resolviendo problemas especializados. Cada capa haciendo lo que fue diseñada para hacer.

Claude Code no intenta convertirse en Figma. Cursor no intenta convertirse en un sistema de diseño. Y Kombai no intenta convertirse en un asistente de codificación de propósito general.

Los flujos de trabajo más fuertes ocurren cuando cada capa tiene una responsabilidad clara.

Una herramienta te ayuda a razonar.

Una herramienta te ayuda a implementar.

Una herramienta te ayuda a refinar.

Y juntos, el resultado se vuelve significativamente mejor que cualquier herramienta individual trabajando sola.

Suryansh Tiwari - inline image

Esta imagen captura la distinción perfectamente.

Construir y pulir son habilidades diferentes.

Construir hace que el software funcione.

Pulir hace que los usuarios confíen en él.

Construir crea funcionalidad.

Pulir crea experiencia.

Construir hace que la gente pruebe el producto.

Pulir hace que vuelvan.

Durante años, pulir era caro porque requería talento de frontend altamente especializado.

La IA está empezando a cambiar eso.

No reemplazando a los ingenieros de frontend.

Sino haciendo que el contexto del frontend sea más accesible.

Eso es, en última instancia, por lo que Kombai captó mi atención.

No porque genere código.

Toda herramienta de IA genera código ahora.

No porque reemplace a Cursor.

No lo hace.

No porque reemplace a Claude Code.

No debería.

Lo interesante es que está enfocada en una capa del desarrollo de software que la mayoría de las herramientas de IA ignoran en gran medida.

El contexto del frontend.

Y a medida que el software generado por IA se convierte en el estándar, el contexto podría convertirse en uno de los activos más valiosos en todo el flujo de trabajo.

Si tuviera que resumir mi flujo de trabajo actual en una frase, sería esta:

Claude Code me ayuda a pensar.

Cursor me ayuda a construir.

Kombai ayuda a que el frontend se sienta intencional.

Y el cambio más grande que está ocurriendo en el software ahora mismo no es que la IA esté mejorando en escribir código.

Es que finalmente nos estamos dando cuenta de que el código nunca fue todo el trabajo.

Los productos son sistemas.

Las interfaces son sistemas.

El diseño es un sistema.

La calidad del frontend es un sistema.

Y las herramientas que ganen en los próximos años probablemente no serán las que generen más código.

Serán las que entiendan más contexto.

Por eso estoy cada vez más interesado en los flujos de trabajo nativos del frontend.

No porque reemplacen el resto del stack.

Sino porque hacen que todo el stack funcione mejor en conjunto.

Y en un mundo donde todos pueden generar software, esa diferencia podría terminar siendo más importante que nunca.

Prueba Kombai ahora

Guardar con un clic

Lee artículos virales en profundidad con IA en YouMind

Guarda la fuente, haz preguntas concretas, resume el argumento y convierte un artículo viral en notas reutilizables en un único espacio de trabajo con IA.

Explora YouMind
Para creadores

Convierte tu Markdown en un artículo de 𝕏 impecable

Cuando publicas tus propios textos largos, dar formato en 𝕏 a imágenes, tablas y bloques de código es un fastidio. YouMind convierte un borrador completo en Markdown en un artículo de 𝕏 impecable y listo para publicar.

Prueba Markdown a 𝕏

Más patrones por descifrar

Artículos virales recientes

Explorar más artículos virales