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.

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.

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

Register the marketplace, then install the plugin:

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

In Cursor Agent chat:

/add-plugin openpencil-skill

Or search for "openpencil" in the plugin marketplace.

Tell Codex:

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

Tell OpenCode:

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

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

To update:

gemini extensions update openpencil-skill

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.

• op CLI command reference
• Batch Design DSL syntax with full landing page example
• PenNode schema — all node types, 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)
• Common patterns — navbar, hero, cards, forms, footer
• Common mistakes table

MIT