openpencil-skill

OpenPencil Skill

English · 简体中文 · 繁體中文 · 日本語 · 한국어 · Français · Español · Deutsch · Português · Русский

LLM skill for designing with OpenPencil — teaches AI agents to use the op CLI, batch design DSL, MCP tools, and design best practices.

Follows the agentskills.io specification.

Prerequisites

Install the op CLI before using this skill:

npm install -g @zseven-w/openpencil

Ensure a running OpenPencil instance (desktop app or web server) for op to connect to.

Installation

Note: Installation differs by platform. Claude Code and Cursor have built-in plugin systems. Codex and OpenCode require manual setup.

Claude Code (Plugin Marketplace)

Register the marketplace, then install the plugin:

/plugin marketplace add zseven-w/openpencil-skill
/plugin install openpencil-skill@openpencil-skill

Cursor

In Cursor Agent chat:

/add-plugin openpencil-skill

Or search for "openpencil" in the plugin marketplace.

Codex

Tell Codex:

Fetch and follow instructions from https://raw.githubusercontent.com/zseven-w/openpencil-skill/main/.codex/INSTALL.md

OpenCode

Tell OpenCode:

Fetch and follow instructions from https://raw.githubusercontent.com/zseven-w/openpencil-skill/main/.opencode/INSTALL.md

Gemini CLI

gemini extensions install https://github.com/zseven-w/openpencil-skill

To update:

gemini extensions update openpencil-skill

Verify Installation

Start a new session and ask to design something with OpenPencil (e.g., "design a landing page using op CLI"). The agent should automatically use the skill to generate PenNode JSON via the op CLI or MCP tools.

What's Included

• op CLI command reference (app control, document ops, nodes, import, layout, pages, variables, codegen)
• Batch Design DSL syntax with full landing page example
• PenNode schema — all node types (frame, rectangle, ellipse, polygon, text, path, image, icon_font, ref, line, group), properties, fills
• 40+ semantic roles with smart defaults
• Design principles — typography, color, spacing, shadows
• Layout engine rules and sizing decisions
• Layered MCP workflow (skeleton → content → refine)
• Codegen pipeline (plan → submit → assemble → clean)
• Import support (SVG, Figma .fig files)
• Common patterns — navbar, hero, cards, forms, footer
• Common mistakes table

License

MIT