design-lab

Plugin design-lab from marketplace local in cosmicdreams/claude-plugins. Commands read from the repo's manifest — today.

Skills (14)

• capture

  Measure and photograph inventoried components on a running site at documented breakpoints. Produces source-fidelity measurements and element-scoped screenshots for Figma components and cards. Not for discovering components (design-lab:inventory) or counting usage (design-lab:usage).

• detect

  Detect prior design-system work and the independent component, token, and usage sources in a repository. Run before extraction; not for extracting components (design-lab:inventory) or building Figma (design-lab:figma-component).

• evaluate

  Score a finished design-lab run and produce a presentable, self-contained HTML report — what was built, how faithful it is to the live site, what it cost, and how repeatable it is — plus a schema-validated scorecard and the fixed completion message. design-lab:run calls it as its last step; also use

• figma-build

  Build an earlier design-lab run's capture and plan into a new, empty Figma file, as a new run with its own pane, verification and report: minutes, where a fresh capture takes hours. Use to rebuild a library into a fresh file, after a design-lab update or to show the build. Not for capturing or plann

• figma-component

  Build, rebuild or diagnose ONE component in the Figma library: its responsive master, its documentation block, its live captures and its visual comparison. Invoke as `design-lab:figma-component` with a component id. Not for foundations (design-lab:figma-foundation), the Getting Started page (design-

• figma-foundation

  Explain, rebuild or diagnose the library's pages, variables and Foundations pages (Color, Typography, Spacing & Layout, Elevation & Shape, Brand Voice & Language). Run as part of design-lab:run; use alone to refresh foundations after tokens or published copy change. Not for components (design-lab:fi

• figma-index

  Rebuild the Getting Started page — coverage, how the file is organised, what each component block shows, the linked index, known gaps, changelog and provenance — from the recorded build. Run after any component is built or rebuilt. Not for building components (design-lab:figma-component) or the fina

• init

  Set design-lab up for the person and this machine, once: where runs live, their name for reports, the shared Playwright and its browser, the pinned Node dependencies, the Figma runner, and the Claude Code settings that would otherwise make runs ask for approval. Run it the first time design-lab is u

• inventory

  Extract source components, fields, options, slots, relationships, and source defects into a validated components.json. Run after detection; not for deciding the Figma representation (design-lab:plan).

• plan

  Convert validated components.json into a durable, reviewable Figma build plan with properties, variant arithmetic, flags, and explicit refusals. Run before any Figma mutation. Not for extraction (design-lab:inventory).

• run

  Build or refresh a complete Figma component library from a real codebase, beginning with source discovery and ending with whole-file verification. Use for end-to-end library work. Not for a single phase on its own — detection (design-lab:detect), extraction (design-lab:inventory), one component (des

• tokens

  Extract source-backed color, spacing, typography, and other design tokens into validated tokens.json with breakpoint values, provenance, and real code identifiers. Run before the Figma foundation; not for component extraction (design-lab:inventory).

• usage

  Measure where source components are actually placed and attach verified examples, placement counts, structural references, and usage tiers to components.json. Run after inventory; not for visual capture (design-lab:capture).

• verify

  Verify an entire built Figma library against the versioned design-lab standard, fixing every blocker or major finding. Run before handoff; not for extraction (design-lab:inventory) or component construction (design-lab:figma-component).

Slash commands (2)

• /design-lab:recap

  Show a finished design-lab run's recap: the Figma file, coverage, accuracy, time, tokens and the developer audit

• /design-lab:watch

  Show where the design-lab run is, in a pane that stays open until it is done

Hooks (1)

• PreToolUse

  node "${CLAUDE_PLUGIN_ROOT}/hooks/guard_runner_token.ts"

Similar plugins