Bolt crea un agente de sistema de diseño autónomo en Claude Agent SDK

El problema con los sistemas de diseño fragmentados

La mayoría de las empresas no tienen su sistema de diseño en un solo lugar. La tipografía se encuentra en un documento de Google. Los componentes están dispersos en archivos Figma, instancias de Storybook y repositorios de GitHub. Las pautas de espaciado y diseño pueden estar en un wiki o simplemente en la cabeza de un ingeniero.

Esa brecha se ha convertido en una barrera importante para la adopción empresarial de herramientas de desarrollo de IA. Los gestores de producto y los diseñadores pueden crear prototipos de ideas en herramientas como Bolt, pero sin acceso al lenguaje de diseño real de la empresa, el resultado parece genérico. «A menudo, si solo se usa Bolt, no se tiene ni idea del sistema de diseño de la empresa», dijo Dominic Elm, ingeniero fundador de StackBlitz. «Y un sistema de diseño es un sistema algo complejo. Tiene pautas, tipografía, espaciado, maquetación... todas estas cosas».

Las herramientas pueden generar código rápidamente, pero el resultado no coincide con los estándares internos de una empresa. Los prototipos terminan como desechables: un gestor de producto crea algo para comunicar una idea, pero un ingeniero lo reescribe por completo antes de que pueda lanzarse. Esa distancia entre el prototipo y el código de producción mantiene a los no ingenieros al margen del ciclo de vida de desarrollo.

Por qué StackBlitz construyó basándose en Claude Agent SDK

StackBlitz había creado su propio agente interno para impulsar Bolt, pero como el equipo planeaba una revisión importante, Claude Agent SDK llegó en el momento justo. «Estábamos buscando hacer un montón de mejoras en nuestro agente, buscando una versión 2», explicó Elm. «Pero luego llegó el SDK de Agent y tenía mucho sentido optar por algo que ya utilizaba tanta gente».

La decisión cambió el enfoque del equipo, desde la creacióny mantenimiento de la infraestructura de agentes hasta la innovación de productos. El equipo de IA de StackBlitz es pequeño. «Tenemos un par de personas, pero probablemente aún estemos muy lejos del número de personas que están trabajando en Claude Code», añadió Elm. La base de usuarios establecida de Claude Code era parte del atractivo: el Agent SDK significaba que StackBlitz no necesitaba igualar esa inversión para obtener las mismas capacidades subyacentes. Agent SDK se basa en la misma herramienta de ejecución de pruebas que impulsa Claude Code, por lo que StackBlitz podría heredar esas capacidades sin tener que igualar esa inversión.

Crear un agente de sistema de diseño con Claude

StackBlitz fue uno de los primeros equipos en apostar por completo por el SDK de Agent, y la amplia experiencia desarrollando sobre él ha demostrado a Elm lo flexible que es la plataforma. «La forma en que está configurado actualmente simplemente te permite crear casi cualquier flujo de trabajo», dijo.

El agente del sistema de diseño es un buen ejemplo. Empieza por incorporar todo lo que tiene una empresa: sitios de Storybook, repositorios de GitHub, paquetes de npm, tokens de Figma, archivos de documentación. Los usuarios dirigen el agente hacia todas sus fuentes y este realiza una revisión exhaustiva de cada una de ellas, resolviendo conflictos, asignando tokens de diseño y entendiendo las variantes de componentes. El resultado es una representación intermedia consolidada del sistema de diseño completo. El agente utiliza Claude Opus 4.7, que, según Elm, «mostró los mejores resultados en general» para el razonamiento sostenido que exige esta fase de investigación.

Esta fase de investigación puede durar de 40 minutos a una hora y media, dependiendo de cuántas fuentes estén conectadas, con una media de alrededor de 53 minutos. Ese es un tipo de tarea diferente a la típica creación de prototipo de cinco minutos. Los enlaces del SDK lo hicieron factible. Con el enlace de parada, el equipo puede mantener a un agente ejecutando un flujo de trabajo prolongado, devolver comentarios al agente y cambiar la trayectoria del agente a mitad de ejecución. Los subagentes personalizados gestionan tareas paralelas mientras mantienen limpio el contexto del agente principal. «Ayuda con la velocidad general porque puede paralelizar las cosas», señaló Elm. «Además, lo que hace el subagente no está contaminando la ventana de contexto principal».

El resultado se encuentra dentro de Bolt como una biblioteca navegable de todos los componentes, secciones y páginas de la empresa en un solo lugar. StackBlitz tomó la decisión deliberada de no convertir a Bolt en la fuente de verdad para el sistema de diseño de una empresa. En su lugar, cuando un equipo actualiza su sistema de diseño por su parte, puede volver a Bolt y reindexar, y el agente hace una actualización incremental. Una vez que el sistema de diseño está implementado, un usuario lo selecciona, le pide a Bolt que cree algo, digamos un configurador de automóviles o una página de comparación, y el resultado sigue los componentes, la tipografía y el espaciado existentes de la empresa. Luego, el agente comprueba su propio trabajo en un ciclo de revisión. «Creas algo y luego lo compruebas de nuevo: ¿coincide con el aspecto que se supone que debería tener?» dijo Elm, comparando el proceso con la forma en que un desarrollador verificaría el resultado con un archivo Figma.

De prototipos desechables a código de producción

El agente del sistema de diseño cambia lo que los gestores de producto y los diseñadores pueden entregar. El sistema de diseño se genera una vez en una ejecución autónoma con un promedio de 53 minutos. A partir de ahí, cualquier miembro del equipo puede pedirle a Bolt que produzca prototipos acordes con la marca en aproximadamente cinco minutos, generando código que puede pasar a producción con una reelaboración mínima. «La idea es que Bolt pueda generar un prototipo que no sea solo desechable», dijo Elm. «Se puede pasar a un ingeniero y enviar ese código casi como está a producción, y simplemente conectar la lógica empresarial a los componentes».

StackBlitz ve aproximadamente un 90 % de eficiencia de caché en Agent SDK, lo cual permite mantener los costes de de inferencia a un nivel razonable en estos flujos de trabajo de larga ejecución. Más de 10 000 usuarios ya han subido sus propios sistemas de diseño a Bolt.

Mirando hacia el futuro

StackBlitz se centra en una adopción más amplia entre las empresas que envían código de producción a través de Bolt. «El objetivo es lograr que los gestores de producto y los diseñadores realmente se integren en el ciclo de vida de desarrollo y puedan contribuir al código de producción, dijo Elm. «Ese es el santo grial para casi todo el mundo en el sector».