jikime-design-tools

Convert Pencil MCP designs into React and Tailwind CSS components.

5|1|Updated Jan 24, 2026

Search Tags:#design #ui #react #code generation #figma #tailwind #pencil

Ready to run

npx skills add https://github.com/jikime/jikime-adk --skill jikime-design-tools

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: jikime-design-tools
Source: https://github.com/jikime/jikime-adk/tree/main/templates/.claude/skills/jikime-design-tools
Command: npx skills add https://github.com/jikime/jikime-adk --skill jikime-design-tools

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

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 .pen files 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.

Frequently Asked Questions about jikime-design-tools

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I convert Figma designs into React components?▼

To convert Figma designs into React components, this Skill fetches visual assets and style tokens via Figma MCP, enabling seamless export of UI mock-ups into production-ready React components styled with Tailwind CSS.

What is the best way to manage design tokens from Pencil MCP?▼

Managing design tokens from Pencil MCP involves fetching and setting design variables and style guides through a unified interface. This Skill allows you to interact with Pencil MCP directly to extract and apply visual style tags to your workflow.

Can I use this Skill to export .pen files into Tailwind CSS code?▼

Yes, you can use this Skill to export .pen files into Tailwind CSS code. It integrates with Pencil MCP to facilitate design-to-code generation, converting visual design files into production-ready React components with Tailwind styling.

Does this design tool integration require specific MCP dependencies?▼

This design tool integration requires access to Figma MCP and Pencil MCP environments. It acts as a unified interface layer to communicate with these specific MCP servers for fetching designs, managing assets, and generating code.

How do I extract a style guide from a Pencil MCP design file?▼

To extract a style guide from a Pencil MCP design file, you use the Skill to fetch the design variables and style tags. It retrieves the visual tokens directly from the Pencil MCP server for use in your development environment.

Why convert design mock-ups using a unified MCP interface instead of manual export?▼

Using a unified MCP interface instead of manual export streamlines the conversion of visual designs into code by directly fetching design assets, extracting style tokens, and generating React components with Tailwind CSS without leaving your development workflow.