Tu agente ya escribe interfaces. Claude Code, Cursor o Codex arman una pantalla de registro en segundos y el resultado se ve bien. El problema aparece al tercer intento: el botón quedó de otro azul, el espaciado no coincide con la pantalla anterior y el formulario que hizo tu compañero usa otro componente para lo mismo. No es que el agente sea malo. Es que no tiene nada confiable que leer.
El agente ya escribe interfaces. El problema es lo que lee
Un agente de código trabaja con el contexto que tiene a mano: el prompt, los archivos abiertos y lo que recuerda del entrenamiento. Cuando le pides un componente, inventa el que mejor calza con ese contexto. Si tu equipo tiene un design system en Figma y una librería en el repo, el agente los ve como dos cosas más entre muchas, y rara vez las usa como la autoridad.
El resultado es código que está casi bien, que es el error más caro: alguien tiene que reconciliarlo con el sistema real, a mano, después. La solución no es un prompt más largo. Es darle al agente un sistema que pueda leer con precisión.
Qué es un design system agéntico
Un design system agéntico cumple cuatro condiciones que una librería de componentes, por buena que sea, no cumple sola:
- Lo lee una máquina. Tokens, componentes, variantes y reglas están expuestos por un protocolo que el agente entiende. En Snapflow ese protocolo es MCP, el mismo que ya usan Claude Code, Cursor y Codex para conectarse a herramientas.
- Es determinista. Distintos prompts con el mismo propósito producen la misma pantalla y el mismo código. El botón de acción principal es siempre el mismo componente con los mismos tokens, lo pida quien lo pida.
- Está gobernado. Las reglas no viven en un documento: corren. Un valor suelto que no sale de los tokens es un hallazgo en el CI, y el pull request no pasa.
- Sale a tu stack. Una definición, tres salidas: React, Vue 3 y Angular. El agente escribe en el framework de tu repo y el componente es el mismo en los tres.
Lo que lo diferencia de la infraestructura de design system no es la base, que es la misma (tokens, pipeline, arquitectura de componentes y gobernanza), sino para quién está hecha la superficie: la infraestructura le daba un pipeline a tu equipo; el design system agéntico le da además una interfaz a tu agente.
De la librería al sistema agéntico
Conviene ver los cuatro escalones por los que pasa un equipo, porque cada uno resuelve un problema y deja el siguiente a la vista.
| Quién lo lee | Qué garantiza | Qué pasa cuando cambia un token | |
|---|---|---|---|
| Librería de componentes | Los desarrolladores que la conocen | Que exista un botón | Alguien lo cambia a mano en cada lugar |
| Documentación | Personas, en un sitio aparte | Que esté descrito | Se actualiza la página y se avisa |
| Infraestructura | El pipeline de tu equipo | Que llegue a producción igual | Se propaga a cada plataforma en el siguiente build |
| Design system agéntico | Tu agente de IA, por MCP | Que lo nuevo también salga consistente | El agente genera con el valor nuevo desde el siguiente prompt |
Los tres primeros escalones los recorrimos a fondo en cómo construir un design system y en design tokens. El cuarto es el que cambia con los agentes: por primera vez el consumidor principal del sistema no es una persona.
Cómo trabaja tu agente con uno
En Snapflow el flujo es corto y se queda dentro de tu repo:
- Un comando conecta el design system. El instalador deja el MCP y la skill de Snapflow en tu proyecto; tu agente los carga al abrirlo, como cualquier otra herramienta.
- Tu marca entra una vez. Desde una URL o un manual de marca, el design system se personaliza en siete pasos: colores, tipografía, radios, logo. Desde ahí todo lo que genera lleva tu marca.
- Le pides pantallas, no componentes. Con Composition describes la pantalla, o le das una captura, y el agente la arma con los componentes del sistema, respetando el lint y los tipos de tu repo.
- Exporta al framework de tu repo. El mismo diseño sale en React, Vue 3 o Angular. Si tu equipo diseña en Figma, el plugin refleja los mismos componentes ahí; si no, Figma es opcional.
- La verificación cierra el ciclo. El chequeo de adherencia corre en el CI sin modelo de por medio: lo que se sale del sistema no entra.
Tu agente, con y sin design system agéntico
El agente es el mismo. Lo que cambia es lo que puede leer.
| Tu agente solo | Tu agente con Snapflow | |
|---|---|---|
| Contexto | El prompt y lo que recuerda | El design system, por MCP |
| Consistencia | Cada corrida inventa un poco | El mismo propósito da el mismo resultado |
| Alcance | Un fragmento de código | Pantallas completas, en diseño y código |
| Gobernanza | Revisión a mano | Adherencia verificada en el CI |
| Marca | La que el agente adivina | La tuya, aplicada una vez al sistema |
Qué es tuyo y qué paga el plan
Cada pantalla que eliges queda en tu archivo de Figma y cada export queda en tu repo, sin licencia sobre tus archivos: si te vas, se quedan contigo. Lo que paga el plan es el motor que compone pantallas desde el design system y lo mantiene consistente. El acceso hoy es por lista de espera y el precio es por asiento y por design system, con quince días gratis; está publicado en la página de precio.
Preguntas frecuentes
¿Snapflow es un agente de IA?
No. Snapflow es el design system que tu agente llama. Sigues usando Claude Code, Cursor o Codex; lo que cambia es que ahora leen un sistema determinista en vez de adivinar.
¿Necesito tener un design system para usarlo?
No. Snapflow entrega uno ya construido, con tokens, componentes y reglas de gobernanza, y lo personalizas con tu marca en siete pasos. Si ya tienes decisiones de diseño, entran como marca; no hace falta migrar una librería.
¿Qué frameworks cubre?
React, Vue 3 y Angular, desde la misma definición. Cada design system trae un framework a elegir y los demás se agregan como complemento.
¿Figma es obligatorio?
No. El agente trabaja en tu código con el MCP y la skill. El plugin de Figma refleja los mismos componentes para los equipos que diseñan ahí, pero es opcional.
¿Qué diferencia hay con la infraestructura de design system?
La base es la misma: tokens, pipeline, componentes y gobernanza. El design system agéntico agrega la superficie que lee tu agente y la verificación de lo que genera. Sin esa capa, la infraestructura sirve a tu equipo pero no a su IA.
Pruébalo con tu agente
La forma más corta de entender un design system agéntico es pedirle una pantalla a tu agente y ver que sale con tu marca y con tus componentes. Snapflow está en acceso por lista de espera y liberamos cupos por tandas, en orden de llegada. Súmate a la lista de espera o mira el precio.
