moai-design-tools
CommunityDesign to Code: Figma, Pencil, React/Tailwind
Authortaewook486
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill bridges the gap between visual design and implementation, enabling the conversion of designs from Figma and Pencil into functional React and Tailwind CSS code.
Core Features & Use Cases
- Design Fetching: Extract design context, tokens, and metadata from Figma files.
- Visual Rendering: Create and iterate on designs using Pencil MCP's AI-assisted tools.
- Code Generation: Export Pencil designs directly into React components styled with Tailwind CSS.
- Use Case: A developer can use this Skill to fetch a design system's color palette from Figma, then use Pencil to quickly mock up a new UI component, and finally export that component as a React/Tailwind implementation.
Quick Start
Use the moai-design-tools skill to fetch design tokens from the Figma file with ID 'your-figma-file-id'.
Dependency Matrix
Required Modules
None requiredComponents
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: moai-design-tools Download link: https://github.com/taewook486/real-estate-mcp/archive/main.zip#moai-design-tools 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.