Throughline — one unbroken line from design to code. A Claude Code plugin that guides you from a blank Figma file to a synced, story-tested component library.
Plugin Claude Code
ThroughLine — build a complete design system end to end. Author tokens, styles, icons, and components in Figma, then stand up a monorepo, sync tokens to framework-specific code via Style Dictionary, and generate Storybook stories with Chromatic. One unbroken line from design to code. Built for designers becoming…
MCP server Claude CodeCodexCursor +2
The most comprehensive MCP server for Figma — design tokens, variables, components, write tools, version history diff, accessibility audits, FigJam, Slides, and more. Local (WebSocket Desktop Bridge plugin) and Cloudflare Workers (paired + remote) modes. Runs locally from the figma-console-mcp npm package. Needs 1…
Command Cursor
Read design-system.json and present a clear, plain-language summary of where the user's design system stands. This is the "where am I?" command — especially valuable for users who don't want to read raw JSON.
Command Cursor
Document a single existing component end to end, using the settings already in design-system.json (project.uiFramework, figma.mechanism, sync.platforms) rather than re-asking configuration. Scale explanation to user.codingLevel.
Command Cursor
Run the component-pipeline orchestrator skill to take one new component from Figma all the way to a tested, storied code component.
Command Cursor
This is the first step for building a design system with ThroughLine. The user invoked it explicitly, so begin immediately — do not invoke any brainstorming or planning skill first. There is nothing to brainstorm until the environment exists: the local working folder must be created and Figma must be connected before…
Command Cursor
Re-run the token sync pipeline to catch any updates made in Figma.
Cursor rule Cursor
Build Figma components — buttons, inputs, cards, badges, chips, modals, and more — with variant matrices (types, sizes, states) and icon/component/content slots bound to the design system's tokens and styles. Use this when the user wants to create components, build a component library, make buttons/inputs/cards/etc.…
Cursor rule Cursor
Take a single new component from Figma to fully-built-and-storied code, end to end — build it in Figma, sync any new tokens it introduced, then build its code component and stories. Orchestrates component-builder, token-sync-layer, and storybook-chromatic-builder with a human confirmation between each stage. Use this…
Cursor rule Cursor
Measure a pre-existing design system before retrofitting it onto tokens, so the retrofit is right-sized. This is a PROCESS skill and the brownfield front door. Use this when retrofitting a design system onto a mature codebase and an already-populated Figma file, when the user wants to audit an existing system, size a…
Cursor rule Cursor
Set up the local working folder and connect Cursor to Figma so the design-system skills can read and write variables, styles, and components. Run this BEFORE brainstorming and before any other design-system skill. Invoke it immediately when the user wants to start, set up, or begin building a design system — phrases…
Cursor rule Cursor
Build an icon system in Figma — a dedicated "Icons" page of well-named, scalable icon components from Lucide, Tabler, Phosphor, Material, or custom SVGs. Use this when the user wants to set up icons, add an icon library, import Lucide or Material icons, create icon components, or build an icon set in Figma. Also…
Cursor rule Cursor
Graduate the local design-system folder into a real monorepo — a pnpm + Turborepo workspace with packages for tokens and UI components — and walk the user from a plain folder to local git to a GitHub remote with PRs and CI. Use this when the user wants to set up a repo, create a GitHub repository, add version control…
Cursor rule Cursor
Orchestrate a full brownfield design-system retrofit end to end — audit, refine, rebind, sync, baseline, code, docs, cleanup — with a human confirmation gate between every phase. Use this when the user wants to run a complete retrofit, migrate a mature codebase and populated Figma file onto tokens, resume an…
Cursor rule Cursor
Stand up Storybook in the monorepo, build code components matching the Figma design system, generate stories for every component, set up Chromatic for visual regression testing, and wire Code Connect when the user's Figma plan supports it. Use this when the user wants to set up Storybook, build component stories, add…
Cursor rule Cursor
Build a two-tier (primitive + semantic) design token system as Figma variables — color ramps, spacing, type scale, radius, shadows — with light/dark or brand modes, using one collection per category per tier. Use this when the user wants to create design tokens, design variables, a color system, a type scale, a…
Cursor rule Cursor
Build the brownfield token crosswalk — a persistent three-way map between each new token, the old Figma variable, and the old code identifier(s) — then wire the tokens:validate CI gate. Use this when retrofitting a design system onto a mature codebase, when the user wants to map old tokens to new ones, build a…
Cursor rule Cursor
Build an on-brand "Foundations" page in Figma that visually documents every variable collection and style — color ramps with swatches, the type scale, spacing, radius, shadows/elevations. Use this when the user wants a visual stylesheet, a token reference page, a Foundations page, to document or showcase their design…
Cursor rule Cursor
Sync Figma design variables into code-ready token files via DTCG JSON and Style Dictionary, emitting framework-specific outputs (shadcn/Tailwind, MUI, vanilla CSS, iOS Swift, Android Kotlin, or custom), and set up the reusable "sync figma tokens" command. Use this when the user wants to turn Figma tokens into code…
Skill Claude CodeCodex
Creates the foundational component set in Figma: well-structured components with variant matrices, bound to the system's tokens/styles, with slots typed so they translate cleanly to code later.
Skill Claude CodeCodex
Sequences a single new component through the whole flow: Figma → tokens → code/stories. This skill holds zero domain logic of its own — it is a sequencer that invokes the real skills and gates each stage on a human confirmation. All the actual work lives in the skills it calls; this keeps it from rotting when those…
Skill Claude CodeCodex
Measures both sides of a pre-existing system so a retrofit can be right-sized, before anything is built or changed. It is the brownfield analog of /design-system-status: where status reports a local manifest, this assesses an external, mature system — a real codebase and an already-populated Figma file.
Skill Claude CodeCodex
This skill does three foundational jobs, in order.
Skill Claude CodeCodex
End state: a Figma page named Icons containing the relevant icon set as scalable, well-named components, ready to be consumed by components (skill 4) and swapped via instance properties.
At most 3 mods per repository are shown here — the rest are on their repository pages: