skills.rest
jinwoonghong
jinwoonghongCOMMUNITY
Explore all skills by this author →
GitHub

moai-design-tools

Convert Pencil design files into React and Tailwind CSS code.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the process of translating visual designs into functional code, bridging the gap between designers and developers.

Core Features & Use Cases

  • Figma Integration: Fetch design context, tokens, and assets directly from Figma files.
  • Pencil MCP: Create, render, and iterate on visual designs using AI-assisted tools.
  • Design-to-Code Export: Convert Pencil designs into production-ready React and Tailwind CSS components.
  • Use Case: A developer needs to implement a UI component designed in Figma. They use this Skill to fetch the design specifications, extract color palettes and spacing, and then generate the corresponding React component with Tailwind CSS.

Quick Start

Use the moai-design-tools skill to generate React and Tailwind code from a Pencil design file.

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 Figma designs to React and Tailwind CSS code?▼

You can convert Figma designs to React and Tailwind CSS by fetching design context like tokens and assets from Figma, then using the Pencil MCP integration to export the visual mockups into functional code components.

Can I generate React components from a Pencil design file?▼

Yes, you can generate React components from a Pencil design file by using the automated design-to-code export feature, which translates the rendered Pencil visual designs into React and Tailwind CSS components.

How does Pencil MCP integrate with Figma for UI implementation?▼

The integration works by fetching design context and specifications from Figma files, rendering visual designs with Pencil MCP, and then exporting the results into React and Tailwind CSS code to automate UI implementation.

Do I need Figma to use the Pencil MCP for design-to-code workflow?▼

No, Figma is not strictly required. While Figma integration allows you to fetch design context and tokens, you can also create, render, and iterate on visual designs directly using Pencil MCP before exporting to React and Tailwind CSS.

What design tokens and assets can I extract from Figma for React development?▼

You can extract color palettes, spacing, design tokens, and other assets directly from Figma files. These specifications are used to ensure visual accuracy when generating the corresponding React components with Tailwind CSS.

Related Skills

Explore More Design & Creative Skills→
soo-kate-yeonsoo-kate-yeon

moai-design-tools

Fetch Figma design specs and export Pencil designs as React and Tailwind CSS code.

Community
Advanced
Tahasaif3Tahasaif3

shadcn

Provide Radix UI-based components styled with Tailwind CSS for React interfaces.

Community
Intermediate
jieni777jieni777
1

css-to-tailwind

Convert CSS declarations into Tailwind utility classes with a mapping report.

Community
Intermediate
shakhovskiya-createshakhovskiya-create

mock-fidelity

Convert mockups into frontend code with exact design token extraction.

Community
Advanced