noah-p2-prototype_1.0.7
SKILL_103777019 · vv1.3 · 需求阶段 · Owner：Andy · 发布于 2026-07-09
调用 3
下载 35
点赞 0
浏览 0
- 简介
- 基于P1需求生成遵循iARK或团队规范的高保真可交互HTML原型，支持自定义组件注入。
- 触发词
- 出原型,画界面,P2,高保真,原型设计
- 分发渠道
- ARK Engine
- 功能测试
- ✅ 通过 · 业务评审：✅ 通过
- 技能包文件
- noah-p2-prototype-demo/README.md、noah-p2-prototype-demo/SKILL.md、noah-p2-prototype-demo/assets/html-skeleton.md、noah-p2-prototype-demo/evals/eval-set.md、noah-p2-prototype-demo/references/design-and-tokens.md、noah-p2-prototype-demo/references/execution-redlines.md、noah-p2-prototype-demo/references/iARK-Design-System.md、noah-p2-prototype-demo/references/prototype-fidelity.md …共13个文件
使用示例：帮我根据PRD输出一份可交互的高保真HTML原型
SKILL.md 全文
Frontmatter
| name | noah-p2-prototype_1.0.7 |
|---|---|
| description | | |
P2 · 原型与可运行 Demo（P-Pipeline 节点二）
版本 v1.0.7（2026-07-16）。本版修复原型/Demo 能力回归（洪奎团队反馈）：①原型真实度强制（references/prototype-fidelity.md）——对客必须"像 App"（App 外壳+底部 Tab+页面切换+过渡动效），后台必须"可操作、不平铺"（页面切换 + 查询/筛选真实 filter 生效，禁只提示"查询条件已应用"）；②移植 D2 脚本到scripts/（extract_pages_dom抽真实 DOM、page_mockup_generator、prototype_screenshot截图供嵌 PRD）；③PRD↔原型联动（每页回引 F 编号、关键页截图交 P1 嵌 PRD 第6章）；④加回生成后自检。
v1.0.5/1.0.6 保留：2 节点结构（本节点=原型+含代码 Demo）；UI-DOM 基线还原现有页面；响应式三端（移动/平板/Web，不做桌面端专门断点）；生成稳健性自检；迭代局部修改；分层目录工程化。
设计规范唯一真相源：references/iARK-Design-System.md（ARK v5.8.2）。后续迭代请递增版本号。---
强制读取清单（三层加载 · 用到才读）
| 步骤 / 场景 | 必读文件 |
|---|---|
| 全程（红线）| references/execution-redlines.md（对客内容vs标注分层/范围剪裁/示例数据/样式欠账/删除即清理）|
| 确认规范来源 + 取 Token | references/design-and-tokens.md；对客细节查 references/iARK-Design-System.md |
| 原型真实度（App 形态/后台可操作）| references/prototype-fidelity.md |
| 迭代需求·还原现有页面 | references/ui-dom-baseline-spec.md + scripts/extract_pages_dom.py（抽真实 DOM）|
| 响应式 + 生成稳健性 + 迭代修改 | references/responsive-robustness-iteration.md |
| 生成骨架 + 截图（供嵌 PRD）| assets/html-skeleton.md + scripts/prototype_screenshot.py、scripts/page_mockup_generator.py |
---
一、这个节点做什么
接收节点一的结构化需求 / PRD（或直接需求描述），产出：
- 高保真交互原型（设计/交互评审用，过程形态）；
- 核心交付物 = 可运行 Demo（含前端代码、完整 Mock 数据、可点击操作，用于业务对齐/验收）。
定位：Demo 含前端代码，但生产级前端代码由 D 线（D4/D5）交付，本节点产物是演示/验收稿与参考稿。
与节点一分工：需求/PRD 在节点一；本节点不写 PRD、不做需求分析。
纯逻辑/无界面需求不进本节点（在节点一只出 PRD）。
二、Step 0 · 先确认两件事
① 设计规范来源（按场景类型）
- 对客 ToC：ARK Design System v5.8.2（
--ark-*Token，严格套、双主题、高保真）。 - 中后台 / 对内：轻规范（一致 + 简洁），可复用 ARK 语义色与间距，弱化品牌铺陈。
- 团队自有规范（Glory UI / Olive 后台等）：优先用团队规范，缺失回落 ARK。
references/design-and-tokens.md。
② 目标端与尺度
- 三端响应式：移动端 375 / 平板 768 / Web 1024（渲染态 @1x）；不做桌面端(≥1280)专门断点。
- 具体断点与写法见
references/responsive-robustness-iteration.md。
三、执行流程
1. 理解输入：读 PRD/需求，识别场景类型、需覆盖的 P0 功能（按 F 编号）、核心旅程、合规要求。 2. 规划页面/状态：先列页面与状态（首页/详情/操作/结果 + 空/加载/错误），让用户确认范围。每个 UI 元素须有对应 F 编号支撑（R2 范围剪裁）。 3. 生成原型 → Demo：单文件 HTML；对客用--ark-* 变量 + 双主题；覆盖全交互状态；MOCK_DATA 真实感数据（标注示例）；三端响应式；骨架见 assets/html-skeleton.md。
- 真实度强制（见
references/prototype-fidelity.md）：对客做出 App 形态（App 外壳/底部 Tab/页面切换/过渡动效）；后台可操作、不平铺，查询/筛选必须按条件 filter Mock 数据并重渲染（禁只弹"查询条件已应用"）。 - 联动 PRD：每页回引 F 编号；关键页用
scripts/prototype_screenshot.py截图，交 P1 嵌入 PRD 第 6 章（截图 + 三表）。
references/responsive-robustness-iteration.md（语法/编译/三端布局），不过则自检重试。
5. 标注：对客内容 vs 设计标注分层（技术/API/待确认只进 HTML 注释，不渲染 · R1）。
6. 迭代：按用户反馈局部修改对应片段，不整体重生成（R · 省 token）。四、执行红线（摘要 · 全文见 references/execution-redlines.md）
- R1 内容分层：对客层只渲染用户可见内容；API/技术/待确认进
<!-- [标注] -->，不上页面。 - R2 范围剪裁：每个 UI 元素须有 F 编号支撑，无支撑不画；杜绝凭空加 tab/弹窗。
- R3 示例数据标注：产品名/机构名/金额/匹配度等一律标"示例数据"；可提示接 MCP 拉真实数据。
- R4 样式欠账：迭代项目须提供现有页面/UI；未提供标
[样式欠账]，不套默认冒充现有系统。 - R5 删除即清理：删元素联动清 CSS/JS 死代码。
五、Gate（本节点完成标准）
- [ ] 规范来源与尺度已确认（对客 ARK@1x / 中后台轻规范 / 团队规范）
- [ ] 全部 P0 功能核心路径可走通；每个 UI 元素有 F 编号支撑（R2）
- [ ] 对客：仅用
--ark-*变量、双主题、禁 box-shadow（浮层除外）、每屏 ≤1 主 CTA、金额/涨跌/风险声明正确 - [ ] 覆盖默认/空/加载/错误状态；移动/平板/Web 三端布局正常
- [ ] 真实度：对客有 App 外壳+底部 Tab+页面切换+过渡动效；后台可切换页面、查询/筛选真实生效（非占位提示）
- [ ] PRD↔原型联动：每页回引 F 编号；关键页已截图供 P1 嵌 PRD
- [ ] 内容分层（R1）、示例数据标注（R3）、样式欠账标注（R4）、删除无残留（R5）
- [ ] 生成稳健性自检通过（无语法/编译错误）
- [ ] 业务/设计已走查确认；首次采纳率与轮次已记录