skills.rest
skeeper75
skeeper75COMMUNITY
Explore all skills by this author →
GitHub

moai-design-tools

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

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

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

  • Design Fetching: Extract design context and specifications directly from Figma files.
  • Visual Rendering: Create and iterate on visual designs using Pencil MCP's AI capabilities.
  • Code Generation: Export Pencil 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 can use this Skill to fetch the design's properties and then generate the corresponding React and 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 Skill extracts design specifications and properties from Figma files and generates the corresponding production-ready React and Tailwind CSS components.

Can I generate UI components from Figma files automatically?▼

Yes, you can generate UI components from Figma files automatically. The Skill extracts design context and properties to support automated UI implementation workflows for developers.

Does this tool require a Figma API integration to fetch design context?▼

Yes, this tool requires integration with the Figma API to fetch design context. It also requires Pencil MCP integration to provide comprehensive design-to-code conversion capabilities.

What is the best way to render visual prototypes before exporting to code?▼

The best way to render visual prototypes before exporting to code is using Pencil MCP's AI capabilities. The Skill integrates Pencil MCP to create, iterate on, and visually render designs before code generation.

How do I export Pencil designs into React code?▼

To export Pencil designs into React code, use the Skill to translate the visual rendering into production-ready React and Tailwind CSS code, bridging the gap between design tools and functional code.

Do I need Pencil MCP to bridge design and code with AI?▼

Yes, you need Pencil MCP to bridge design and code with AI. It is required for visual rendering and exporting designs, while Figma API integration is needed for fetching the initial design context.

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
Abrahan-EagleAbrahan-Eagle
1

shadcn-ui

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

Community
Advanced
viktorbezdekviktorbezdek
10

frontend-design

Create accessible, responsive UI design systems with Tailwind CSS, Radix UI, and shadcn/ui.

Community
Advanced
jinwoonghongjinwoonghong

moai-design-tools

Convert Pencil design files into React and Tailwind CSS code.

Community
Advanced