关于 om-mockup-prototype
om-mockup-prototype 根据产品简报中的选定流程生成可操作的本地 HTML 原型,供团队在详细视觉设计前检查步骤、标签和恢复路径。原型使用模拟数据,并保留假设与上下文记录。
主要功能
- 01生成独立的本地 HTML 原型
- 02模拟选定流程及相关边界状态
- 03使用模拟数据和无障碍控件
- 04记录上下文、来源与假设
- 05通过浏览器操作检查并记录验证结果
适用场景
- 01在视觉设计前检查流程顺序和选项
- 02演练错误状态、返回导航与重置路径
- 03基于面板报告或直接从简报制作流程原型
安装
复制下面的命令,在终端中运行。
npx skills add https:/ / github.com/ open-mercato/ skills --skill om-mockup-prototype安装后在 Claude Code 中输入/om-mockup-prototype确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
references/agentic-setup.mdprototype-format.mdquality-gate.mdreport-templates.mdrules.md详细介绍
发现原型
将产品简报中选定的流程转化为用户可以操作的中性界面。输出内容是自包含的本地 HTML,包含模拟数据、上下文记录和浏览器证据。它会在详细视觉设计之前测试流程顺序、标签、选项和恢复路径。无论是否有设计系统,都可以使用。
在发现交接流程中,此步骤位于第一个 om-synthetic-users 面板之后。随后,用户可以与另一个面板一起走查原型,再由 om-discover --refresh 纳入观察结果并检查是否已满足进入 om-backlog 的准备条件。直接调用时,也可以使用没有面板报告的简报。
参数
{brief}(可选):仓库相对的产品简报路径。默认值为${SPECS_DIR}/product-brief.md。--flow <name-or-id>(可选):要模拟的关键流程。使用当前对话中已选定的流程;否则根据简报提出一个流程并进行确认。--panel-report <path>(可选):来自第一个合成面板的仓库相对报告。若未提供,则使用当前发现交接流程返回的报告;否则在没有报告的情况下继续,并说明这一点。--slug <slug>(可选):全小写的 kebab-case 输出名称,根据流程提出,无需询问是否设置。--refresh <revision-dir>(可选):通过写入下一个新修订版来修改此技能之前的输出。保留其 slug,并链接到之前的修订版;绝不替换现有文件。
工作流
务必先检查: 如果存在 .ai/skills/om-mockup-prototype/SKILL.md,请应用其中的规则;安全规则始终优先。
-
加载上下文和安全规则。 每次运行都遵循
references/agentic-setup.md并阅读references/rules.md。解析可选配置和安全的本地路径,应用仓库说明及允许的覆盖规则,并在可用时加载已配置的浏览器描述文件。缺少配置时,绝不启动交付设置。 -
选择流程并保留其约束。 阅读简报中的 Key flows、Product、Scope、Business rules、Non-goals、Decisions、Domain glossary 和相关未解决问题。将可选的面板报告视为合成假设。记录来源路径、相关的稳定规则 / 决策 ID 及其状态,以及仍然未知的内容。如果缺少简报或可用流程,则停止并准确指出缺少的输入。对于
--refresh,在起草新版本前检查先前上下文和所有权记录(references/prototype-format.md)。 -
确认模拟边界。 展示参与者、起点、成功结果、屏幕 / 状态列表、保留的规则,以及交互所需的任何假设。只询问上下文中没有的信息和未解决的产品选择。对该确切范围的现有明确授权仍然有效。遇到规则冲突时,必须通过简报要求的变更流程由人工决策;不要在原型代码中解决。确认表示批准模拟及其陈述的假设,而不代表这些假设属实。
-
构建可点击的版本。 遵循
references/prototype-format.md:创建全新的版本目录,编写上下文记录,并构建静态 HTML、CSS 和少量本地事件处理程序。使用中性线框、无障碍控件和模拟数据。连通所选旅程、相关边缘状态、返回导航和重置;如实呈现排除的目的地。在上下文文件中记录假设,不要将面板结论或预期反应放入模拟界面。 -
验证产物。 运行
references/quality-gate.md:检查范围、离线运行和必需的交互,然后通过浏览器提供方指定的操作测试本地 HTML。采集实际证据,关闭会话,在新版本中修复失败的交互,并重新检查受影响的状态。未解决的静态检查失败意味着Verification: incomplete,即使它导致浏览器无法打开也是如此。静态检查通过但无法访问浏览器时,记录Verification: not-run;不要声称进行了浏览器走查。浏览器检查失败或未完成也意味着incomplete。 -
记录并报告结果。 最后完善
prototype.json,记录文件清单、上下文来源、先前版本和验证结果。通过references/report-templates.md报告,包含产物、限制和精确的 Output contract 行。如果存在调用方的发现阶段交接,则返回该交接;此技能不会调用面板、刷新简报、创建待办事项或启动实现。直接用户可以选择之后执行的确切调用,并将其记录在Next:中,但不要执行。
输出约定
写入产物时,结尾必须使用以下完全一致且不带任何修饰的行:
Prototype: <repo-relative path to revision/index.html>
Prototype context: <repo-relative path to revision/README.md>
Verification: passed | incomplete | not-run
Next: none | om-<skill> <exact user-approved arguments>
使用者会解析 ^Prototype: (\S+)$、^Prototype context: (\S+)$、
^Verification: (passed|incomplete|not-run)$ 和
^Next: (none|om-[a-z-]+.*)$。最终只输出一行 Next:。它表示明确选择但尚未执行的操作;否则输出 Next: none。
未写入文件时,不要输出产物路径。已拒绝的后续操作或已完成的操作应写在正文中,而不是 Next: 中。
规则
- 仅限交互操作。缺少人工决策时必须停止;不得自主运行,也不得隐式选择业务策略。
- 使用现有 UI 语言和需求简述中的术语。采用中性样式并不意味着可以省略无障碍设计、含义说明或实用的恢复提示。
.uxproof/是只读上下文。本技能不会创建品牌、情绪板、令牌、设计契约或生产组件,也不要求先提取设计系统。- 所有显示的记录均为虚构的模拟数据。绝不重复使用个人访谈详情、凭证或生产记录。
- 在上下文记录中保留
[SYNTHETIC]和[ASSUMPTION]标签。保留已确认决策及其来源和负责人。浏览器检查仅用于验证原型行为。 - 保留旧修订版本和手动文件。刷新前须验证先前的所有权记录及其路径,然后写入一个新修订版本。
- 不得修改跟踪器、发布内容、安装依赖项或启动应用。不得调用不可用的配套技能;应报告缺少的能力。
- 阅读
references/rules.md,了解通用写作规则、输出标记和证据区分;这些要求始终适用。