Paper Design — MCP Bridge Skill

Paper is a professional design tool (like Figma) that runs locally on macOS. This skill connects to Paper's MCP server via HTTP, giving you full design capabilities.

Prerequisite: Paper must be open with a design file loaded. If Paper is not running, tell the user to open it first.

How to Use Paper

All Paper operations go through the paper.sh script in this skill's directory:

CODEBLOCK0

Important: Always quote JSON arguments with single quotes to prevent shell expansion.

Quick Start

CODEBLOCK1

Tool Reference

Reading the Canvas

Command	Purpose
INLINECODE1	File name, page, artboards, fonts in use
INLINECODE2

Currently selected nodes on canvas | | paper.sh get_node_info '{"nodeId":"ID"}' | Size, visibility, parent, children, text | | paper.sh get_children '{"nodeId":"ID"}' | Direct children with IDs and types | | paper.sh get_tree_summary '{"nodeId":"ID"}' | Compact hierarchy overview (cheap) | | paper.sh get_tree_summary '{"nodeId":"ID","depth":5}' | Deeper hierarchy | | paper.sh get_computed_styles '{"nodeIds":["ID1","ID2"]}' | CSS styles for nodes | | paper.sh get_jsx '{"nodeId":"ID"}' | JSX code (for dev handoff) | | paper.sh get_font_family_info '{"familyNames":["Inter","DM Sans"]}' | Font availability + weights |

Visual Review

CODEBLOCK2

Creating Designs

CODEBLOCK3

Writing HTML into Designs

CODEBLOCK4

HTML Rules (critical):

- Always use inline styles (style="...")
Use display: flex for ALL layouts — no grid, no inline, no tables
Use padding and gap for spacing — NO margins
No emojis as icons — use SVG paths
Set layer-name="Semantic Name" on key elements
Google Fonts available via INLINECODE13
Font sizes MUST use px units
Use border-box sizing assumptions

Modifying Existing Designs

CODEBLOCK5

Finishing Up

CODEBLOCK6

Design Workflow (Mandatory)

1. Start — get_basic_info to see what's on the canvas
Check fonts — get_font_family_info before writing any typography
Design brief — Before writing HTML, decide: color palette (5-6 hex), type choices, spacing rhythm, visual direction
Build incrementally — ONE visual group per write_html call (header, row, button group — not an entire screen)
Review every 2-3 changes — get_screenshot → image → critique spacing, typography, contrast, alignment, clipping
Fix issues before moving on
Finish — finish_working_on_nodes when done

Review Checkpoints (every 2-3 modifications)

After a screenshot, evaluate:

- Spacing — Uneven gaps? Cramped? Clear rhythm?
Typography — Readable? Strong hierarchy?
Contrast — Low contrast text? Elements blending?
Alignment — Consistent vertical/horizontal lanes?
Clipping — Content cut off at edges?

Default Artboard Sizes

Device	Width	Height
Mobile (iPhone)	390px	844px
Tablet (iPad)

768px | 1024px | | Desktop | 1440px | 900px |

Troubleshooting

- "Paper is not running" — Open the Paper app on macOS first
"Failed to initialize MCP session" — Paper needs a design file open (not just the app)
Empty response — The node ID may be wrong; use get_basic_info to find valid IDs
Session expired — The script auto-retries with a fresh session; if persistent, delete INLINECODE23

技能名称: paper-design
详细描述:

Paper Design — MCP 桥接技能

Paper 是一款在 macOS 上本地运行的专业设计工具（类似 Figma）。本技能通过 HTTP 连接到 Paper 的 MCP 服务器，为您提供完整的设计能力。

前置条件： Paper 必须已打开并加载了设计文件。如果 Paper 未运行，请告知用户先打开它。

如何使用 Paper

所有 Paper 操作都通过本技能目录中的 paper.sh 脚本执行：

bash
exec {baseDir}/paper.sh <工具名称>

重要提示： 始终使用单引号包裹 JSON 参数，以防止 shell 展开。

快速开始

bash

1. 查看画布内容

exec {baseDir}/paper.sh getbasicinfo

2. 创建新的移动端画板

exec {baseDir}/paper.sh create_artboard {name:首页,styles:{width:390px,height:844px,display:flex,flexDirection:column,backgroundColor:#FAFAFA}}

3. 添加内容（每次一个视觉组）

exec {baseDir}/paper.sh write_html {html:

首页

,targetNodeId:画板ID,mode:insert-children}

4. 截图查看效果

exec {baseDir}/paper.sh get_screenshot {nodeId:画板ID}

→ 保存到 /tmp/paper-screenshots/screenshot-时间戳.jpg

5. 查看截图

image /tmp/paper-screenshots/screenshot-时间戳.jpg

6. 完成后，释放工作指示器

exec {baseDir}/paper.sh finishworkingon_nodes

工具参考

读取画布

命令	用途
paper.sh getbasicinfo	文件名、页面、画板、正在使用的字体
paper.sh get_selection

画布上当前选中的节点 | | paper.sh getnodeinfo {nodeId:ID} | 尺寸、可见性、父节点、子节点、文本 | | paper.sh get_children {nodeId:ID} | 直接子节点及其 ID 和类型 | | paper.sh gettreesummary {nodeId:ID} | 紧凑的层级概览（低成本） | | paper.sh gettreesummary {nodeId:ID,depth:5} | 更深的层级 | | paper.sh getcomputedstyles {nodeIds:[ID1,ID2]} | 节点的 CSS 样式 | | paper.sh get_jsx {nodeId:ID} | JSX 代码（用于开发交接） | | paper.sh getfontfamily_info {familyNames:[Inter,DM Sans]} | 字体可用性及字重 |

视觉审查

bash

截图画板或节点

exec {baseDir}/paper.sh get_screenshot {nodeId:画板ID}

更高分辨率（用于阅读小字）

exec {baseDir}/paper.sh get_screenshot {nodeId:画板ID,scale:2}

保存到指定路径

exec {baseDir}/paper.sh get_screenshot {nodeId:画板ID} --save /tmp/my-review.jpg

然后使用图片工具查看截图

image /tmp/paper-screenshots/screenshot-时间戳.jpg

创建设计

bash

创建画板（移动端）

exec {baseDir}/paper.sh create_artboard {name:屏幕名称,styles:{width:390px,height:844px,display:flex,flexDirection:column,backgroundColor:#FFFFFF}}

创建画板（桌面端）

exec {baseDir}/paper.sh create_artboard {name:仪表盘,styles:{width:1440px,height:900px,display:flex,flexDirection:column,backgroundColor:#F5F5F5}}

创建关联画板（放置在现有画板旁边）

exec {baseDir}/paper.sh create_artboard {name:屏幕V2,relatedNodeId:现有ID,styles:{width:390px,height:844px}}

将 HTML 写入设计

bash

将元素添加为节点的子元素

exec {baseDir}/paper.sh write_html {html:

内容

,targetNodeId:父节点ID,mode:insert-children}

替换现有节点

exec {baseDir}/paper.sh write_html {html:

新内容

,targetNodeId:旧节点ID,mode:replace}

HTML 规则（关键）：

- 始终使用内联样式（style=...）
所有布局使用 display: flex — 不使用 grid、inline 或 table
使用 padding 和 gap 进行间距控制 — 不使用 margin
不使用 emoji 作为图标 — 使用 SVG 路径
在关键元素上设置 layer-name=语义化名称
可通过 font-family: 字体名称使用 Google Fonts
字号必须使用 px 单位
使用 border-box 盒模型假设

修改现有设计

bash

更新节点样式

exec {baseDir}/paper.sh update_styles {updates:[{nodeIds:[ID1,ID2],styles:{backgroundColor:#FF0000,padding:20px}}]}

更改文本内容

exec {baseDir}/paper.sh settextcontent {updates:[{nodeId:文本ID,textContent:此处为新文本}]}

复制节点（对重复元素高效）

exec {baseDir}/paper.sh duplicate_nodes {nodes:[{id:源ID}]}

指定父节点：

exec {baseDir}/paper.sh duplicate_nodes {nodes:[{id:源ID,parentId:目标父节点}]}

删除节点

exec {baseDir}/paper.sh delete_nodes {nodeIds:[ID1,ID2]}

重命名图层

exec {baseDir}/paper.sh rename_nodes {updates:[{nodeId:ID,name:头部}]}

完成操作

bash

完成画板操作后务必调用 — 释放工作指示器

exec {baseDir}/paper.sh finishworkingon_nodes

设计工作流程（必须遵守）

1. 开始 — 使用 getbasicinfo 查看画布内容
检查字体 — 在编写任何排版前使用 getfontfamilyinfo
设计简报 — 在编写 HTML 前确定：配色方案（5-6 个十六进制色）、字体选择、间距节奏、视觉方向
逐步构建 — 每次 writehtml 调用只处理一个视觉组（头部、行、按钮组 — 而非整个屏幕）
每 2-3 次更改后审查 — getscreenshot → image → 评估间距、排版、对比度、对齐、裁剪
修复问题后再继续
完成 — 完成后调用 finishworkingonnodes

审查检查点（每 2-3 次修改后）

截图后，评估：

- 间距 — 间隙不均匀？过于拥挤？节奏清晰？
排版 — 可读性？层级结构清晰？
对比度 — 文字对比度低？元素融合在一起？
对齐 — 垂直/水平方向一致？
裁剪 — 内容在边缘被截断？

默认画板尺寸

设备	宽度	高度
移动端（iPhone）	390px	844px
平板（iPad）

768px | 1024px | | 桌面端 | 1440px | 900px |

故障排除

- Paper 未运行 — 请先在 macOS 上打开 Paper 应用
MCP 会话初始化失败 — Paper 需要打开一个设计文件（不仅仅是应用本身）
空响应 — 节点 ID 可能错误；使用 getbasicinfo 查找有效 ID
会话过期 — 脚本会自动重试并创建新会话；如果持续出现，请删除 /tmp/paper-mcp-session

paper-designPaper设计

paper-design

Paper Design — MCP Bridge Skill

How to Use Paper

Quick Start

Tool Reference

Reading the Canvas

Visual Review

Creating Designs

Writing HTML into Designs

Modifying Existing Designs

Finishing Up

Design Workflow (Mandatory)

Review Checkpoints (every 2-3 modifications)

Default Artboard Sizes

Troubleshooting

Paper Design — MCP 桥接技能

如何使用 Paper

快速开始

1. 查看画布内容

2. 创建新的移动端画板

3. 添加内容（每次一个视觉组）

4. 截图查看效果

→ 保存到 /tmp/paper-screenshots/screenshot-时间戳.jpg

5. 查看截图

6. 完成后，释放工作指示器

工具参考

读取画布

视觉审查

截图画板或节点

更高分辨率（用于阅读小字）

保存到指定路径

然后使用图片工具查看截图

创建设计

创建画板（移动端）

创建画板（桌面端）

创建关联画板（放置在现有画板旁边）

将 HTML 写入设计

将元素添加为节点的子元素

替换现有节点

修改现有设计

更新节点样式

更改文本内容

复制节点（对重复元素高效）

指定父节点：

删除节点

重命名图层

完成操作

完成画板操作后务必调用 — 释放工作指示器

设计工作流程（必须遵守）

审查检查点（每 2-3 次修改后）

默认画板尺寸

故障排除

标签

通过对话安装

方式一：安装 SkillHub 和技能

方式二：设置 SkillHub 为优先技能安装源

通过命令行安装

下载

相关推荐

self-improvement

self-improvement

self-improvement

self-improvement