ThroughLine plugin
An agentic design team: it builds tokens and components in Figma and code, then designs screens on them or on an existing library.
- 80 ★ on the repository
- Last commit
Extended access
Why this level
- The plugin writes to Figma files and the repository through a local MCP server and, with your yes, creates a GitHub repository.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add plugins/throughlineDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The plugin writes to Figma files and the repository through a local MCP server and, with your yes, creates a GitHub repository.
This is third-party code. Review the repository files before installing.
What it does
The plugin builds a design system an agent can read. In Figma it creates primitive and semantic tokens (color, spacing, type, radius, elevation) with modes and brands, all text and effect styles, Lucide or Material icons and foundational components as variant matrices. In code it produces a pnpm and Turborepo monorepo, a Style Dictionary token sync adapter, Storybook and Chromatic visual regression checks. Every screen in Figma is composed from system variables: a hardcoded value is allowed only where no variable holds it, and it is reported. `/throughline:drift` shows what moved, and checks stop a build on a WCAG AA contrast failure, a missing visible focus ring or generated CSS that disagrees with tokens. For an existing system there is a retrofit mode with a crosswalk from old to new tokens.
Who it is for. Designers and product teams with no design system or one that drifted from code, who are ready to work through an agent without deep code knowledge.
Good fit when
- A token and component system is built from scratch in Figma and synced to React.
- A screen is designed on a library the team already uses, and the report names every non-standard element.
- A drifted system is moved to new tokens with a check that values did not change.
- A new component goes from Figma through tokens to code and Storybook stories with one `/new-component` command.
Not a fit when
- You work in another editor, since the plugin is built for Figma.
- You need a quick one-off picture rather than a system.
- You have no Figma desktop app, as the browser version causes connection errors.
Example request
Run /throughline:start and build a design system for my product: tokens, Lucide icons and foundational components in the open Figma file.Limitations
The Figma desktop app (Professional plan or higher is recommended for variable modes) and an agent are required: Claude Code, Cursor, Codex or an AGENTS.md-aware one. The plugin registers the local `figma-console-mcp` MCP server pinned to version 1.40.8 and works through the Desktop Bridge plugin in Figma. A Figma access token is needed only for calls the bridge cannot make. Skills write files into the repository and, if you choose, create a GitHub repository and add a Chromatic workflow with `CHROMATIC_PROJECT_TOKEN`. The skill shows every GitHub push and waits for your yes. The no-library mode is still planned.
How to disable. Run `/plugin uninstall throughline@throughline-marketplace`. Remove design system files in the repository and the local `figma-console-mcp` server separately, and revoke the Figma token in account settings.
FAQ
Where do I start in Claude Code?
Run `/throughline:start`. It asks whether you are building a system or designing on an existing library and runs environment setup.
How do I install it for Cursor or Codex?
Run `npx @radicool/throughline@0.34.0 init --target=cursor` or `--target=codex`. For a generic AGENTS.md agent use `--target=generic`.
Is a Figma token needed?
Optional. It is needed only for calls the Desktop Bridge cannot make, such as reading a published library. The token is never shared in chat.
What goes to GitHub and Chromatic?
Only what you choose: the repository is created after your yes, and Storybook uploads to Chromatic if you added the workflow. Without those steps nothing leaves.
How do I find that a screen drifted from the system?
Run `/throughline:drift`: it finds screens using a removed variant and components that changed underneath them.
Discussion
No questions or reviews yet.
Related
PluginsA skill for Figma design systems: read-only audits with WCAG checks, component building and token export to code.
Oh My Design (3x-haust)
Oh My Design
A plugin that runs a design task with one /ultradesign command: inspect, build, render, repair and verify
Figma Console MCP
figma-console-mcp
A two-way Figma MCP server for design systems: reads and writes variables, components and styles and syncs tokens with code
designlang
designlang (design-extract)
A CLI and MCP server that reads a live website and pulls out its design system: DTCG tokens, a Tailwind config, Figma variables and a brand book
A TypeUI Figma plugin that reads a file's styles and generates DESIGN.md and SKILL.md for Claude Code, Codex and Cursor
A free, two-way Figma MCP server: turns designs into framework-aware code and pushes code back to the canvas
README in short
The README describes the Figma modes, what is built in Figma, in code and in documentation, the checks, retrofitting an existing system, requirements, what runs on your machine and installation for Claude Code, Cursor and Codex.