Skip to main content
affpapa.org
RU EN
skill CX Codex

open-pencil-design-editor — Claude Code skill: what it does

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.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add reason-machines/trending-skills --skill open-pencil-design-editor -a claude-code
Open on GitHub

What open-pencil-design-editor 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.

What it helps with

  • 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 for the agent

  • 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

How to install open-pencil-design-editor

1Skills CLI (Vercel)

npx skills add reason-machines/trending-skills --skill open-pencil-design-editor -a claude-code

2Manually: put the files in place

~/.claude/skills/open-pencil-design-editor/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/open-pencil-design-editor/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about open-pencil-design-editor

How do I install open-pencil-design-editor in Claude Code?

Run npx skills add reason-machines/trending-skills --skill open-pencil-design-editor -a claude-code. The installer places the configuration file at ~/.claude/skills/open-pencil-design-editor/SKILL.md.

What does open-pencil-design-editor do?

It gives your AI assistant instructions and CLI patterns to parse, query, and modify .fig files without opening proprietary design software.

What is needed to run the OpenPencil MCP server?

You need Bun installed globally to run @open-pencil/mcp. The server provides 90 tools that let agents read and manipulate design canvases.

Similar skills

Everything for Design →
frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs grill-me Matt Pocock grill-me interviews you about a plan or design to expose gaps and sharpen decisions. Use it before implementation starts. 1,424,476installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs grilling Matt Pocock Stress-test a plan, decision, or idea through structured rounds of questions. Use it when you need to expose assumptions before acting. 979,543installs codebase-design Matt Pocock This skill helps design modules with small interfaces and hidden complexity. Use it when refactoring code, choosing a seam, or making tests easier to write. 850,344installs

From the same set186

app-store-screenshots-generator Builds ad-style iOS app screenshots in Next.js and exports PNG files for App Store device sizes. It also handles localized sets. CX Codex +1 818installs turboquant-pytorch Implements two-stage vector quantization in PyTorch to compress LLM KV cache down to 2–4 bits. Preserves attention scores while cutting memory consumption. CX Codex +1 817installs pgmicro-postgres-sqlite Teaches your coding assistant how to configure pgmicro, an engine translating PostgreSQL queries into SQLite bytecode for in-process execution. CX Codex +1 811installs tribev2-brain-encoding A skill that wires the TRIBE v2 model into your agent so it can predict brain responses to video, audio and text. Built for research work. CX Codex +1 810installs polymarket-copy-trading-bot Configures a TypeScript bot that monitors target Polymarket wallets and mirrors BUY orders on Polygon mainnet. Useful for automated copy trading via CLOB API. CX Codex +1 804installs taiwan-equity-research-coverage Structured database covering 1,735 Taiwan-listed companies across 99 sectors with supply chain maps, wikilink graphs, and financial update utilities. CX Codex +1 801installs codex-session-patcher Finds AI refusals in Claude CLI, Claude and OpenCode session files and replaces them so you can resume the conversation. CX Codex +1 798installs torchcode-pytorch-interview-practice A practice environment for PyTorch coding interviews: 40 problems with auto-grading, gradient checks and timing. Useful before an ML interview loop. CX Codex +1 798installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor