skills.rest
desafin
desafinCOMMUNITY
Explore all skills by this author →
GitHub

moai-design-tools

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

Updated Nov 28, 2024
Search Tags:#react#design system#figma#tailwind#design to code#pencil#ui implementation
One-click install
npx skills add https://github.com/desafin/Resource-Monitor-pyQT --skill moai-design-tools-desafin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: moai-design-tools
Source: https://github.com/desafin/Resource-Monitor-pyQT/tree/main/.claude/skills/moai-design-tools
Command: npx skills add https://github.com/desafin/Resource-Monitor-pyQT --skill moai-design-tools-desafin

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill bridges the gap between design and development by integrating with popular design tools like Figma and Pencil, enabling efficient design fetching, visual rendering, and direct code generation.

Core Features & Use Cases

  • Design Fetching (Figma MCP): Extract design context, metadata, and tokens from Figma files.
  • Visual Rendering (Pencil MCP): Create and iterate on visual designs using text prompts and AI assistance.
  • Code Export (Pencil-to-Code): Generate production-ready React and Tailwind CSS code directly from .pen designs.
  • Use Case: A developer needs to implement a new UI component. They can use Figma MCP to fetch the design specifications and tokens, then use Pencil MCP to quickly prototype variations, and finally export the chosen design as React/Tailwind code.

Quick Start

Use the moai-design-tools skill to export the current Pencil design to React and Tailwind CSS 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 CSS code?▼

To convert Figma designs to React and Tailwind CSS, fetch design context and tokens using Figma MCP, render variations with Pencil MCP, and export the chosen design as production-ready code.

What is the best way to export Pencil designs to React components?▼

The best way to export Pencil designs to React components is using the Pencil-to-Code export functionality, which generates production-ready React and Tailwind CSS code directly from .pen design files.

Can I extract design tokens and metadata from Figma files for my design system?▼

Yes, you can extract design tokens and metadata from Figma files. The Figma MCP integration fetches design context, metadata, and tokens to bridge the gap between design and development.

Do I need Pencil MCP to visually render UI designs before exporting to code?▼

Yes, Pencil MCP is required to visually render and iterate on UI designs. It creates visual designs using text prompts and AI assistance before exporting them to React and Tailwind CSS code.

How does fetching Figma context and visually rendering with Pencil work together?▼

Fetching Figma context and rendering with Pencil work together by extracting design specifications via Figma MCP, then using Pencil MCP to rapidly prototype variations before final code generation.

Are there limitations when generating React and Tailwind code from visual designs?▼

Code generation from visual designs requires integration with Figma MCP, Pencil MCP, and Pencil-to-Code export functionalities. Without these dependencies connected, the design fetching, rendering, and export 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
azlekovazlekov
1

shadcn

Implement shadcn/ui components with theming in React/Next.js projects.

Community
Intermediate
majesticlabs-devmajesticlabs-dev
47

tailwind-styling

Generate responsive Tailwind CSS styles for React components.

Official
Intermediate
seo-jinseokseo-jinseok

moai-design-tools

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

Community
Advanced