More screenshots
Works with the AI Agents you already use
Claude Code
Cursor
Codex CLI
Muse
Dots+21 moreClaude CodeCursorCodex CLIMuseDots
Manus
Grok
Grok Bot+18 agentsFigma Tokens Architect
A design system in Figma from whatever you have: a raw mockup, a live build, old files or a half-finished system. Primitives, roles, components and your screens connected to them, checked in every mode
$15
Figma Tokens Architect
Example session with this skill installed
This Figma file has four screens of our studio booking app, drawn without any variables or styles. Build our design system in this file from these screens: variables for colours, spacing, radius and type with a light and a dark mode, text styles, the base components (button, input, badge, card), and connect the existing screens to it.
- Read your context and instructions
- Compiled the figma tokens architect
Claude Haiku, with and without the skill, the same request, two runs per arm; one run per arm shown.
| With Figma Tokens Architect | Without a skill | |
|---|---|---|
| The collection | One, as asked: 81 primitives in a hidden primitives/ group, 193 roles and component tokens on top of them | One, as asked: 110 variables, each holding its own value |
| A button's colour | button/primary/bg → color/interactive/primary/default → primitives/color/blue/600 | button-primary-bg = #2563eb |
| The brand blue | One primitive | Typed into 5 tokens, in both modes |
| The screens | Colours 142 of 144 (the photo and avatar placeholders left raw, with the reason), sizes 408 of 408, text 75 of 75, shadows 5 of 5; 19 controls swapped for instances | Colours 144 of 144, sizes 386 of 408, text 75 of 75, shadows 0 of 5; 19 controls swapped for instances |
| Text under AA | 11 in the mockup, 1 after: a disabled button, exempt. Dark: the same one | 12 in light, left as drawn and listed; 1 in dark |
| Code | var(--orvel-button-primary-bg) on every variable | No code syntax |
| Checks | token-audit.mjs: no problems. dsgraph: 0 errors, 0 warnings | dsgraph passes too: DTCG leaves names free. The skill's audit flags 67 of the 110 names, component names in the layer that holds the values, and all 110 values in the pickers |
Both arms did what the screens needed: every colour bound, buttons, badges and inputs swapped for instances. The difference is under the screens. The two runs without the skill share 49 of their 110 names (page-bg and screen-bg, button-tonal and button-soft, chip-selected and chip-active), and button-md-padding-y is 8 px in one of them and 14 px in the other. The two runs with it share 236 of 274; the rest are renames each agent wrote into its plan, such as a tonal button named tertiary in one run and tonal in the other. In their dark modes, the runs without the skill picked a grey per component: the white surfaces became four greys, two of them closer than 0.01 in OKLab. The runs with it generated the dark steps and moved the text roles until they passed on the dark surfaces.
Small model, one fictional product, two runs per arm, measured by the skill's author. The mockup, the runs and the measurements are in the package's evidence.
Connects securely to your tools. The creator never sees your data.
About this skill
Most design systems start from something that already exists: screens drawn with hard-coded colours, a product that's live, old files, a system someone began and left. Each of them already holds a system, the values the product really uses. This skill collects those values, turns them into Primitives and Semantic roles, builds them in Figma with light and dark modes, text styles and base components, connects the existing screens to them, and checks the result.
From any starting point. A raw Figma mockup, a running build or its code, old mockups with colour and text styles, a half-finished system. Three collectors record every value by where it sits (page, surface, button, text, border) and every text and icon pair as it renders.
A plan before anything changes. Near-duplicates merge with a record: eyedropper drift such as #2563EB, #2463EB and #2662EA becomes one value. Primitives are named by family and lightness, roles come from where each value sits, and the dark mode comes from the build's own theme or is generated and moved until every text role passes on the dark surfaces. Every merge and every guess goes to the team.
Built and connected in Figma. Variables with modes, minimum scopes and code syntax for web, iOS and Android; text and effect styles bound to them; Button, Input, Badge and Card bound to the roles; the screens bound, and their drawn buttons, badges and inputs swapped for instances. When the team wants one collection and component names, it gets them and keeps the layers: button/primary/bg points at color/interactive/primary/default, and the primitives sit hidden in the same collection.
Three layers, one direction. Primitives hold raw values and stay out of pickers. Semantic names roles, states and layers, and carries the modes. Components bind Semantic through contracts, so a brand colour changes in one place.
Checked twice. token-audit.mjs checks the Figma side: raw values in roles, component names among roles, two words for one state, "On" text on its fill and text on the default surfaces against WCAG AA in every mode, primitives in pickers. dsgraph checks DTCG validity and the layer rules. figma-check.js reports how much of the screens use the system and the contrast of every text layer in every mode.
Token files too. With DTCG files the skill skips the collecting: the audit, the role API, the build and CSS custom properties with themes.
- Instances replace drawn buttons, badges and inputs. Chips, toggles, checkboxes and cards stay frames bound to the variables; making components of them is the team's next step.
- A generated dark mode passes contrast by construction and is still a proposal: look at it on the real screens.
- Contrast is checked on what renders and on the role names. A pair that appears only in a state nobody drew (hover, pressed) needs that state drawn first.
- Photos, avatars and illustrations stay raw, each listed with the reason.
emletter spacing and custom cubic-bezier curves need conversion; the audit lists them.
How to use
- 1
Connect your agent to the Agensi MCP
Copy the prompt and paste it into Claude, ChatGPT, Cursor or any agent that supports MCP. It sets up the connection for you. Manual setup
- 2
Sign in to Agensi
Your agent shows a sign-in link. Sign in and click Allow.
- 3
Ask for what you need
Your agent loads this skill and uses it on your task. It always asks before any payment.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill goes through the trust checks below.
Security scanned
Checked by our 8-point scan before listing
Fresh listing
Recently published to Agensi
Money-back guarantee
Doesn't do what its page promises? You get your money back.
Trust & safety
Security scan
Security scan passed 6 days ago
- Accounts
Figma MCP
- Software
Node.jsfetchesnpx@dsgraph/cli
Permissions
Allowed Hosts
File Scopes
The Node scripts read the files you give them and write only the files above; they make no network requests. `npx` fetches `@dsgraph/cli` from npm the first time and runs it locally. The Figma scripts run in your file through `use_figma`: binding and the instance swap count everything in a dry run first, and the swap replaces each drawn control with an instance, so save a version in Figma's history before it