skills.rest
taewook486
taewook486COMMUNITY
Explore all skills by this author →
WebsiteGitHub

moai-design-tools

Fetch Figma design context and export Pencil designs into React and Tailwind CSS code.

Updated Feb 19, 2026
Search Tags:#react#figma#component generation#tailwind#design to code#pencil#ui implementation
One-click install
npx skills add https://github.com/taewook486/real-estate-mcp --skill moai-design-tools
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: moai-design-tools
Source: https://github.com/taewook486/real-estate-mcp/tree/main/.claude/skills/moai-design-tools
Command: npx skills add https://github.com/taewook486/real-estate-mcp --skill moai-design-tools

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

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'.

Frequently Asked Questions about moai-design-tools

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert a Figma design to React and Tailwind CSS code?▼

To convert Figma designs to React and Tailwind CSS, this Skill fetches design context and tokens from Figma files, renders visual mockups via Pencil MCP, and exports the results directly as functional React components styled with Tailwind CSS.

What is a design-to-code workflow and how does Pencil MCP work with it?▼

A design-to-code workflow bridges visual design and implementation. Pencil MCP provides AI-assisted tools to create, render, and iterate on UI designs fetched from Figma, which are then exported as React and Tailwind CSS components.

Can I extract design tokens and color palettes from a Figma file ID for UI implementation?▼

Yes, you can extract design tokens, color palettes, and metadata directly from Figma files using a specific file ID. These tokens are then used to ensure accurate style guide application during the component generation process.

Do I need both Figma MCP and Pencil MCP to generate React components?▼

You need Figma MCP to fetch the initial design context and tokens, and Pencil MCP to visually render and iterate on the designs. Both are integrated to export the final visual mockups into React and Tailwind CSS code.

What's the best way to manage style guides when exporting Pencil designs to Tailwind CSS?▼

The best way to manage style guides is by extracting design tokens from Figma first. These tokens guide the Pencil MCP rendering process, ensuring the exported Tailwind CSS components maintain consistent styling and metadata.

Related Skills

Explore More Design & Creative Skills→
tech-leads-clubtech-leads-club
5.0k

figma

Translate Figma design nodes into React and Tailwind components.

Official
Advanced
lildibbblildibbb

shadcn-ui

Build React UI components with shadcn/ui, Radix UI, and Tailwind CSS.

Community
Intermediate
gbasingbasin
7

figma-to-react

Convert Figma designs to React components with Tailwind CSS.

Community
Advanced
seo-jinseokseo-jinseok

moai-design-tools

Fetch Figma design context, render with Pencil MCP, and export .pen designs to React/Tailwind code.

Community
Advanced