pm-image2pencil

name pm-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 上下游衔接 本 Skill 是 pm-skills 工作流的一环，由 pm-master 总控统一路由。 上游 ： pm-prd-writer （PRD 的界面交互描述）；要可运行 HTML 原型而非设计稿时改用 pm-image2proto 下游 ： pm-review-board （设计稿可作为评审材料） 交接规则：链路模式下，完成后输出一段「交接摘要」（≤10 行：本步结论 + 下一步所需输入），供下一个 Skill 直接使用。