design-system-agent
CommunityAlways-on design-system agent for Figma MCP.
Authoraiguy611
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Automates end-to-end design-system workflows by integrating Figma MCP with Claude Code to streamline tokens, components, and accessibility tasks.
Core Features & Use Cases
- Design system generation: Create color palettes, typography, spacing, and base components that align with presets like Tailwind or Material.
- Design token management: Extract and sync tokens between Figma and code in multiple formats (JSON, CSS, SCSS, TS, Tailwind).
- Accessibility auditing: Run WCAG checks with auto-fix and reporting.
- React translation: Translate Figma designs into production-ready React components with optional Storybook docs.
- Real-time collaboration: WebSocket-based live updates and bidirectional sync.
Quick Start
Launch the Design System Agent and connect it to your Figma document, then initiate a token export or component translation workflow in one seamless run.
Dependency Matrix
Required Modules
figma-mcp-serverdesign-system-agent-server
Components
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: design-system-agent Download link: https://github.com/aiguy611/cc-tools/archive/main.zip#design-system-agent Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.