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
id in node data
- Bindings required — every I/C/R must have
name=...
- Max 25 ops — split larger designs across calls
- Copy descendants — use
descendants property, not separate U() calls
- Verify visually — call
get_screenshot after 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 |
1---2name: pen-design3description: Design and manipulate Pencil (.pen) files using MCP tools. Use this skill when (1) creating UI screens, dashboards, or layouts in .pen format, (2) reading or modifying existing .pen designs, (3) working with design system components, (4) generating code from .pen files, or (5) understanding PEN file structure, tokens, or schema.4---56# Pencil Design78Create and manipulate `.pen` design files using Pencil MCP tools.910## Workflow1112### 1. Orientation1314```15get_editor_state → Check active file and selection16get_guidelines → Load topic-specific rules (landing-page, design-system, table, code, tailwind)17batch_get → Read file structure or find components18```1920### 2. Design (if creating from scratch)2122```23get_style_guide_tags → Browse available visual styles24get_style_guide → Load style guide for inspiration25open_document → Create new file if needed26```2728### 3. Build2930```31batch_design → Insert, update, copy, replace, move, delete nodes (max 25 ops/call)32get_screenshot → Verify visual output after changes33snapshot_layout → Debug layout issues or find clipping problems34```3536### 4. Refine3738```39get_variables → Read design tokens and themes40set_variables → Update tokens for consistent styling41replace_all_matching_properties → Bulk property updates42```4344---4546## Quick Reference4748### Element Types4950| Type | Purpose | Key Properties |51|------|---------|----------------|52| `frame` | Container/layout | `layout`, `gap`, `padding`, `children`, `reusable` |53| `text` | Typography | `content`, `fontFamily`, `fontSize`, `fontWeight` |54| `rectangle` | Shape | `width`, `height`, `fill`, `cornerRadius` |55| `ref` | Component instance | `ref` (source ID), `descendants` (overrides) |56| `icon_font` | Icon | `iconFontName`, `iconFontFamily` ("lucide") |57| `path` | Vector | `geometry` (SVG path data) |5859### Layout6061| Property | Values |62|----------|--------|63| `layout` | `"none"` (absolute), `"horizontal"`, `"vertical"` |64| `justifyContent` | `start`, `center`, `end`, `space_between` |65| `alignItems` | `start`, `center`, `end`, `stretch` |66| `width`/`height` | `360`, `"fill_container"`, `"fill_container(360)"`, `"fit_content"` |67| `padding` | `16`, `[12, 24]`, `[8, 16, 8, 16]` |6869### Tokens7071Prefix: `$--`7273| Category | Examples |74|----------|----------|75| Colors | `$--primary`, `$--foreground`, `$--background`, `$--border` |76| Semantic | `$--color-success`, `$--color-warning`, `$--color-error` |77| Typography | `$--font-primary`, `$--font-secondary` |78| Radii | `$--radius-none`, `$--radius-m`, `$--radius-pill` |7980---8182## Operations (batch_design)8384Operations use JavaScript-like syntax. Every Insert/Copy/Replace needs a binding.8586| Op | Syntax | Use |87|----|--------|-----|88| **I** | `btn=I(parent, {type: "frame", ...})` | Insert node |89| **U** | `U(path, {content: "New"})` | Update properties |90| **C** | `copy=C(sourceId, parent, {...})` | Copy node |91| **R** | `new=R(path, {type: "text", ...})` | Replace node |92| **M** | `M(nodeId, newParent, index?)` | Move node |93| **D** | `D(nodeId)` | Delete node |94| **G** | `G(nodeId, "stock", "office")` | Apply image fill |9596### Component Instances9798```javascript99// Insert instance and override text100card=I(container, {type: "ref", ref: "CardComp"})101U(card+"/titleText", {content: "New Title"})102103// Replace slot content104newContent=R(card+"/slot", {type: "text", content: "Custom"})105```106107### Critical Rules1081091. **IDs auto-generate** — never set `id` in node data1102. **Bindings required** — every I/C/R must have `name=...`1113. **Max 25 ops** — split larger designs across calls1124. **Copy descendants** — use `descendants` property, not separate U() calls1135. **Verify visually** — call `get_screenshot` after modifications114115---116117## Reference Files118119| File | When to Read |120|------|--------------|121| [mcp-operations.md](references/mcp-operations.md) | Detailed operation syntax, examples, and edge cases |122| [patterns.md](references/patterns.md) | Element creation examples, styling patterns, theming |123| [schema.json](references/schema.json) | Authoritative property definitions for validation |
altshiftstudio