skills.rest
thkim2015
thkim2015COMMUNITY
Explore all skills by this author →
GitHub

moai-design-tools

Fetch Figma design context and export React/Tailwind code.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines the complex 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 screenshots directly from Figma files.
  • Pencil MCP for Design: Create and iterate on visual designs using AI-assisted tools and manage them as version-controlled JSON (.pen files).
  • Pencil-to-Code Export: Convert finalized .pen designs into production-ready React and Tailwind CSS code.
  • Use Case: A developer needs to implement a UI component designed in Figma. They use Figma MCP to get the design specs and then use Pencil MCP to refine or generate the component's structure before exporting it as React/Tailwind code.

Quick Start

Use the moai-design-tools skill to fetch design context from the Figma file with ID 'your_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 Figma designs to React and Tailwind code?▼

To convert Figma designs to React and Tailwind code, this tool fetches design context and screenshots via Figma MCP, allowing you to refine the structure before exporting production-ready components.

Can I generate UI components from Figma files automatically?▼

Yes, you can generate UI components from Figma files by fetching design tokens and specs through Figma MCP, then utilizing Pencil MCP to automate the component creation process before code export.

What is the best way to manage design versions when converting designs to code?▼

The best way to manage design versions during design-to-code conversion is using Pencil MCP to store visual designs as version-controlled JSON files, ensuring consistent asset tracking before exporting.

Does this design-to-code workflow require Pencil MCP for Figma integration?▼

Pencil MCP is not required for basic Figma integration, but using it enables AI-assisted design iteration and .pen file management before exporting the finalized assets as React/Tailwind code.

How do I fetch design context from a specific Figma file ID?▼

You fetch design context from a specific Figma file ID by initiating the integration skill, which retrieves design tokens, specs, and visual screenshots directly from your provided Figma file.

What are the limitations of exporting Pencil designs to React and Tailwind?▼

Exporting Pencil designs to React and Tailwind requires finalized .pen files and adherence to design system principles, meaning incomplete JSON structures or unmanaged design tokens may impact output accuracy.

Related Skills

Explore More Design & Creative Skills→
MercurykzMercurykz

figma-implement-design

Translates Figma URLs or node IDs into project-conformant code with WCAG-compliant output using Figma MCP workflow.

Community
Advanced
Abrahan-EagleAbrahan-Eagle
1

shadcn-ui

Integrate shadcn/ui components into React projects with Tailwind CSS.

Community
Advanced
habrahgithubhabrahgithub

tailwind-design-system

Create Tailwind CSS design tokens and component variants for consistent theming.

Community
Intermediate
windyskywindysky

moai-design-tools

Generate React/Tailwind components from Figma and Pencil designs.

Community
Advanced