moai-mcp-figma
About
This Claude Skill provides MCP-based Figma integration for extracting design systems, generating code components, and syncing design tokens. It enables design-to-code workflows by converting Figma files, auto-layouts, and assets into development-ready code for frameworks like React and Vue. Use it when integrating Figma designs into your development process to automate component generation and maintain design consistency.
Quick Install
Claude Code
Recommendednpx skills add modu-ai/moai-adk -a claude-code/plugin add https://github.com/modu-ai/moai-adkgit clone https://github.com/modu-ai/moai-adk.git ~/.claude/skills/moai-mcp-figmaCopy and paste this command in Claude Code to install this skill
GitHub Repository
Related Skills
moai-ai-nano-banana
OtherThis Claude Skill provides integration with Nano-Banana AI services for content generation, image creation, and text analysis workflows. It enables developers to incorporate AI-powered content generation, image editing, and multi-modal operations into their applications. Use this skill when you need to add AI service capabilities for automated content creation within your projects.
moai-ai-nano-banana
OtherThis Claude Skill integrates Nano-Banana AI services for AI-powered content and image generation within developer workflows. It provides capabilities for text processing, code generation, and multi-modal AI operations. Use it when you need to incorporate content creation and image generation services directly into your development environment.
moai-mcp-figma
OtherThis Claude Skill integrates Figma designs into development workflows through MCP server connectivity. It extracts design systems, syncs design tokens, and generates framework-specific components from Figma files. Use it when converting Figma designs to code or integrating design systems into your project.
moai-mcp-notion
OtherThis MCP skill provides Notion workspace integration for developers, enabling database operations, page management, and automated knowledge extraction. It's designed for automating documentation workflows and managing Notion content through Claude Code. Key capabilities include querying/updating databases, creating pages, and structuring extracted information.