Design Blueprint
Inspect design systems for quality issues or build them from scratch with tokens, components, and optional code export.
Run this command to deploy the blueprint to your environment.
Design systems in Figma often lack proper structure, variable bindings, accessibility checks, and component descriptions — making them hard to maintain and invisible to AI agents. Alternatively, you need to build one but don't know the best practices for tokens, slots, variants, and code-to-design sync.
You start by choosing inspect (read-only audit) or build (create/extend). Inspect mode runs six quality modules (token compliance, interactive states, WCAG accessibility, detached instances, naming quality, and component descriptions) and produces a scored report. Build mode walks you through six sequential phases: discover your design language, set up token foundations, structure your Figma file, build components with proper bindings and slots, validate everything, and optionally export tokens.css and AI rules to sync back to your codebase. The skill pauses between major stages for your review and decision.
Run read-only quality audits across six modules: token compliance, interactive states, WCAG accessibility, detached instances, naming quality, and component descriptions. Produces scored reports with priorities.
Gather design language specs from scratch or analyze existing codebase. Determine token categories, modes (Light/Dark, multi-brand), component inventory, and recommended build path.
Create variable collections (3-tier or flat domain-based), set up Light/Dark and multi-brand modes, bind text styles, and ensure every variable has explicit scopes and codeSyntax.WEB.
Create documentation pages (Cover, Getting Started, Foundations, component groups, Patterns, Utilities) with consistent layout wrappers and reusable title components.
Create atomic and compound components with complete variant matrices, variable bindings, named slots for variable content, and structured descriptions for AI agents.
Run comprehensive validation checks (variable scopes, codeSyntax coverage, bindings, Light/Dark modes, descriptions, slot decisions), build a test page, and ensure all components work together.
Generate tokens.css with three-layer indirection, AI rules files for Claude Code / Cursor / Codex, and CI-ready audit script. Closes the design-to-code loop.
Dual-Mode Operation
Inspect mode for read-only audits with WCAG checks and component scoring; Build mode for creating or extending design systems with enforced best practices.
Six Audit Modules
Automatic checks for token compliance (with severity tiers), interactive state completeness, WCAG 2.1 AA accessibility, detached instances, naming quality, and mandatory component descriptions.
Weighted Readiness Scoring
Score each component 0–100 with errors weighted 1.0, warnings 0.3, state gaps 3.0 — reveals which components break downstream code generation most.
Slots-Based Composition
Modern alternative to detach patterns: add named slots to compound components (Card, Modal, Dialog) for variable inner content while preserving instance integrity.
Three-Layer Indirection in Code Export
tokens.css maps upstream tokens → project aliases with fallback → component references, allowing safe swaps of design systems and offline fallbacks.
Dual-Mode Operation
Inspect mode for read-only audits with WCAG checks and component scoring; Build mode for creating or extending design systems with enforced best practices.
Six Audit Modules
Automatic checks for token compliance (with severity tiers), interactive state completeness, WCAG 2.1 AA accessibility, detached instances, naming quality, and mandatory component descriptions.
Weighted Readiness Scoring
Score each component 0–100 with errors weighted 1.0, warnings 0.3, state gaps 3.0 — reveals which components break downstream code generation most.
Slots-Based Composition
Modern alternative to detach patterns: add named slots to compound components (Card, Modal, Dialog) for variable inner content while preserving instance integrity.
Three-Layer Indirection in Code Export
tokens.css maps upstream tokens → project aliases with fallback → component references, allowing safe swaps of design systems and offline fallbacks.