A Claude skill to inspect and build Figma design systems with WCAG checks, component scoring, and optional code sync.
work-with-design-systems is worth checking the docs before setup with strong trust signals. Check agent compatibility and use-case fit before adding it to your workflow.
Repository setup guidance
npx skills add natdexterra/work-with-design-systemsRun the command in your terminal.
Confirm that the skill files were added to your agent workspace.
Check the README requirements before invoking the skill in your agent.
This tool helps you work with Figma design systems in two ways. First, you can inspect existing designs to check for accessibility issues, naming problems, and missing states. Second, you can build or fix components, add slots, and optionally export everything to CSS tokens and AI rules for your codebase. It works with Claude Code, Cursor, and Codex.
work-with-design-systems is a comprehensive Claude skill for managing Figma design systems throughout their lifecycle. It offers two primary modes: inspect (read-only) and build (write). In inspect mode, it runs six audit modules covering token compliance, interactive states, WCAG accessibility, detached instances, naming quality, and component descriptions. Each component receives a weighted readiness score from 0 to 100. After inspection, the skill pauses for your decision before making any changes. In build mode, it follows a six-phase workflow (Phase 6 optional) to create or fix components, add variable bindings and slots, and generate structured descriptions. Phase 6 optionally syncs to code by producing tokens.css with three-layer indirection, an AI rules file for Claude Code/Cursor/Codex, and a CI-ready audit script. The skill supports three export formats: markdown, JSON, and AI prompt for code generation. It also includes a patterns guide for documenting composition in Figma and optional story-to-variant parity checks when Storybook is present. Designed for design engineers, frontend developers, and design system maintainers.
Strong trust signals; still review the README and permissions before production use.
Last commit was about 61 days ago.
45 GitHub stars indicate community interest.
0 open issues signal maintenance load.
MIT license detected.
Audit a Figma design system for WCAG accessibility and component readiness before handoff.
Build new components with proper variable bindings, slots, and structured descriptions.
Sync design tokens from Figma to CSS variables and AI rules for consistent code generation.
Fix missing interactive states (e.g., hover, pressed) across all components in a library.
Generate handoff documentation in markdown or JSON format for developers.
Build mode writes to Figma files; ensure you have backups or use a test file first.
Phase 6 generates files in your codebase; review generated tokens and rules before committing.
The skill uses Figma API tokens; keep them secure and do not share them.
45
Stars
4
Forks
0
Issues
MIT
License
Extract any website's complete design system with one command.
Argos is an open source visual testing platform that detects unintended UI changes to help teams maintain quality.
Generate design system documentation for UI components directly from your AI agent, rendering into Figma or portable .md files.
A Claude skill to inspect and build Figma design systems with WCAG checks, component scoring, and optional code sync.
Design engineers bridging Figma and code, Frontend developers consuming design systems, Design system maintainers ensuring consistency
The setup section provides repository-level starting guidance, not a guarantee of an independently verified installation. Check the official README and release notes.
Build mode writes to Figma files; ensure you have backups or use a test file first. Phase 6 generates files in your codebase; review generated tokens and rules before committing.
Similar or complementary options to evaluate include design-extract, Argos, uSpec.
Jun 7, 2026
3 security/trust notes recorded.
Setup difficulty is 3/5.