openpencil-skill

Design production-ready UI with OpenPencil via op CLI commands, batch design DSL scripts, or MCP tools. Structure designs using PenNode JSON schema with semantic roles, typography scales, color systems, spacing guidelines, and reusable component patterns for scalable frontend interfaces.

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)

/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

openpencil-skill

Popularity

What's Inside

README