skills.rest
soo-kate-yeon
soo-kate-yeonCOMMUNITY
Explore all skills by this author →
GitHub

moai-design-tools

Fetch Figma design specs and export Pencil designs as React and Tailwind CSS code.

Updated Nov 20, 2025
Search Tags:#react#figma#tailwind#design to code#pencil#ui generation#component export
One-click install
npx skills add https://github.com/soo-kate-yeon/shadowoo --skill moai-design-tools-soo-kate-yeon
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: moai-design-tools
Source: https://github.com/soo-kate-yeon/shadowoo/tree/main/.agents/skills/moai-design-tools
Command: npx skills add https://github.com/soo-kate-yeon/shadowoo --skill moai-design-tools-soo-kate-yeon

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 teams.

Core Features & Use Cases

  • Design Fetching: Integrates with Figma to pull design context and specifications.
  • Visual Rendering: Utilizes Pencil MCP to create and iterate on visual designs from text prompts.
  • Code Generation: Exports Pencil designs directly into React and Tailwind CSS code.
  • Use Case: A developer can describe a UI element, have Pencil MCP generate a visual representation, and then export that design directly as a React component with Tailwind styling, significantly speeding up frontend implementation.

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

To convert Figma designs to React and Tailwind CSS, this tool fetches design context and specifications directly from Figma, allowing you to translate visual assets into production-ready code components.

Can I generate UI components from text prompts and export them?▼

Yes, you can generate UI components from text prompts by using the integrated visual rendering tool to create mockups, which can then be exported directly as functional React components with Tailwind styling.

Does this design-to-code workflow support exporting .pen files?▼

Yes, this design-to-code workflow supports exporting .pen files by generating production-ready React and Tailwind CSS code directly from the visual designs created within the Pencil environment.

What is the best way to bridge the gap between design and development teams?▼

The best way to bridge design and development is by streamlining the translation of visual designs into functional code, pulling design context from Figma and exporting visual mockups as implementable React components.

Do I need Pencil MCP to render visual mockups from text for code generation?▼

Yes, you need the Pencil MCP integration to render visual mockups from text prompts, which is a required step before exporting those visual representations into production-ready React and Tailwind CSS code.

Related Skills

Explore More Design & Creative Skills→
jinwoonghongjinwoonghong

moai-design-tools

Convert Pencil design files into React and Tailwind CSS code.

Community
Advanced
aibangjuxinaibangjuxin
2

frontend-developer

Develop and test React components with TypeScript and Tailwind CSS.

Community
Intermediate
habrahgithubhabrahgithub

tailwind-design-system

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

Community
Intermediate
jubalmjubalm
1

shadcn-init

Initialize shadcn/ui in React projects with Tailwind CSS v4 configuration.

Community
Advanced