| name | moai-design-tools |
| description | Design tool integration specialist covering Figma MCP, Pencil renderer, and Pencil-to-code export. Use when fetching design context from Figma, rendering Pencil DNA codes to .pen frames, exporting .pen designs to React/Tailwind code, or choosing design-to-code workflows. Supports design fetching (Figma), visual rendering (Pencil MCP), and code generation (React/Tailwind).
|
| license | MIT |
| compatibility | Designed for Claude Code |
| allowed-tools | Read Write Edit Grep Glob Bash WebFetch WebSearch mcp__context7__resolve-library-id mcp__context7__get-library-docs |
| user-invocable | false |
| metadata | {"version":"2.0.0","category":"domain","status":"active","updated":"2026-02-09","modularized":"false","tools":"Figma, Pencil MCP","tags":"figma, pencil, design to code, design export, render dna, pen frame, react from design, tailwind from design, design context, ui implementation","context7-libraries":"/figma/docs, /pencil/docs","related-skills":"moai-domain-uiux, moai-domain-frontend, moai-library-shadcn, moai-lang-typescript, moai-lang-react"} |
| progressive_disclosure | {"enabled":true,"level1_tokens":100,"level2_tokens":4500} |
| triggers | {"keywords":["figma","pencil","design to code","design export","render dna","pen frame","react from design","tailwind from design","design context","ui implementation","design fetching","figma mcp","pencil mcp","component from design","layout from design"],"agents":["expert-frontend","team-designer"],"phases":["run"]} |
Design Tools Integration Specialist
Comprehensive design-to-code workflow guidance covering three major capabilities: Figma MCP (design fetching), Pencil MCP (visual rendering), and Pencil-to-code export (React/Tailwind generation).
Quick Tool Selection
Figma MCP - Design Context Fetching
Figma integration for fetching design context, metadata, and screenshots from Figma files.
Best For: Fetching design tokens, component specifications, layout information, and style guides from existing Figma files. Extracting design system values and understanding design structure.
Key Strengths: Direct access to Figma file metadata, component hierarchy extraction, style guide generation, design token retrieval, screenshot capture for visual reference.
Workflow: Connect to Figma file → Fetch file metadata → Extract component tree → Retrieve design tokens → Generate style documentation.
Context7 Library: /figma/docs
Pencil MCP - Visual Design Rendering
Pencil MCP integration for rendering DNA codes into visual .pen frames and creating design proposals.
Best For: Rapid prototyping, visual design iterations, creating UI mockups from text descriptions, collaborative design discussions, visual proposals before implementation.
Key Strengths: Text-to-design conversion, DNA code format for version control, iterative design refinement, visual preview without implementation, collaborative design workflow.
Workflow: Describe UI in natural language → Generate DNA code → Render to .pen frame → Visually review → Iterate on design → Export to code when ready.
Context7 Library: /pencil/docs
Pencil-to-Code Export - React/Tailwind Generation
Export .pen designs to production-ready React and Tailwind CSS code.
Best For: Converting approved .pen designs to implementation, generating React components with Tailwind styling, maintaining design fidelity in code, rapid frontend development from visual designs.
Key Strengths: Design-to-code automation, React component generation, Tailwind CSS styling, responsive layout handling, component structure preservation, design system integration.
Workflow: Finalize .pen design → Configure export options → Generate React components → Apply Tailwind classes → Review generated code → Integrate into project.
Quick Decision Guide
Choose Figma MCP when:
- Need to extract design context from existing Figma files
- Working with designers who use Figma
- Required to fetch design tokens and component specifications
- Need screenshots or visual references from Figma
- Documenting existing design systems
Choose Pencil MCP when:
- Creating new designs from scratch
