Back to Details

pen-design

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Pencil Design

Pencil 设计

Create and manipulate 
.pen
design files using Pencil MCP tools.
使用Pencil MCP工具创建和操作 
.pen
设计文件。

Workflow

工作流程

1. Orientation

1. 初始准备

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
get_editor_state     → 检查活动文件和选中内容
get_guidelines       → 加载特定主题规则（登录页、设计系统、表格、代码、tailwind）
batch_get            → 读取文件结构或查找组件

2. Design (if creating from scratch)

2. 设计（从零开始创建时）

get_style_guide_tags → Browse available visual styles
get_style_guide      → Load style guide for inspiration
open_document        → Create new file if needed
get_style_guide_tags → 浏览可用的视觉样式
get_style_guide      → 加载样式指南获取灵感
open_document        → 如有需要创建新文件

3. Build

3. 构建

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
batch_design         → 插入、更新、复制、替换、移动、删除节点（每次调用最多25个操作）
get_screenshot       → 修改后验证视觉输出
snapshot_layout      → 调试布局问题或查找裁剪问题

4. Refine

4. 优化

get_variables        → Read design tokens and themes
set_variables        → Update tokens for consistent styling
replace_all_matching_properties → Bulk property updates
get_variables        → 读取设计令牌和主题
set_variables        → 更新令牌以保持样式一致
replace_all_matching_properties → 批量更新属性

Quick Reference

快速参考

Element Types

元素类型

TypePurposeKey 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)
类型用途关键属性
frame
容器/布局
layout
, 
gap
, 
padding
, 
children
, 
reusable
text
排版
content
, 
fontFamily
, 
fontSize
, 
fontWeight
rectangle
形状
width
, 
height
, 
fill
, 
cornerRadius
ref
组件实例
ref
（源ID）, 
descendants
（覆盖项）
icon_font
图标
iconFontName
, 
iconFontFamily
（"lucide"）
path
矢量图形
geometry
（SVG路径数据）

Layout

布局

PropertyValues
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]
属性取值
layout
"none"
（绝对定位）, 
"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: 
$--
CategoryExamples
Colors
$--primary
, 
$--foreground
, 
$--background
, 
$--border
Semantic
$--color-success
, 
$--color-warning
, 
$--color-error
Typography
$--font-primary
, 
$--font-secondary
Radii
$--radius-none
, 
$--radius-m
, 
$--radius-pill
前缀: 
$--
类别示例
颜色
$--primary
, 
$--foreground
, 
$--background
, 
$--border
语义化
$--color-success
, 
$--color-warning
, 
$--color-error
排版
$--font-primary
, 
$--font-secondary
圆角
$--radius-none
, 
$--radius-m
, 
$--radius-pill

Operations (batch_design)

操作（batch_design）

Operations use JavaScript-like syntax. Every Insert/Copy/Replace needs a binding.
OpSyntaxUse
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
操作采用类JavaScript语法。每个插入/复制/替换操作都需要绑定。
操作语法用途
I
btn=I(parent, {type: "frame", ...})
插入节点
U
U(path, {content: "New"})
更新属性
C
copy=C(sourceId, parent, {...})
复制节点
R
new=R(path, {type: "text", ...})
替换节点
M
M(nodeId, newParent, index?)
移动节点
D
D(nodeId)
删除节点
G
G(nodeId, "stock", "office")
应用图片填充

Component Instances

组件实例

javascript
// 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"})
javascript
// 插入实例并覆盖文本
card=I(container, {type: "ref", ref: "CardComp"})
U(card+"/titleText", {content: "New Title"})

// 替换插槽内容
newContent=R(card+"/slot", {type: "text", content: "Custom"})

Critical Rules

重要规则

  1. IDs auto-generate — never set 
    id
    in node data
  2. Bindings required — every I/C/R must have 
    name=...
  3. Max 25 ops — split larger designs across calls
  4. Copy descendants — use 
    descendants
    property, not separate U() calls
  5. Verify visually — call 
    get_screenshot
    after modifications
  1. ID自动生成 — 切勿在节点数据中设置
    id
  2. 必须绑定 — 每个I/C/R操作都必须有
    name=...
  3. 最多25个操作 — 大型设计需拆分到多个调用中
  4. 复制子节点 — 使用
    descendants
    属性，而非单独的U()调用
  5. 视觉验证 — 修改后调用
    get_screenshot

Reference Files

参考文件

FileWhen to Read
mcp-operations.mdDetailed operation syntax, examples, and edge cases
patterns.mdElement creation examples, styling patterns, theming
schema.jsonAuthoritative property definitions for validation
文件阅读场景
mcp-operations.md详细的操作语法、示例和边缘情况
patterns.md元素创建示例、样式模式、主题设置
schema.json用于验证的权威属性定义