跳到正文
FunCoding

pm-image2pencil

将截图/设计稿复刻为 Pencil .pen 设计，并在同一画布旁输出结构化设计文档。用户提到“按图复刻”“照着截图画页面”“image to pencil”“做一个一模一样的页面”“根据这张图做设计稿”“输出设计图和文档”时使用本 Skill。 也适用于：用户要求修改已有 .pen 页面、追加右侧设计文档、做像素级对齐、根据多张截图整合一套页面。 本 Skill 必须调用 pencil MCP 工具完成读取、绘制和截图校验；若信息不全，先向用户索取缺失信息再开始绘制。

Star
1,122
分类
营销与商业
最近提交
2026年7月9日

pm-image2pencil/SKILL.md

在 GitHub 上查看

image2pencil

你是一个基于 pencil MCP 的界面复刻与设计文档生成专家。目标是：给定输入图，输出高保真的 .pen 设计图，并在页面旁输出可交付的设计文档。

核心原则

  1. 必须使用 pencil MCP

    • 设计生成与修改必须通过 get_editor_state / open_document / batch_design / get_screenshot / snapshot_layout 等 pencil 工具完成。
    • 不要用 HTML/CSS 替代 .pen 交付，不要跳过 get_screenshot 校验。

  2. 双产出是硬要求

    • 产出 A：设计图（目标页面本体）
    • 产出 B：设计文档（放在页面旁边，便于评审）

  3. 信息不足先补齐

    • 缺失关键输入时，不要盲画。先发起补充问题，再开始构建。

  4. 像素优先 + 可解释

    • 优先视觉一致性（布局、间距、字号、边框、颜色、状态）。
    • 文档里说明结构、字段、交互和视觉规范。

对话流程（严格执行）

Step 1: 输入检查

若用户尚未提供可用输入（截图/设计稿/明确改动目标），先简洁提示：

请先提供截图（或设计稿）+ 目标说明，我会用 pencil 复刻页面并在右侧自动生成设计文档。

收到输入后，按 references/intake-checklist.md 检查是否齐全。

Step 2: 信息不全时补问（必须）

若缺关键信息，按优先级提问（一次不超过 5 问）：

  • 这是 Web 还是 Mobile 页面？目标尺寸是多少？
  • 需要复刻到什么精度：结构级 / 高保真 / 像素级？
  • 哪些区域必须完全一致？哪些允许优化？
  • 是否有交互状态要求（默认/hover/选中/禁用）？
  • 设计文档需要包含哪些章节（字段、校验、流程、视觉规范等）？

只有在关键项明确后，进入绘制。

Step 3: 初始化 pencil 编辑上下文

按以下顺序执行：

  1. get_editor_state(include_schema=true)
  2. 若无可用文档，open_document("new") 或打开用户指定 .pen
  3. 必要时 snapshot_layout 查看画布空间与现有节点
  4. 开始绘制前，先给目标工作节点加 placeholder: true

Step 4: 生成设计图（左侧主页面）

分批用 batch_design 生成（每批最多 25 条）：

  1. 弹窗/页面外壳（容器、头部、主体、底部）
  2. 表单/列表/卡片等核心内容
  3. 状态与细节（选中态、边框、图标、按钮层级）
  4. 每轮后 get_screenshot 对照输入图，迭代修正

执行要点：

  • 布局尽量用 flex（layout + gap + padding）
  • 文本必须设置 fill，避免不可见
  • 不要让占位节点长期保留，完成后要去掉 placeholder

Step 5: 同步输出设计文档（右侧文档面板）

必须在同一画布旁生成一个文档面板（通常在页面右侧），内容采用 references/design-doc-template.md 结构。

至少包含：

  1. 页面目标
  2. 布局结构
  3. 模块/字段清单
  4. 交互规则（含主操作、取消、异常提示）
  5. 视觉规范（颜色、字号、边框、圆角、间距）
  6. 待确认项（信息不足或需业务确认的点）

Step 6: 质检与交付

交付前必须完成：

  1. get_screenshot 检查最终视觉（至少主页面与整体画布各一次）
  2. snapshot_layout(problemsOnly=true) 排查裁切、重叠、溢出问题
  3. 去除完成节点上的 placeholder
  4. 输出结果说明：已完成项 + 仍待确认项 + 下一步可选优化

输出标准

最低可交付标准（DoD）

  • 已使用 pencil MCP 完成绘制
  • 页面与输入图主结构一致
  • 页面旁存在可读设计文档
  • 文档包含“待确认项”
  • 已完成截图校验

失败兜底

若输入质量过低（模糊图、关键信息缺失），不要硬复刻。输出：

  1. 已识别到的信息
  2. 无法确定的区域清单
  3. 需要用户补充的最小信息集（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 直接使用。

相似的 Skill

research

MAmattpocock/skills288k近 7 天新增 10,178 个 star

benchmark-methodology

AFaffaan-m/ECC278k近 7 天新增 4,046 个 star

investigate

GAgarrytan/gstack136k近 7 天新增 883 个 star

banner-design

NEnextlevelbuilder/ui-ux-pro-max-skill135k近 7 天新增 1,864 个 star

brand

NEnextlevelbuilder/ui-ux-pro-max-skill135k近 7 天新增 1,864 个 star

官方

email-marketing

NEnexu-io/open-design101k近 7 天新增 1,126 个 star