skills.rest
windysky
windyskyCOMMUNITY
Explore all skills by this author →
GitHub

moai-design-tools

Generate React/Tailwind components from Figma and Pencil designs.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

MoAI Design Tools unifies design-to-code workflows by providing integrated guidance and tooling for Figma MCP, Pencil MCP, and Pencil-to-Code export, reducing context switching and accelerating implementation.

Core Features & Use Cases

  • End-to-end guidance for fetching design context from Figma, rendering pencil designs, and exporting React/Tailwind code from .pen designs.
  • Design token extraction, style-guide alignment, and token-to-code mapping to preserve fidelity across design-to-code pipelines.
  • Use case: teams converting design systems into production-ready components with tokens and consistent styling.

Quick Start

Open the MoAI Design Tools skill and configure your Figma and Pencil pipelines to start generating code from designs.

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 Skill automates the workflow by fetching design context via Figma MCP, rendering through Pencil MCP, and exporting production-ready components using Pencil-to-Code.

What is design-to-code token extraction and how does it preserve UI fidelity?▼

Design-to-code token extraction pulls styling variables from your Figma and Pencil designs to map them directly into code, ensuring style-guide adherence and visual fidelity across your React and Tailwind UI components.

How do I generate production-ready React components from a .pen design file?▼

You can generate production-ready React components from a .pen design file by using the Pencil-to-Code export mechanism, which maintains the design lineage, component structure, and deterministic outputs for your project.

Do I need a Figma MCP remote server to automate design-to-code pipelines?▼

Yes, automating end-to-end design-to-code pipelines requires using the Figma MCP remote server alongside Pencil MCP tooling to successfully fetch design context and maintain token structure for code generation.

What is the best way to align extracted design tokens with an existing style guide in React?▼

The best way to align design tokens with a style guide is using an automated design-to-code mapping pipeline that extracts tokens from Figma and applies them deterministically to your React and Tailwind components.

Related Skills

Explore More Design & Creative Skills→
seo-jinseokseo-jinseok

moai-design-tools

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

Community
Advanced
amo-tech-aiamo-tech-ai

React Frontend Development

Develop React frontend components with TypeScript, Tailwind CSS, and shadcn/ui.

Community
Intermediate
lucasromanhlucasromanh

shadcn-ui

Guide shadcn/ui component integration into React projects with Tailwind configuration.

Community
Advanced
gkswls5006-webgkswls5006-web

moai-design-tools

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

Community
Advanced