OpenPencil
0OpenPencil provides a command-line interface and a server for `.fig` design files. It is ideal for designers and developers working with Figma files in different modes.
1410Updated Yesterday
design tools
Quick InstallView Source
$ npx skills add https://github.com/open-pencil/skills --skill open-pencilOverview
About This Skill
OpenPencil Skills offers agent capabilities for the open-source OpenPencil design editor through a command-line interface and MCP server. The skill enables programmatic access to .fig design files and the running editor, allowing automation of design file operations. It bridges design tooling with AI agents like Claude Code and Cursor, making it useful for developers integrating design automation into their workflows. The skill requires installation of the OpenPencil CLI and MCP tooling alongside the skill package itself.
How to Use
Install using the command: `$ npx skills add https://github.com/open-pencil/skills --skill open-pencil`
Use Cases
Connect to the OpenPencil editor in app mode
Work with .fig files directly in headless mode
Analyze design files using 106 tools exposed by the MCP server
Perform operations on the document open in the editor
Tags
Setup & Installation
Quick Install
Terminal
$ npx skills add https://github.com/open-pencil/skills --skill open-pencilAlternative Install (Git Clone)
git clone https://github.com/open-pencil/skillsRequirements
- Claude Code or compatible AI agent
Quick Start Guide
1
Install the Skill
Copy the install command above and run it in your terminal.
2
Open Your AI Agent
Launch Claude Code, Cursor, or your preferred AI coding agent.
3
Try It Out
Use the prompt template or examples below to test the skill.
4
Customize
Adapt the skill to your specific use case and workflow.
Usage Examples
Prompt Template
Convert the `.fig` file at [FILE_PATH] to [OUTPUT_FORMAT] using OpenPencil. Ensure the output maintains [DESIGN_ELEMENTS] like layers, colors, and typography. Validate the conversion with [VALIDATION_CHECKS].
Example Output
### OpenPencil Conversion Report **Source File:** `dashboard.fig` **Output Format:** `SVG` **Status:** ✅ Success #### Key Design Elements Preserved: - **Layers:** 12 (including 3 frames, 5 groups, 4 text layers) - **Colors:** 8 (hex values: #2E86AB, #A23B72, #F18F01, etc.) - **Typography:** 3 fonts (Inter, Roboto Mono, Playfair Display) - **Components:** 2 (button, card) #### Output Files: - `dashboard.svg` (1.2MB) - `dashboard_layers.json` (metadata) #### Validation Checks: ✔ Layer hierarchy intact ✔ Color codes match source ✔ Text layers editable ✔ Components linked correctly **Next Steps:** Use `openpencil validate dashboard.svg` to check for any rendering issues.
Find the right skills for your stack
Take a free 3-minute scan and get personalized AI skill recommendations.
Take free scan