skills.rest
yekinya
yekinyaCOMMUNITY
Explore all skills by this author →
GitHub

moai-design-tools

Convert Figma and Pencil designs into React and Tailwind code.

2|Updated May 27, 2026
Search Tags:#react#figma#mcp#design tokens#tailwind#design to code#pencil
One-click install
npx skills add https://github.com/yekinya/moai-novel --skill moai-design-tools-yekinya
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: moai-design-tools
Source: https://github.com/yekinya/moai-novel/tree/main/moai-novel/.claude/skills/moai-design-tools
Command: npx skills add https://github.com/yekinya/moai-novel --skill moai-design-tools-yekinya

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Bridging the gap between visual designs and frontend implementation requires manually translating layouts, colors, and spacing into code, which is slow and error-prone. This Skill guides the full design-to-code workflow using Figma MCP, Pencil MCP, and Pencil-to-code export so implementations match the design source of truth. ## Core Features & Use Cases - Figma MCP Integration: Fetch design context, extract design tokens and variables, capture screenshots, and use Code Connect to link Figma components to code implementations. - Pencil MCP Rendering: Create and edit .pen design files (pure JSON, schema v2.9) with batch_design operations, style guides, design tokens, and visual screenshot validation. - Pencil-to-Code Export: Convert finalized .pen frames into React components with Tailwind CSS classes, preserving component hierarchy and design tokens. - Use Case: A developer receives a Figma design for a dashboard. They fetch the design context and variable definitions via Figma MCP, map tokens to tailwind.config.js, implement the components, and verify the result against the captured screenshot. ## Quick Start Ask the agent to fetch the design context and variables from your Figma file and generate a React component with Tailwind styling that matches the design.

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 code?▼

Use Figma MCP to call get_design_context for component structure, get_variable_defs for design tokens, and get_screenshot for visual reference. Then implement the React component with Tailwind classes mapped from the extracted tokens and verify against the screenshot.

Figma MCP vs Pencil MCP: which should I use for design-to-code?▼

Use Figma MCP when working with existing Figma files from designers and extracting tokens or specifications. Use Pencil MCP when creating new designs from scratch with text-to-design generation and version-controlled .pen JSON files.

How do I export a Pencil .pen design to React components?▼

Pencil-to-code is a prompt-based workflow, not an export API. Read the frame structure with batch_get, extract tokens with get_variables, map node types to React components and Tailwind classes, then verify output against get_screenshot.

Does Figma MCP support writing designs back to Figma?▼

Yes, the use_figma tool supports creating and editing frames, components, variables, and styles via the Remote MCP server, currently free during beta. The generate_figma_design tool also captures live web UI into Figma via Code-to-Canvas.

What are the rate limits for the Figma MCP server?▼

Starter plans and view/collab seats are limited to 6 tool calls per month. Dev or Full seats on paid plans get per-minute rate limits matching Figma REST API Tier 1.

Why does my generated code not match the Pencil design layout?▼

Use snapshot_layout to inspect computed bounding boxes and detect overlaps, then verify flexbox direction, gap, and alignment values from batch_get output. Ensure design tokens from get_variables are applied instead of hardcoded values.

Related Skills

Explore More Design & Creative Skills→
modu-aimodu-ai
1.2k

moai-design-tools

Integrates Figma MCP and Pencil MCP to convert designs into React and Tailwind code.

Official
Advanced
endorphin-aiendorphin-ai
3

react-design-mean

Design React frontend architectures for MEAN stack applications.

Official
Advanced
kobogithubkobogithub

uiux-viewport-testing

Automate responsive design testing by resizing browser viewports and capturing screenshots.

Community
Intermediate
hschnehschne
1

design-principles

Apply named aesthetic philosophies to frontend UI builds and critiques.

Community
Intermediate