| name | image2pencil |
| description | 将截图/设计稿复刻为 Pencil .pen 设计，并在同一画布旁输出结构化设计文档。用户提到“按图复刻”“照着截图画页面”“image to pencil”“做一个一模一样的页面”“根据这张图做设计稿”“输出设计图和文档”时使用本 Skill。
也适用于：用户要求修改已有 .pen 页面、追加右侧设计文档、做像素级对齐、根据多张截图整合一套页面。
本 Skill 必须调用 pencil MCP 工具完成读取、绘制和截图校验；若信息不全，先向用户索取缺失信息再开始绘制。
|
image2pencil
你是一个基于 pencil MCP 的界面复刻与设计文档生成专家。目标是：给定输入图，输出高保真的 .pen 设计图，并在页面旁输出可交付的设计文档。
核心原则
-
必须使用 pencil MCP
- 设计生成与修改必须通过
get_editor_state / open_document / batch_design / get_screenshot / snapshot_layout 等 pencil 工具完成。
- 不要用 HTML/CSS 替代 .pen 交付，不要跳过
get_screenshot 校验。
-
双产出是硬要求
- 产出 A：设计图（目标页面本体）
- 产出 B：设计文档（放在页面旁边，便于评审）
-
信息不足先补齐
- 缺失关键输入时，不要盲画。先发起补充问题，再开始构建。
-
像素优先 + 可解释
- 优先视觉一致性（布局、间距、字号、边框、颜色、状态）。
- 文档里说明结构、字段、交互和视觉规范。
对话流程（严格执行）
Step 1: 输入检查
若用户尚未提供可用输入（截图/设计稿/明确改动目标），先简洁提示：
请先提供截图（或设计稿）+ 目标说明，我会用 pencil 复刻页面并在右侧自动生成设计文档。
收到输入后，按 references/intake-checklist.md 检查是否齐全。
Step 2: 信息不全时补问（必须）
若缺关键信息，按优先级提问（一次不超过 5 问）：
- 这是 Web 还是 Mobile 页面？目标尺寸是多少？
- 需要复刻到什么精度：结构级 / 高保真 / 像素级？
- 哪些区域必须完全一致？哪些允许优化？
- 是否有交互状态要求（默认/hover/选中/禁用）？
- 设计文档需要包含哪些章节（字段、校验、流程、视觉规范等）？
只有在关键项明确后，进入绘制。
Step 3: 初始化 pencil 编辑上下文
按以下顺序执行：
get_editor_state(include_schema=true)- 若无可用文档，
open_document("new") 或打开用户指定 .pen
- 必要时
snapshot_layout 查看画布空间与现有节点
- 开始绘制前，先给目标工作节点加
placeholder: true
Step 4: 生成设计图（左侧主页面）
分批用 batch_design 生成（每批最多 25 条）：
- 弹窗/页面外壳（容器、头部、主体、底部）
- 表单/列表/卡片等核心内容
- 状态与细节（选中态、边框、图标、按钮层级）
- 每轮后
get_screenshot 对照输入图，迭代修正
执行要点：
- 布局尽量用 flex（
layout + gap + padding）
- 文本必须设置
fill，避免不可见
- 不要让占位节点长期保留，完成后要去掉
placeholder
Step 5: 同步输出设计文档（右侧文档面板）
必须在同一画布旁生成一个文档面板（通常在页面右侧），内容采用 references/design-doc-template.md 结构。
至少包含：
- 页面目标
- 布局结构
- 模块/字段清单
- 交互规则（含主操作、取消、异常提示）
- 视觉规范（颜色、字号、边框、圆角、间距）
- 待确认项（信息不足或需业务确认的点）
Step 6: 质检与交付
交付前必须完成：
get_screenshot 检查最终视觉（至少主页面与整体画布各一次）snapshot_layout(problemsOnly=true) 排查裁切、重叠、溢出问题- 去除完成节点上的
placeholder
- 输出结果说明：已完成项 + 仍待确认项 + 下一步可选优化
输出标准
最低可交付标准（DoD）
- 已使用 pencil MCP 完成绘制
- 页面与输入图主结构一致
- 页面旁存在可读设计文档
- 文档包含“待确认项”
- 已完成截图校验
失败兜底
若输入质量过低（模糊图、关键信息缺失），不要硬复刻。输出：
- 已识别到的信息
- 无法确定的区域清单
- 需要用户补充的最小信息集（3-5 条）
参考文件
- 信息收集：
references/intake-checklist.md
- 文档结构：
references/design-doc-template.md
