One command installs the Figma plugin, the connector for your assistant and the project skills. Then your assistant guides you through your kit and your first screen.
You adjust your pages, build new ones and change the brand in the portal editor, or in Figma with your brand kit, and the assistant turns your pages into code in your framework. The code stays with your team: Snapflow does not store it.
The Figma plugin
On your computer
The screen you work from: your session, the project each file belongs to, and your brand kit inside Figma.
The connector
On your computer
It connects Figma to the assistant. It has no screen and nothing to configure: it installs once and the assistant starts it when needed.
The service
In the cloud
It stores your organization's kit and generates the code. Nothing to install: you reach it over the internet.
“The assistant” is your coding agent: Claude Code, Cursor, Codex or Antigravity. Snapflow works with any one that supports MCP servers and skills. You install it on your own, and it is not part of this journey.
YOUR ROLE
How will you useSnapflow?
This filters out the steps that are not yours. You can change it any time.
THE JOURNEY
Seven steps from zeroto your first screen
1
Pick the base framework
Which framework your project's code is generated in. An account admin picks it, once.
2
Your license key
This is what identifies your organization. You will need it in the next step.
Your organization
sfk_••••••••••••content_copy
lock
Keep it private
This key opens your whole organization's kit. Do not publish it or write it into a repository.
3
Install Snapflow
One command. It asks for this portal's email and password, installs everything and, at the end, invites you to open your assistant with /snapflow-hello, which guides you through the kit and your first screen, and reminds you of the portal editor.
First, quit Figma completely: that way the installer registers the plugin on its own.
npx @snapflow-labs/onboard --license sfk_...
Run it in the project folder where you will use the assistant.
What you will see in the terminal the first time:
snapflow · zsh
$ npx @snapflow-labs/onboard --license sfk_...
Language / Idioma
1. English
2. Español
[1-2]: 1
Snapflow installer
──────────────────
[1/4] Signing in
Sign in with your Snapflow account, the same one you use for the portal.
Email: ana@yourcompany.com
Password:
✓ Signed in as ana@yourcompany.com
[2/4] Setting up package access
✓ The kit installs from https://api.snapflow.design/npm/ using your license.
[3/4] Your organization's Figma plugin
Published: 1.0.0 · watermark: WM-YOURCOMPANY · not installed yet
✓ 4 files verified in /Users/ana/Snapflow/plugin
✓ Registered in Figma. No need to import it by hand.
[4/4] Connector for the assistant
✓ Connector 0.8.2 verified in /Users/ana/.snapflow/bridge
✓ Created /Users/ana/my-project/.mcp.json with the "snapflow" server.
Restart Claude Code so it picks up the server, and open Figma with the Snapflow plugin.
─────────────────────────────────────────────
Done. The plugin is already registered in Figma.
Open Figma and run it from Plugins → Development → Snapflow
─────────────────────────────────────────────
Next step: open your assistant (Claude Code, Cursor, Codex or Antigravity) in this folder and type /snapflow-hello
It will guide you through creating your kit, designing your first screen and turning it into code.
To adjust pages, build new ones and change the brand from the browser, without Figma:
open your project in the Snapflow portal and choose Pages or Brand.
If Figma was open, it ends with “One step left: Figma is open and has to be closed first”: quit it and run it again. Paths change depending on your computer.
4
Open the plugin in Figma
It runs in the Figma desktop app and asks for this portal's email and password. If your project has no kit yet, open it first in the kit file. It is under Plugins → Development. If it is missing, quit Figma and run the installer again.
The plugin asks for this portal's email and password.
codeSnapflow · Your Company
close
SnapflowDesign System PluginContact your admin for credentialsSnapflow 1.0.0
5
Build and publish the kit
Once per project, for the whole team. /snapflow-hello builds it for you when you open it in your assistant: it asks whether you want to start with a base kit or with your brand, and guides you through what needs to be done in Figma.
Create a new file in the Figma desktop app, inside a team project (not in Drafts), and open it with the plugin.
The plugin asks which project the kit belongs to.
codeSnapflow · Your Company
close
This file is a kit and does not belong to any project yetChoose which project it is the source of truth for. The association is shared with the whole team, and pointing it at the wrong project serves that client somebody else's kit, so check before choosing.
Your Companyyour-company
When it finishes, publish the kit as a library so the team can use it. Figma does not allow automating this, and it has to be repeated when the kit changes: the plugin lets you know.
In the kit file: Assets → Manage libraries → Publish…
When publishing is pending, the plugin says so and prepares the change description.
codeSnapflow · Your Company
close
Snapflowv1.0.0MCP
person
warning
The kit changed and is not published yet
Until you publish the library, the other files keep using the previous version. Publish it from the Figma assets panel (Assets → Publish).
Connected to Your Company.
To resume one that did not finish without going through /snapflow-hello (to rebuild a finished one, add --rebuild):
npx @snapflow-labs/onboard kit
6
Enroll your Figma file
Open the plugin in your working file and pick its project.
Picking the project enrolls the file for the whole team.
codeSnapflow · Your Company
close
This file does not belong to any project yetChoose which one it belongs to. The association is shared with the whole team, so the choice is made only once.
Your Companyyour-company
To open it again: Ctrl/Cmd + K and search for Snapflow.
To use the components, add the published kit to your file:
In your file: file menu → Library, and add the kit from Manage libraries.
7
Your first playground
A sample project to try the code Snapflow generates. The installer offers it at the end; to create another one:
npx @snapflow-labs/onboard playground new
READY TO WORK
When you are done: how to tellyou can start working
The plugin checks these four things and shows you the first one missing. With all four in place, you can ask the assistant for screens.
1
The assistant, open
The connector starts with it. If it is not open, the plugin says so and retries on its own.
The connector status is in the plugin bar: green means connected. If it is gray, click ⟳ to reconnect.
codeSnapflow · Your Company
close
Snapflowv1.0.0MCP
person
sync_problem
The connector is not connected
Open your assistant (Claude Code, Cursor, Codex or Antigravity) so the Snapflow connector starts, or use Reconnect. The plugin keeps retrying on its own in the meantime.
Connected to Your Company.
Opened another project and it is still gray? Run this inside the new folder:
npx @snapflow-labs/onboard connect
2
Signed in to the plugin
With your account for this portal, not with the license key.
3
This file's project, picked
The plugin asks the first time you open a file.
4
Your project's kit, applied
If it is missing, the plugin notice has the “Download the kit” button.
The notice when the kit is missing, with its button.
codeSnapflow · Your Company
close
Snapflowv1.0.0MCP
person
download
This project's kit is not on your machine yet
Without the kit, the color and size tokens have not arrived, so the plugin cannot build yet. Download it and this screen updates on its own.
Connected to Your Company.
You can also ask the assistant with this sentence:
Apply this project's kit.
When all four are in place
The notice goes away and the plugin shows which project it is connected to.
codeSnapflow · Your Company
close
Snapflowv1.0.0MCP
person
Connected to Your Company. You can now work in this file.
info
Keep Figma open with the plugin while you work: the assistant needs it.
THE EDITOR
Workin the editor
The portal editor is the default way to adjust your pages, build new ones and change the brand. It runs in the browser: nothing to install and no Figma needed. What you publish there is what Figma and the assistant see.
Adjust and build pages
Change texts, variants and spacing on the page itself, or create a new one with the kit pieces.
Change the brand
Colors, typography, knobs and logo, with a preview of the kit pieces.
See the kit
Every kit piece in all its variants, and which brand color each part points to.
SnapflowPagesBrandKit
Every publish is kept in the version history: you can view an earlier one and go back to it. To bring a page into your application's code, the assistant uses what the steps above install.
COMMANDS
Everything runsthrough npx
All of them run through npx: there is no need to install the installer.
CommandWhat it does
npx @snapflow-labs/onboard [--design figma|none]The full setup: installs or updates kit access, the snapflow command for the terminal and the skills and, if you work with Figma, the plugin and the connector. At the end it offers to create the playground and, if you work with Figma, invites you to open your assistant with /snapflow-hello. --design answers the Figma question in advance, and the answer is saved.
npx @snapflow-labs/onboard install [--design figma|none]The same as the previous one, with a name.
npx @snapflow-labs/onboard connect [--client claude,cursor,codex,antigravity]Updates the connector and registers it in your assistant (Claude Code, Cursor, Codex or Antigravity) in the folder where you run it, with the project skills. To add an assistant or another folder without installing again.
npx @snapflow-labs/onboard kit [--rebuild] [--status]Only the kit, in the open Figma file. /snapflow-hello usually does it; this is for resuming one that did not finish or, with --rebuild and your confirmation, rebuilding it. With --status it only reports whether the project already has its kit.
npx @snapflow-labs/onboard logoutRemoves the session and license key from this computer.
npx @snapflow-labs/onboard playground new [path] [--framework react|vue] [--skip-install]Creates a project to preview the views Snapflow generates.
npx @snapflow-labs/onboard playground dev [path]Serves that project so you can see it in the browser.
npx @snapflow-labs/onboard playground update [path] [--dry-run] [--force]Pulls the latest base project without overwriting what you wrote.
npx @snapflow-labs/onboard playground list [--prune] [--offline]Lists the playgrounds created on this machine and their status. With --offline it does not ask the service.
npx @snapflow-labs/onboard --helpShows the help.
--lang en|esWorks with any command: the language of the messages for that run.
Design tokens explained: what they are, the three tiers, naming by intent, the new W3C standard, and the pipeline that turns a token file into production code.
A practical guide to building design systems that actually scale, from token architecture to governance. Learn the infrastructure-first approach used by enterprise teams.
