pen-design
15
总安装量
10
周安装量
#22786
全站排名
安装命令
npx skills add https://github.com/altshiftstudio/skills --skill pen-design
Agent 安装分布
claude-code
9
opencode
8
antigravity
7
codex
7
gemini-cli
7
cursor
7
Skill 文档
Pencil Design
Create and manipulate .pen design files using Pencil MCP tools.
Workflow
1. Orientation
get_editor_state â Check active file and selection
get_guidelines â Load topic-specific rules (landing-page, design-system, table, code, tailwind)
batch_get â Read file structure or find components
2. Design (if creating from scratch)
get_style_guide_tags â Browse available visual styles
get_style_guide â Load style guide for inspiration
open_document â Create new file if needed
3. Build
batch_design â Insert, update, copy, replace, move, delete nodes (max 25 ops/call)
get_screenshot â Verify visual output after changes
snapshot_layout â Debug layout issues or find clipping problems
4. Refine
get_variables â Read design tokens and themes
set_variables â Update tokens for consistent styling
replace_all_matching_properties â Bulk property updates
Quick Reference
Element Types
| Type | Purpose | Key Properties |
|---|---|---|
frame |
Container/layout | layout, gap, padding, children, reusable |
text |
Typography | content, fontFamily, fontSize, fontWeight |
rectangle |
Shape | width, height, fill, cornerRadius |
ref |
Component instance | ref (source ID), descendants (overrides) |
icon_font |
Icon | iconFontName, iconFontFamily (“lucide”) |
path |
Vector | geometry (SVG path data) |
Layout
| Property | Values |
|---|---|
layout |
"none" (absolute), "horizontal", "vertical" |
justifyContent |
start, center, end, space_between |
alignItems |
start, center, end, stretch |
width/height |
360, "fill_container", "fill_container(360)", "fit_content" |
padding |
16, [12, 24], [8, 16, 8, 16] |
Tokens
Prefix: $--
| Category | Examples |
|---|---|
| Colors | $--primary, $--foreground, $--background, $--border |
| Semantic | $--color-success, $--color-warning, $--color-error |
| Typography | $--font-primary, $--font-secondary |
| Radii | $--radius-none, $--radius-m, $--radius-pill |
Operations (batch_design)
Operations use JavaScript-like syntax. Every Insert/Copy/Replace needs a binding.
| Op | Syntax | Use |
|---|---|---|
| I | btn=I(parent, {type: "frame", ...}) |
Insert node |
| U | U(path, {content: "New"}) |
Update properties |
| C | copy=C(sourceId, parent, {...}) |
Copy node |
| R | new=R(path, {type: "text", ...}) |
Replace node |
| M | M(nodeId, newParent, index?) |
Move node |
| D | D(nodeId) |
Delete node |
| G | G(nodeId, "stock", "office") |
Apply image fill |
Component Instances
// Insert instance and override text
card=I(container, {type: "ref", ref: "CardComp"})
U(card+"/titleText", {content: "New Title"})
// Replace slot content
newContent=R(card+"/slot", {type: "text", content: "Custom"})
Critical Rules
- IDs auto-generate â never set
idin node data - Bindings required â every I/C/R must have
name=... - Max 25 ops â split larger designs across calls
- Copy descendants â use
descendantsproperty, not separate U() calls - Verify visually â call
get_screenshotafter modifications
Reference Files
| File | When to Read |
|---|---|
| mcp-operations.md | Detailed operation syntax, examples, and edge cases |
| patterns.md | Element creation examples, styling patterns, theming |
| schema.json | Authoritative property definitions for validation |