jikime-design-tools
CommunityDesign tool integration for modern workflows.
Authorjikime
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill streamlines the process of integrating design tools like Figma and Pencil MCP, enabling seamless conversion of visual designs into code and managing design assets efficiently.
Core Features & Use Cases
- Unified Design Access: Interact with both Figma and Pencil MCP designs through a single interface.
- Design-to-Code Export: Convert
.penfiles into production-ready React components with Tailwind CSS. - Design Token Management: Fetch, set, and manage design variables and style guides.
- Use Case: A developer needs to implement a new UI component based on a design mock-up. They can use this Skill to fetch the design from Pencil MCP, extract its style tokens, and then export it as a React component.
Quick Start
Use the jikime-design-tools skill to get the style guide tags from Pencil MCP.
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: jikime-design-tools Download link: https://github.com/jikime/jikime-adk/archive/main.zip#jikime-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.