skills.rest
seo-jinseok
seo-jinseokCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

moai-design-tools

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

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

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 design and development.

Core Features & Use Cases

  • Figma Design Fetching: Extract design context, tokens, and metadata from Figma files.
  • Pencil Rendering & Editing: Create, modify, and render visual designs using Pencil MCP.
  • Design-to-Code Export: Convert .pen designs into production-ready React and Tailwind CSS code.
  • Use Case: A developer needs to implement a UI component based on a Figma design. They use this Skill to fetch the design specifications from Figma, then use Pencil MCP to refine the layout, and finally export the component as React/Tailwind code.

Quick Start

Use the moai-design-tools skill to export the current Pencil design to React and Tailwind code.

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

To convert Figma designs to React and Tailwind code, this workflow fetches design context from Figma, refines the layout using Pencil MCP, and exports the .pen designs into production-ready React and Tailwind CSS components.

What is the best way to fetch design tokens from Figma for UI implementation?▼

Fetching design tokens from Figma requires extracting design context and metadata directly from Figma files. The process integrates Figma MCP to pull specifications, which are then used to render visual designs in Pencil MCP.

Can I edit Figma layouts in Pencil before exporting to React components?▼

Yes, you can edit layouts in Pencil before exporting to React components. After fetching design context from Figma, Pencil MCP allows you to create, modify, and render visual designs prior to generating Tailwind CSS code.

Do I need Figma MCP to use Pencil rendering and design-to-code export?▼

You need Figma MCP integrated to fetch the initial design context. The workflow relies on Figma MCP for extracting specifications, then uses Pencil MCP for visual rendering, and finally requires Pencil-to-Code export functionalities for code generation.

How does Pencil MCP handle .pen design exports for Tailwind CSS?▼

Pencil MCP handles .pen design exports by converting the rendered visual designs into production-ready React and Tailwind CSS code. This design-to-code export bridges the gap between visual layout refinement and functional UI implementation.

What are the limitations of exporting Figma files to React via Pencil MCP?▼

Exporting Figma files to React via Pencil MCP is limited by dependencies on Figma MCP, Pencil MCP, and Pencil-to-Code export functionalities. Without these specific integrations active, fetching design context, rendering, and code generation workflows cannot execute.

Related Skills

Explore More Design & Creative Skills→
nesihaver-ILnesihaver-IL

figma

Transform Figma designs into React components and design tokens.

Community
Intermediate
Tahasaif3Tahasaif3

shadcn

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

Community
Intermediate
desafindesafin

moai-design-tools

Fetch Figma design context and export Pencil designs to React/Tailwind code.

Community
Advanced
gkswls5006-webgkswls5006-web

moai-design-tools

Automate design-to-code workflows from Figma to React and Tailwind.

Community
Advanced