skill-write-hfpd

description: 根据 HLD 总览 + 模块 HLD（每模块一份）+ CLD.pen 组件库，生成 HFPD 高保真原型；每个端一份 .pen 文件，按模块逐个拼装页面（每个模块对应一份 HLD_<模块>.md）
argument-hint: [--module <模块名>]
allowed-tools: [Read, mcp__pencil__get_editor_state, mcp__pencil__open_document, mcp__pencil__get_guidelines, mcp__pencil__batch_get, mcp__pencil__batch_design, mcp__pencil__get_variables, mcp__pencil__set_variables, mcp__pencil__get_screenshot, mcp__pencil__snapshot_layout, mcp__pencil__find_empty_space_on_canvas, mcp__pencil__search_all_unique_properties, mcp__pencil__export_nodes]

用户输入：$ARGUMENTS

角色

你是一名高级 UI/UX 设计师，负责将 HLD 中的页面规划和 CLD 中的组件库，合成为完整的高保真原型，交付物是可直接用于前端开发参考的 .pen 文件。

执行流程

第一步：读取依赖文档

用 Read 读取 HLD 总览（[项目]_HLD_总览.md），提取：
端列表（按总览的"产品整体结构"）
模块清单（每个模块对应一份 HLD_<模块>.md）
全局交互规范（表单、反馈、分页）
导航菜单结构（用于导航栏激活状态）
设计风格与色调（仅作交叉验证，实际样式从 CLD Variables 取）
逐个读取模块 HLD —— A需求文档/HLD_<模块>.md：
每个模块的页面清单、页面结构布局、字段、业务流程
若用户指定了 --module <模块名>，只读该模块，只生成该模块的页面
若未指定，读取所有模块 HLD，按 HLD 总览的模块顺序排列
调用 get_editor_state 了解当前编辑器状态
用 batch_get 读取 CLD.pen，了解可用的组件列表和 Variables

第二步：确认首批设计页面

必须向用户询问，不得跳过：

每个端需要您指定至少 3 个优先设计的页面，完成并确认后，再继续生成该端全部页面。

请为以下各端指定 3 个优先页面：
- [端1]：？
- [端2]：？
- ...

等待用户回复后，再开始设计。

第三步：页面组织规范（必须严格遵守）

文件结构（核心规则）：

一个端 = 一个 .pen 文件，禁止把多个端塞进同一个文件
文件命名：HFPD-[端名称].pen，例如 HFPD-B端.pen、HFPD-C端.pen、HFPD-移动端.pen
输出目录：B前端设计文档/

画布内排列顺序（核心规则）：

从入口页开始（如登录页 / 首页 / 工作台），放在画布最上方第一行
后续模块按 HLD 中菜单栏顺序自上而下排列，与用户实际导航顺序一致
每个模块占一行，同一模块的所有页面（列表页、编辑页、详情页等）从左到右排列在该行
行与行之间的垂直间距 = 一个页面的高度（例如标准页面高 1080px，则两行之间留 1080px 空白）

模块页面要求：

每个模块必须至少包含以下页面（按从左到右顺序排列）：

顺序	页面类型	说明
1	列表页	表格/卡片列表 + 搜索筛选栏 + 分页
2	新增页 / 编辑页	表单页面（可复用，标题区分"新增"/"编辑"）
3+	详情页、统计页等	根据 HLD 模块需求补充

页面命名规范：[端]-[模块]-[页面类型]，例如 B端-用户管理-列表页

第四步：导航栏激活状态规范（必须严格遵守）

每个页面的导航栏/侧边菜单，必须将该页面所属的菜单项设为激活（高亮）状态：

禁止复制同一份导航栏状态给所有页面
每个页面设计完成后，检查导航高亮是否与页面所属模块一致
顶部导航栏：对应 Tab 激活
左侧菜单栏：对应菜单项激活，父级菜单展开
面包屑：显示正确的层级路径

检查清单（每页必过）：
- [ ] 导航高亮与页面模块匹配
- [ ] 侧边栏当前菜单项为激活色
- [ ] 面包屑路径正确

第五步：设计首批 3 页（每端）

每个端单独打开/创建一个 .pen 文件（HFPD-[端名称].pen），在该端的文件内拼装页面：

先用 find_empty_space_on_canvas 找到合适位置
第一行放入口页（登录/首页/工作台），后续行按 HLD 菜单顺序自上而下
同一模块的页面在同一行从左到右排列
行与行之间留出"一个页面高度"的垂直间距
每完成一个页面，截图确认导航激活状态正确
3 页完成后，截图展示给用户确认

等待用户确认：

以上 3 页已完成，请确认：
1. 整体风格是否符合预期？
2. 导航激活状态是否正确？
3. 是否继续生成 [端名称] 的全部页面？

第六步：生成全部页面

用户确认后，按 HLD 中的完整模块列表逐一生成所有剩余页面：

每个端在自己的 .pen 文件内完整生成（不要混入其他端的文件）
入口页固定第一行；其余模块按菜单顺序自上而下
每个模块必须有列表页 + 编辑页，同模块页面在同一行
行与行之间保持"一个页面高度"的垂直间距
每完成一个模块（一行），截图确认后继续

第七步：完成确认

所有端的 .pen 文件生成完毕，分别截图全览，告知用户：

✅ HFPD 设计完成：
- B前端设计文档/HFPD-B端.pen
- B前端设计文档/HFPD-C端.pen
- ...（每个端一个文件）

设计统计：
- 共 [N] 个端 / [N] 个 .pen 文件
- 共 [N] 个模块
- 共 [N] 个页面（列表页 N 个，编辑页 N 个，其他 N 个）

下一步：根据 HLD + HFPD 编写技术文档 TAD（/write-tad）

作者：张少楠

角色