Si llegaste acá buscando el nombre, esta es la respuesta corta. Snapflow es un design system agéntico que se entrega ya construido y que tu equipo personaliza con su marca. Después se usa desde donde cada persona trabaja: el agente de código en el repo, el plugin de Figma si diseñas ahí, o el editor web si no. Este post cuenta qué entrega, cómo se usa, qué es tuyo y qué paga el plan, y en qué se diferencia de las herramientas con las que suele confundirse. El concepto de fondo, qué es un design system agéntico y por qué tu agente necesita uno, está en su propio post. Aquí hablamos del producto.
Qué entrega Snapflow
No construyes el design system. Snapflow lo entrega hecho y tú le pones tu marca. En concreto, cada design system trae cuatro cosas:
- Tokens, componentes y reglas de gobernanza. El sistema completo, ya diseñado y ya construido: cada componente con sus variantes y estados, claro y oscuro desde los mismos tokens, responsive y con teclado. Las reglas no son un documento aparte: son las que tu agente tiene que seguir y las que tú validas.
- Tu marca, en siete pasos. Desde una URL o un manual de marca entran los colores, la tipografía, los radios y el logo. Se hace una vez y todo lo que sale después la lleva puesta.
- Tres frameworks desde la misma definición. React, Vue 3 y Angular. Cada design system trae un framework a elegir y los demás se agregan como complemento. El componente es el mismo en los tres.
- Un contrato de accesibilidad en cada export y actualizaciones mientras el plan esté activo.
Lo que no entrega es el agente. Snapflow no trae un modelo ni un asistente propio: trabaja con el que ya usas, sea Claude Code, Cursor o Codex, con tu suscripción de IA o con tus propias claves. Tampoco es una herramienta de diseño. No reemplaza a Figma y, si no usas Figma, tampoco te lo pide.
Cómo se usa
El flujo entero cabe en cinco pasos y se queda dentro de tu equipo: el código que genera vive en tu repo y Snapflow no lo guarda.
- Un comando lo instala.
npx @snapflow-labs/onboardinstala el conector para tu asistente, las skills del proyecto y, si usas Figma, el plugin. Te pide el correo y la contraseña del portal y, al final, te invita a abrir tu asistente con/snapflow-hello, que te guía por el kit y tu primera pantalla. - Le pones tu marca. Los siete pasos, desde una URL o un manual de marca, con una vista previa de las piezas del kit mientras eliges.
- Diseñas donde quieras, o no diseñas. Si tu equipo usa Figma, el plugin trae el kit con tu marca y refleja los mismos componentes que el código. Si no, el editor web corre en el navegador: ajustas páginas, armas nuevas y cambias la marca sin instalar nada. Lo que publicas ahí es lo que ven Figma y el asistente.
- Tu agente escribe el código en tu repo. Con la skill
/snapflowy el MCP, le pides pantallas desde una descripción o una captura. El agente lee tu stack, tus reglas (AGENTS.md, CLAUDE.md), tu lint y tus tipos; aplica los tokens y los componentes del sistema; y exporta al framework de tu repo. El resultado pasa tus propias reglas, no las nuestras. - La adherencia se verifica en el CI. Sin modelo de por medio: un valor suelto que no sale de los tokens es un hallazgo y el pull request no pasa. Cuando hay diseño en Figma, la pantalla se compara con él.
El recorrido completo, con lo que ves en pantalla en cada paso, está en la página de producto.
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 determinista de Snapflow Cloud que compone pantallas desde el design system: la misma definición entra, el mismo Figma y el mismo código salen, siempre.
| Concepto | Condición |
|---|---|
| Precio | US$39 por persona y por design system al mes, o US$390 al año (dos meses gratis) |
| Framework incluido | Uno a elegir: React, Vue 3 o Angular |
| Framework adicional | US$9 por asiento al mes, o US$90 al año |
| Prueba | Quince días gratis en todo plan, sin tarjeta |
| Cobro | Suscripción por asiento, a través de Stripe; cancelas cuando quieras |
| Acceso | Por lista de espera, con cupos por tandas y en orden de llegada |
Cada persona paga por los design systems a los que tiene acceso. Si necesitas nube propia o tienes varios equipos y productos, Snapflow se implementa como servicio, con discovery, implementación y acompañamiento: es el plan de Empresas multiproducto. El detalle y la calculadora están en la página de precio.
En qué se diferencia
Snapflow suele compararse con dos cosas que no es: un plugin que convierte un archivo de Figma en código y una plataforma que documenta el design system. Las tres responden a problemas distintos.
| Plugin de Figma a código | Plataforma de documentación | Snapflow | |
|---|---|---|---|
| Qué lee | Los píxeles o las capas de un archivo | Lo que alguien escribe sobre el sistema | Tokens, componentes y reglas, por MCP |
| Qué produce | Código parecido al diseño, que después hay que reconciliar | Páginas que describen el sistema | Pantallas y código con los componentes del sistema |
| Cuando cambia un token | Se vuelve a exportar a mano | Se actualiza la página y se avisa | El agente genera con el valor nuevo desde el siguiente prompt |
| Quién lo gobierna | Nadie: el resultado depende del archivo | Una persona, en revisión | El CI, en cada pull request |
El flujo de Figma a código con un design system de por medio está en Figma a código, y los plugins que lo intentan sin uno, en la comparativa de herramientas. La diferencia con las plataformas de documentación la contamos en alternativas a zeroheight.
Preguntas frecuentes
¿Snapflow es un agente de IA?
No. Snapflow es el design system que tu agente llama por MCP. Sigues usando Claude Code, Cursor o Codex, con tu suscripción o tus claves; lo que cambia es que ahora leen un sistema determinista en vez de adivinar.
¿Necesito Figma?
No. El plugin de Figma refleja los mismos componentes para los equipos que diseñan ahí, pero es opcional. Sin Figma, ajustas y armas páginas en el editor web y tu agente escribe el código en el repo.
¿Tengo que tener un design system para empezar?
No. Snapflow entrega uno ya construido, con tokens, componentes y reglas de gobernanza, y lo personalizas con tu marca en siete pasos. Tus decisiones de diseño entran como marca; no hay una librería que migrar.
¿Con qué frameworks funciona?
React, Vue 3 y Angular, desde la misma definición. Cada design system trae un framework a elegir y cada framework adicional es un complemento de US$9 por asiento al mes.
¿Cuánto cuesta y cómo accedo?
US$39 por persona y por design system al mes, o US$390 al año, con un framework incluido. Quince días gratis en todo plan, sin tarjeta. El acceso es por lista de espera: dejas tu correo y te avisamos cuando se abra tu cupo.
Pide tu acceso
Snapflow está en acceso por lista de espera y liberamos cupos por tandas, en orden de llegada. Solo hace falta tu correo. Súmate a la lista de espera o mira el precio.
