Un comando instala el plugin de Figma, el conector para tu asistente y las skills del proyecto. Después tu asistente te guía por tu kit y tu primera pantalla.
Ajustas tus páginas, armas nuevas y cambias la marca en el editor del portal, o en Figma con el kit de tu marca, y el asistente convierte tus páginas en código en tu framework. El código queda en tu equipo: Snapflow no lo guarda.
El plugin de Figma
En tu computador
La pantalla desde la que trabajas: tu sesión, el proyecto al que pertenece cada archivo y el kit de tu marca dentro de Figma.
El conector
En tu computador
Conecta Figma con el asistente. No tiene pantalla ni nada que configurar: se instala una vez y el asistente lo inicia cuando hace falta.
El servicio
En la nube
Guarda el kit de tu organización y genera el código. No hay nada que instalar: llegas a él por internet.
“El asistente” es tu agente de código: Claude Code, Cursor, Codex o Antigravity. Snapflow funciona con cualquiera que soporte servidores MCP y skills. Lo instalas por tu cuenta, y no es parte de este recorrido.
TU ROL
¿Cómo vas a usarSnapflow?
Esto filtra los pasos que no son tuyos. Puedes cambiarlo cuando quieras.
EL RECORRIDO
Siete pasos desde cerohasta tu primera pantalla
1
Elige el framework base
En qué framework se genera el código de tu proyecto. Lo elige una persona que administra la cuenta, una sola vez.
2
Tu clave de licencia
Es lo que identifica a tu organización. La vas a necesitar en el paso siguiente.
Tu organización
sfk_••••••••••••content_copy
lock
Mantenla en privado
Esta clave abre el kit de toda tu organización. No la publiques ni la escribas en un repositorio.
3
Instala Snapflow
Un comando. Te pide el correo y la contraseña de este portal, instala todo y, al final, te invita a abrir tu asistente con /snapflow-hello, que te guía por el kit y tu primera pantalla, y te recuerda el editor del portal.
Primero cierra Figma por completo: así el instalador registra el plugin por su cuenta.
npx @snapflow-labs/onboard --license sfk_...
Córrelo en la carpeta del proyecto donde vas a usar el asistente.
Lo que vas a ver en la terminal la primera vez:
snapflow · zsh
$ npx @snapflow-labs/onboard --license sfk_...
Language / Idioma
1. English
2. Español
[1-2]: 2
Instalador de Snapflow
──────────────────────
[1/4] Iniciando sesión
Inicia sesión con tu cuenta de Snapflow, la misma que usas en el portal.
Correo: ana@tuempresa.com
Contraseña:
✓ Sesión iniciada como ana@tuempresa.com
[2/4] Configurando el acceso a los paquetes
✓ El kit se instala desde https://api.snapflow.design/npm/ con tu licencia.
[3/4] El plugin de Figma de tu organización
Publicada: 1.0.0 · marca de agua: WM-TUEMPRESA · todavía no instalada
✓ 4 archivos verificados en /Users/ana/Snapflow/plugin
✓ Registrado en Figma. No hace falta importarlo a mano.
[4/4] Conector para el asistente
✓ Conector 0.8.2 verificado en /Users/ana/.snapflow/bridge
✓ Se creó /Users/ana/mi-proyecto/.mcp.json con el servidor "snapflow".
Reinicia Claude Code para que tome el servidor, y abre Figma con el plugin de Snapflow.
─────────────────────────────────────────────
Listo. El plugin ya está registrado en Figma.
Abre Figma y córrelo desde Plugins → Development → Snapflow
─────────────────────────────────────────────
Siguiente paso: abre tu asistente (Claude Code, Cursor, Codex o Antigravity) en esta carpeta y escribe /snapflow-hello
Te va a guiar para crear tu kit, diseñar tu primera pantalla y convertirla en código.
Para ajustar páginas, armar nuevas y cambiar la marca desde el navegador, sin Figma:
abre tu proyecto en el portal de Snapflow y elige Páginas o Marca.
Si Figma estaba abierto, termina con “Falta un paso: Figma está abierto y hay que cerrarlo primero”: ciérralo y vuelve a correrlo. Las rutas cambian según tu computador.
4
Abre el plugin en Figma
Corre en la app de escritorio de Figma y te pide el correo y la contraseña de este portal. Si tu proyecto todavía no tiene kit, ábrelo primero en el archivo del kit. Está en Plugins → Development. Si no aparece, cierra Figma y vuelve a correr el instalador.
El plugin te pide el correo y la contraseña de este portal.
codeSnapflow · Tu empresa
close
SnapflowDesign System PluginPide las credenciales a tu administradorSnapflow 1.0.0
5
Arma y publica el kit
Una vez por proyecto, para todo el equipo. /snapflow-hello lo arma por ti cuando lo abres en tu asistente: te pregunta si quieres partir con un kit base o con tu marca, y te guía en lo que hay que hacer en Figma.
Crea un archivo nuevo en la app de escritorio de Figma, dentro de un proyecto de equipo (no en Drafts), y ábrelo con el plugin.
El plugin te pregunta a qué proyecto pertenece el kit.
codeSnapflow · Tu empresa
close
Este archivo es un kit y todavía no pertenece a ningún proyectoElige de qué proyecto es el kit. La asociación se comparte con todo el equipo, y si eliges el proyecto equivocado ese cliente recibe el kit de otro, así que revisa antes de elegir.
Tu empresatu-empresa
Cuando termine, publica el kit como biblioteca para que el equipo lo pueda usar. Figma no permite automatizarlo, y hay que repetirlo cuando el kit cambia: el plugin te avisa.
En el archivo del kit: Assets → Manage libraries → Publish…
Cuando la publicación está pendiente, el plugin te lo dice y prepara la descripción del cambio.
codeSnapflow · Tu empresa
close
Snapflowv1.0.0MCP
person
warning
El kit cambió y todavía no está publicado
Hasta que publiques la biblioteca, los demás archivos siguen usando la versión anterior. Publícala desde el panel de assets de Figma (Assets → Publish).
Conectado a Tu empresa.
Para retomar uno que no terminó sin pasar por /snapflow-hello (para reconstruir uno terminado, agrega --rebuild):
npx @snapflow-labs/onboard kit
6
Inscribe tu archivo de Figma
Abre el plugin en tu archivo de trabajo y elige su proyecto.
Al elegir el proyecto, el archivo queda inscrito para todo el equipo.
codeSnapflow · Tu empresa
close
Este archivo todavía no pertenece a ningún proyectoElige a cuál pertenece. La asociación se comparte con todo el equipo, así que la elección se hace una sola vez.
Tu empresatu-empresa
Para abrirlo de nuevo: Ctrl/Cmd + K y busca Snapflow.
Para usar los componentes, agrega el kit publicado a tu archivo:
En tu archivo: menú del archivo → Library, y agrega el kit desde Manage libraries.
7
Tu primer playground
Un proyecto de ejemplo para probar el código que genera Snapflow. El instalador te lo ofrece al final; para crear otro:
npx @snapflow-labs/onboard playground new
LISTO PARA TRABAJAR
Cuando termines: cómo saberque ya puedes trabajar
El plugin revisa estas cuatro cosas y te muestra la primera que falta. Con las cuatro en su lugar, ya puedes pedirle pantallas al asistente.
1
El asistente, abierto
El conector parte con él. Si no está abierto, el plugin te avisa y reintenta por su cuenta.
El estado del conector está en la barra del plugin: verde es conectado. Si está gris, haz clic en ⟳ para reconectar.
codeSnapflow · Tu empresa
close
Snapflowv1.0.0MCP
person
sync_problem
El conector no está conectado
Abre tu asistente (Claude Code, Cursor, Codex o Antigravity) para que arranque el conector de Snapflow, o usa Reconectar. Mientras tanto, el plugin sigue reintentando por su cuenta.
Conectado a Tu empresa.
¿Abriste otro proyecto y sigue gris? Corre esto dentro de la carpeta nueva:
npx @snapflow-labs/onboard connect
2
Sesión iniciada en el plugin
Con tu cuenta de este portal, no con la clave de licencia.
3
El proyecto de este archivo, elegido
El plugin te pregunta la primera vez que abres un archivo.
4
El kit de tu proyecto, aplicado
Si falta, el aviso del plugin tiene el botón “Descargar el kit”.
El aviso cuando falta el kit, con su botón.
codeSnapflow · Tu empresa
close
Snapflowv1.0.0MCP
person
download
El kit de este proyecto todavía no está en tu máquina
Sin el kit no han llegado los tokens de color y de tamaño, así que el plugin todavía no puede construir. Descárgalo y esta pantalla se actualiza sola.
Conectado a Tu empresa.
También puedes pedírselo al asistente con esta frase:
Aplica el kit de este proyecto.
Cuando las cuatro están en su lugar
El aviso desaparece y el plugin muestra a qué proyecto está conectado.
codeSnapflow · Tu empresa
close
Snapflowv1.0.0MCP
person
Conectado a Tu empresa. Ya puedes trabajar en este archivo.
info
Mantén Figma abierto con el plugin mientras trabajas: el asistente lo necesita.
EL EDITOR
Trabajaen el editor
El editor del portal es la forma por defecto de ajustar tus páginas, armar nuevas y cambiar la marca. Corre en el navegador: nada que instalar y sin Figma. Lo que publicas ahí es lo que ven Figma y el asistente.
Ajusta y arma páginas
Cambia textos, variantes y espaciados en la misma página, o crea una nueva con las piezas del kit.
Cambia la marca
Colores, tipografía, perillas y logo, con una vista previa de las piezas del kit.
Mira el kit
Cada pieza del kit en todas sus variantes, y a qué color de la marca apunta cada parte.
SnapflowPáginasMarcaKit
Cada publicación queda en el historial de versiones: puedes ver una anterior y volver a ella. Para llevar una página al código de tu aplicación, el asistente usa lo que instalan los pasos de arriba.
COMANDOS
Todo correcon npx
Todos corren con npx: no hace falta instalar el instalador.
ComandoQué hace
npx @snapflow-labs/onboard [--design figma|none]La instalación completa: instala o actualiza el acceso al kit, el comando snapflow para la terminal y las skills y, si trabajas con Figma, el plugin y el conector. Al final te ofrece crear el playground y, si trabajas con Figma, te invita a abrir tu asistente con /snapflow-hello. --design responde de antemano la pregunta de Figma, y la respuesta queda guardada.
npx @snapflow-labs/onboard install [--design figma|none]Lo mismo que el anterior, con nombre.
npx @snapflow-labs/onboard connect [--client claude,cursor,codex,antigravity]Actualiza el conector y lo registra en tu asistente (Claude Code, Cursor, Codex o Antigravity) en la carpeta donde lo corres, con las skills del proyecto. Para sumar un asistente u otra carpeta sin volver a instalar.
npx @snapflow-labs/onboard kit [--rebuild] [--status]Solo el kit, en el archivo de Figma abierto. Normalmente lo hace /snapflow-hello; esto es para retomar uno que no terminó o, con --rebuild y tu confirmación, reconstruirlo. Con --status solo informa si el proyecto ya tiene su kit.
npx @snapflow-labs/onboard logoutBorra la sesión y la clave de licencia de este computador.
npx @snapflow-labs/onboard playground new [path] [--framework react|vue] [--skip-install]Crea un proyecto para previsualizar las vistas que genera Snapflow.
npx @snapflow-labs/onboard playground dev [path]Sirve ese proyecto para que lo veas en el navegador.
npx @snapflow-labs/onboard playground update [path] [--dry-run] [--force]Trae el proyecto base más reciente sin sobrescribir lo que escribiste.
npx @snapflow-labs/onboard playground list [--prune] [--offline]Lista los playgrounds creados en esta máquina y su estado. Con --offline no le pregunta al servicio.
npx @snapflow-labs/onboard --helpMuestra la ayuda.
--lang en|esSirve con cualquier comando: el idioma de los mensajes de esa ejecución.
Design tokens explicados: qué son, los tres niveles, nombrar por intención, el nuevo estándar W3C, y el pipeline que convierte un archivo de tokens en código de producción.
Una guía práctica para construir design systems que realmente escalen, desde arquitectura de tokens hasta governance. Aprende el enfoque infrastructure-first que usan equipos enterprise.
