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.
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.
Skill Claude CodeCodex
Turns the user's working folder into a scalable monorepo and advances their version-control stage. Defaults: pnpm + Turborepo, with a layout ready to grow into a full app.
Skill Claude CodeCodex
Sequences a brownfield retrofit through the safe seven-phase order (with docs inserted as a gated Phase 6.5), gating each phase on a human confirmation. Like component-pipeline, this skill holds zero domain logic of its own — it is a sequencer that invokes the real skills and the phase work, and only updates the…
Skill Claude CodeCodex
Builds the code half of the component library: real components consuming the synced tokens, stories documenting them, Chromatic for visual regression, and Code Connect tying Figma to code when available.
Skill Claude CodeCodex
Creates a two-tier design token system as Figma variables. Each tier is split into one collection per category (color, spacing, type, radius, border) so every category owns its own modes — see Step 1 for why. Within a collection, Figma variables are grouped with / and omit the category prefix (the collection already…
Skill Claude CodeCodex
Builds the backbone artifact of a brownfield retrofit: crosswalk.json, a persistent three-way map of new token ↔ old Figma variable ↔ old code identifier. It drives the code retrofit and the tokens:validate CI gate. This skill also installs the canonical scripts into the user's repo and wires the gate.
Skill Claude CodeCodex
Creates a polished visual reference of the design system's tokens and styles on a dedicated Figma page called Foundations. This is the artifact designers and stakeholders actually look at — so it must be beautiful and on-brand, not a utilitarian dump of swatches.
Skill Claude CodeCodex
Compiles Figma variables into code. The pipeline is one-directional — Figma is the source of truth for token values; code consumes generated artifacts that are never hand-edited.