modu-ai 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
- Rapid prototyping and visual iteration needed
- Text-based design workflow preferred
- Want version-controllable design format (DNA codes)
- Collaborative design discussions with team
Choose Pencil-to-Code Export when:
- Design is finalized in .pen format
- Ready to implement visual designs as code
- Need React components with Tailwind styling
- Maintaining design fidelity is critical
- Rapid frontend development from designs
Common Design-to-Code Patterns
Universal Patterns
These patterns apply across all three tools with tool-specific implementations.
Design Token Management:
All tools support design token extraction and management. Figma MCP extracts tokens from existing files, Pencil MCP generates tokens during design creation, Pencil-to-code exports tokens as CSS variables or Tailwind config.
Component Architecture:
All tools maintain component hierarchy. Figma MCP reads component structure from Figma, Pencil MCP creates component structure in DNA codes, Pencil-to-code generates React components preserving hierarchy.
Responsive Design:
All tools handle responsive layouts. Figma MCP extracts responsive variants, Pencil MCP defines responsive breakpoints in DNA, Pencil-to-code generates Tailwind responsive classes.
Style Consistency:
All tools ensure design consistency. Figma MCP validates against design system, Pencil MCP enforces design tokens, Pencil-to-code applies consistent Tailwind classes.
Workflow Best Practices
Applicable to all tools:
Design System Integration:
- Define design tokens before starting design work
- Use consistent naming conventions across tools
- Maintain single source of truth for design values
- Document token usage and component patterns
Version Control:
- Commit Figma metadata snapshots for reference
- Version DNA codes in repository
- Track design iterations with git
- Document design decisions in code comments
Collaboration:
- Use Figma comments for design feedback
- Share .pen frames for visual review
- Create pull requests for design changes
- Maintain design documentation alongside code
Quality Assurance:
- Validate design tokens against style guide
- Test responsive breakpoints
- Verify accessibility compliance
- Review generated code for optimization
Tool-Specific Implementation
For detailed tool-specific implementation guidance, see the reference files:
Figma MCP Implementation
File: reference/figma.md
Covers Figma MCP connection setup, file metadata fetching, component tree extraction, design token retrieval, screenshot capture, and style guide generation.
Key sections: MCP configuration, authentication setup, file access patterns, metadata queries, component hierarchy parsing, token extraction formats, screenshot API usage, design system documentation.
Pencil MCP Rendering
File: reference/pencil-renderer.md
Covers DNA code format and syntax, text-to-design generation, .pen frame rendering, visual design iteration, collaborative workflows, and design version control.
Key sections: DNA code structure, natural language design prompts, rendering options, frame configuration, design refinement patterns, version control strategies, team collaboration workflows.
Pencil-to-Code Export
File: reference/pencil-code.md
Covers .pen design export to React components, Tailwind CSS generation, component structure preservation, responsive layout handling, and design system integration.
Key sections: Export configuration, React component generation, Tailwind class application, props API design, state management integration, testing generated components, optimization strategies.
Tool Comparison
File: reference/comparison.md
Provides detailed comparison matrix covering use cases, workflow patterns, integration complexity, and when to use each tool.
Key sections: Feature comparison table, workflow decision matrix, tool integration patterns, migration strategies, ecosystem compatibility, team workflow recommendations.
Navigation Guide
When working with design-to-code features:
- Start with Quick Tool Selection (above) if choosing a tool
- Review Common Design-to-Code Patterns for universal concepts
- Open tool-specific reference file for implementation details
- Refer to comparison.md when evaluating multiple tools
- Use Context7 tools to access latest tool documentation
Context7 Documentation Access
Access up-to-date tool documentation using Context7 MCP:
Figma:
- Use resolve-library-id with "figma" to get library ID
- Use get-library-docs with topic "mcp", "api", "design-tokens", "metadata"
Pencil:
- Use resolve-library-id with "pencil" to get library ID
- Use get-library-docs with topic "mcp", "dna-codes", "rendering", "export"
Works Well With
- moai-domain-uiux: Design systems and component architecture
- moai-domain-frontend: React implementation patterns
- moai-library-shadcn: shadcn/ui component integration
- moai-lang-typescript: TypeScript for generated components
- moai-lang-react: React best practices
- moai-foundation-core: SPEC-driven development workflows
Status: Active Version: 2.0.0 (Consolidated Design Tools Coverage) Last Updated: 2026-02-09 Tools: Figma MCP, Pencil MCP, Pencil-to-Code Export