What is the pencil-design skill?
The pencil-design skill is a SKILL.md in Nisus74/pencil-skill. It teaches your AI coding agent a 7 step design workflow for the Pencil MCP server and its 9 tools, with rules for naming, components, light and dark themes, responsive frames and accessibility.
The pencil-design skill is a SKILL.md in Nisus74/pencil-skill that teaches an AI coding tool to design in pencil.dev. It needs the Pencil MCP server configured and a pencil.dev workspace.
It is an unofficial community plugin. The skill follows a 7 step workflow: detect the host, orient, load guidelines, plan, execute, verify and report. It covers all 9 Pencil MCP tools with worked invocations.
Discipline rules
- Naming: PascalCase with meaningful names.
- Context: a
contextstring on non trivial nodes that annotates behavior, not visual specs. - Components first: scan
reusable: truenodes in the document and in.lib.penimports before drawing. - Themes: variables that carry light and dark values, referenced as
$variableNamewith no raw hex. - Responsive: 390x844, 768x1024 and 1440x900 frames.
- Accessibility: contrast 4.5:1, 44x44 hit targets and focus states.
File architecture and verification
The skill organizes a design file with a Cover frame and section frames such as SourceOfTruth, BuildReady, UXStates, Responsive, Exploration and Archive. Flows use hierarchical names.
It runs a screenshot loop to check the work. Visual work uses at most 8 operations per batch_design call. The agent starts with get_editor_state, and if that errors it stops and tells you to open Pencil.
Who the pencil-design skill is for
Best for
- Agents that design inside Pencil through the Pencil MCP server and need consistent output.
- Design files that must carry light and dark themes through variables instead of raw hex values.
- Teams that want one file organized into source of truth, build ready, states, responsive, exploration and archive sections.
Not for
- Turning a Figma URL into code with design context, a screenshot and validation against the original frame, which the figma-implement-design skill covers.
- Creating, editing and exporting Figma designs from plain prompts through a Figma Desktop plugin, which the Conduit Design MCP server covers.
- Turning Figma frames into React, Flutter, SwiftUI and Unity specs, which the Figma Spec MCP server covers.
How to install Pencil Design Skill: Design Rules for the Pencil MCP
/plugin marketplace add Nisus74/pencil-skill
/plugin install pencil-dev-skill@pencil-dev-skillPrepare Pencil
Configure the Pencil MCP server and have a pencil.dev workspace ready.
Add the marketplace
Run
/plugin marketplace add Nisus74/pencil-skillin Claude Code.Install the plugin
Run
/plugin install pencil-dev-skill@pencil-dev-skill.Folder copy for other tools
Copy the skill folder to
.cursor/skills/for Cursor or~/.codex/skills/for Codex. Claude Code uses~/.claude/skills/or.claude/skills/.
Check that it loaded
Ask your agent to design a screen in Pencil. Expect it to call get_editor_state first and, if that errors, to tell you to open Pencil. A free pencil.dev workspace is enough.
Key features
- Seven step workflowThe agent detects the host, orients, loads guidelines, plans, executes, verifies and reports.
- Nine MCP tools coveredget_editor_state, get_guidelines, batch_get, batch_design, snapshot_layout, get_screenshot, get_variables, export_nodes and export_html come with worked invocations.
- Naming and contextNodes use PascalCase meaningful names, and non trivial nodes carry a context string that annotates behavior.
- Components firstThe agent scans
reusable: truenodes in the document and in.lib.penimports before drawing new ones. - Light and dark themesThe agent calls get_variables first and references
$variableNametokens instead of raw hex. - Responsive framesDesigns are checked at 390x844, 768x1024 and 1440x900 with max widths of 358, 704 and 1200.
- Accessibility checksFive checks cover 4.5:1 contrast, 44x44 hit targets, color not being the only signal, names that map to roles and focus states.
- File architectureA Cover frame and section frames keep the file organized, with hierarchical flow naming.
- Screenshot loopThe agent verifies each step visually, with at most 8 operations per batch_design call for visual work.
- Worked examplesThe skill ships 15 worked examples showing real MCP tool sequences from scratch.
Frequently asked questions
What is the pencil-design skill?
It is a SKILL.md in Nisus74/pencil-skill, an unofficial community plugin. It teaches your AI coding agent a 7 step design workflow for the Pencil MCP server, plus discipline rules for naming, components, themes, responsive frames and accessibility checks. It targets pencil.dev .pen design files.
How do I install the pencil-design skill?
In Claude Code run /plugin marketplace add Nisus74/pencil-skill, then /plugin install pencil-dev-skill@pencil-dev-skill. For other tools copy the skill folder into the tool's skills directory, such as .cursor/skills/ for Cursor or ~/.codex/skills/ for Codex. You also need the Pencil MCP server configured.
What does the skill need before it can design?
It needs the Pencil MCP server configured and a pencil.dev workspace. The agent begins with get_editor_state to detect the host. If that call errors, the skill tells the agent to stop and tell you to open Pencil. A free pencil.dev workspace is enough.
Which Pencil MCP tools does it cover?
All nine: get_editor_state, get_guidelines, batch_get, batch_design, snapshot_layout, get_screenshot, get_variables, export_nodes and export_html. Each tool comes with worked invocations, and the skill ships 15 worked examples. The agent calls get_editor_state first to detect the host, and get_variables before any token work.
How does the skill handle light and dark themes?
The agent calls get_variables first and then references variables with the $variableName form instead of raw hex values. Every design carries both light and dark themes, so colors come from the variables defined in the file rather than from literal color codes.
Which accessibility checks does it apply?
Five checks: text contrast of 4.5:1, hit targets of 44x44, color not used as the only signal, names that map to roles, and focus states. For color, errors get an icon and red, and success gets an icon and green.
How does it keep a design file organized?
It adds a Cover frame and section frames such as SourceOfTruth, BuildReady, UXStates, Responsive, Exploration and Archive. Flows use hierarchical names, and nodes use PascalCase. Non trivial nodes carry a context string that annotates behavior, not visual specs. The agent also scans reusable components before drawing new ones.