# open-pencil-design-editor

Teaches your coding agent to inspect, modify, and export local .fig design files using OpenPencil CLI commands or an MCP server. Useful for automated layout generation.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 810 installs · ★ 88
- Author: reason-machines
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/reason-machines/trending-skills/tree/HEAD/skills/open-pencil-design-editor/SKILL.md
- Updated: 2026-10-09
- HTML: https://affpapa.org/en/nevibecode/skills/open-pencil-design-editor

## What it does

This skill teaches agents how to parse and alter Figma documents through OpenPencil. It runs entirely offline. Using the headless `open-pencil` binary, the agent queries node hierarchies with XPath expressions and extracts layer attributes. It can export visual assets to SVG or turn frames into JSX components styled with Tailwind v4.

Programmatic edits run through the `eval` command using standard Figma Plugin API methods. The `-w` flag writes back to disk. When the desktop app stays open, CLI commands link to its live canvas via RPC without passing a file path. The engine also inspects design tokens to map color palettes and typography.

Installing the CLI and MCP components globally requires Bun on your system. Building the desktop client locally requires a working Rust compiler.

## Requirements
- Works with: Figma

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill open-pencil-design-editor -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/open-pencil-design-editor/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/open-pencil-design-editor/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill open-pencil-design-editor -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/open-pencil-design-editor/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill open-pencil-design-editor -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/open-pencil-design-editor/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install reason-machines/trending-skills open-pencil-design-editor
```

2. **Manually: put the files in place**
- File: `.github/skills/open-pencil-design-editor/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill open-pencil-design-editor -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/reason-machines/trending-skills --path skills/open-pencil-design-editor
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/open-pencil-design-editor/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill open-pencil-design-editor -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/reason-machines/trending-skills/tree/HEAD/skills/open-pencil-design-editor/SKILL.md

## When to use it
- export `.fig` frames into Tailwind v4 JSX code
- query node trees and filter frames using XPath
- extract color palettes and typography tokens
- modify canvas elements programmatically via Figma Plugin API

## Example prompts
- Inspect the node hierarchy in `design.fig` and find all button text layers
- Convert the hero frame in `landing.fig` into JSX code with Tailwind v4 classes
- Extract color and spacing tokens from `theme.fig` as JSON

## Similar
- [figma-codegen](https://affpapa.org/en/nevibecode/skills/figma-codegen.md) — skill · 1300 installs
- [extract-design](https://affpapa.org/en/nevibecode/skills/extract-design.md) — skill · 2900 installs
- [figma-design-to-code](https://affpapa.org/en/nevibecode/skills/figma-design-to-code.md) — skill · 30 installs
- [design-auditor](https://affpapa.org/en/nevibecode/skills/design-auditor.md) — skill · ★ 89
- [figma-build](https://affpapa.org/en/nevibecode/skills/figma-build.md) — skill · 1300 installs
- [screenshot-to-code](https://affpapa.org/en/nevibecode/skills/screenshot-to-code.md) — skill · 1300 installs

From the same set: [reason-machines/trending-skills](https://affpapa.org/en/nevibecode/by/reason-machines/trending-skills.md) — 186 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md