ThroughLine

Your agentic design team

ThroughLine is your agentic design team. It does the exacting, tedious work of building and running a production-grade design system, synced between Figma and code. You make the design calls. It does the rest.

/plugin marketplace add jrpease/throughline/plugin install throughline@throughline-marketplace

What does it build?

ThroughLine is a coding-agent plugin that builds you a production-grade design system, synced between Figma and code. Here’s what you get:

Token + style system

A modern token system built in Figma variables across primitives and semantics.

Stylesheets

An elegantly organized canvas visually documenting your system foundations.

Component library

Precisely built components with auto-layout, instance swaps, and variants.

Icon system

A foundational icon system of your choice, built as reusable components.

Monorepo

A Turborepo monorepo scaffolded in GitHub for immediate code sync and building.

Sync adapter

A Style Dictionary adapter that syncs Figma to code through a PR gate.

Storybook

A Storybook instance scaffolded with all components and their props.

Chromatic

A Chromatic instance for automated CI visual-regression testing.

Not a pile of skills. A system.

Twelve sequenced skills, ten shared reference docs, a project manifest, and a Style Dictionary adapter keep every step consistent. Run it twice and you get the same structure.

  1. Twelve skills

    The steps. From connecting Figma to standing up CI, each one knows its prerequisites.

  2. Ten reference docs

    The constitution. Shared standards every skill obeys.

  3. A manifest

    The memory. design-system.json records exactly what’s set up.

  4. An adapter

    The bridge. Style Dictionary translates Figma variables into your framework.

Start from anywhere

ThroughLine adapts to your project. Whether you start from a blank canvas or retrofit an existing system, it explores your Figma and codebase first, then recommends a personalized plan.

Human touchpoints

ThroughLine builds in human checkpoints throughout. It checks in to review work before burning tokens on large implementations. You make the design decisions, ThroughLine executes the work.

Badge
Badge
Badge
Badge

The daily loop

Every design change ships as a reviewable pull request.

claude · zsh
/new-component

Waiting for the next change…

Smart implementation

ThroughLine splits work into tiers and sends each to the right model. Hard architecture decisions go to the strongest tier. Mechanical execution goes to a cheaper one.

Buildbalanced
Designbalanced
Contextfast
Architecturedeep

An expert design team

Extensive reference docs train every agent to be an expert Figma designer. Component structure, auto-layout, instance swaps, token binding. All of it, built right in Figma.

Ada Lovelace
Design Systems Lead
instance swap
auto-layout
token binding
variants

Works with your framework

Whether you use an established framework or your own vanilla CSS, ThroughLine syncs to the stack and the platforms of your choice.

FigmaDesign source
shadcnRadix + Tailwind primitives, tokens wired in.
TailwindA generated theme preset.
MUITyped theme objects.
SwiftNative constants for iOS.
KotlinNative constants for Android.
Vanilla CSSPlain CSS custom properties.
Single working session

Built with itself

Everything here was built in a single working session, synced straight from Figma to a production-ready codebase.

Why I built it

“I got tired of the handoff. A design system lives in two places that never agree: the Figma file and the codebase. Keeping them in sync is a full-time job nobody signed up for. So I built the tool I always wanted. If you’re a designer learning to ship code, I made this for you.”

Jordan Pease

Start your design system

/plugin marketplace add jrpease/throughline/plugin install throughline@throughline-marketplace