{{persona::BRAND}}-design-tools
CommunityDesign to code: Figma, Pencil, React/Tailwind
Authoryejune
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill bridges the gap between visual design and implementation by integrating with design tools like Figma and Pencil, enabling the conversion of designs into production-ready code.
Core Features & Use Cases
- Design Context Fetching: Extract design specifications, tokens, and metadata from Figma files.
- Visual Design Rendering: Create and iterate on visual designs using Pencil MCP's AI-assisted tools.
- Code Generation: Export finalized designs from Pencil into React and Tailwind CSS components.
- Use Case: A frontend developer needs to implement a new UI component based on a design mock-up. They can use this Skill to fetch design details from Figma, prototype the component in Pencil if needed, and then automatically generate the React and Tailwind code.
Quick Start
Use the design-tools skill to export the current Pencil design to React and Tailwind code.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill:
Name: {{persona::BRAND}}-design-tools
Download link: https://github.com/yejune/godo/archive/main.zip#persona-brand-design-tools
Please download this .zip file, extract it, and install it in the .claude/skills/ directory.Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.