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.
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.
Repository setup guidance
Strong trust signals; still review the README and permissions before production use.
Last commit was about 106 days ago.
45 GitHub stars indicate community interest.
0 open issues signal maintenance load.
MIT license detected.
3 security/trust notes recorded.
Setup difficulty is 3/5.
Generate design system documentation for UI components directly from your AI agent, rendering into Figma or portable .md files.
Argos is an open source visual testing platform that detects unintended UI changes to help teams maintain quality.
Bidirectional MCP bridge that lets AI draw UI directly on Figma canvas and read designs back as structured data.
Extract any website's complete design system with one command.
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.
45
Stars
4
Forks
0
Issues
MIT
License
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 uSpec, Argos, figma-ui-mcp.
Aug 20, 2026