跳到文档正文
oh-my-design
现场演示

现场演示手册

让观众看到真实产品发生变化。

优秀的 oh-my-design 演示不是逐个介绍技能名。它从一个看得见的问题开始,保护产品依赖的既有行为,最后回到真实路由,并给出任何人都能核验的证据。

选择能证明结果的最小演示规格

时间限制的是范围,不是诚实程度。开始前先选一种规格,并说明哪些内容不会被更改。

5 分钟01

修复一个可见缺陷

现有页面能用,但显得普通或难以理解

保留行为,只修复一个影响最大的层级、间距、状态或无障碍问题。

修改前画面、聚焦差异,以及同一真实路由上的修改后效果。

15 分钟02

交付一个完整小界面

项目已有技术栈和组件,流程范围也已明确

基于项目设计上下文,实现一个小界面及加载、空白、错误和成功状态。

可运行路由、状态覆盖、变更文件和实际执行的检查。

30 分钟03

运行带检查点的完整流程

界面较新或模糊,需要调研与设计系统决策

不跳过审批门槛,从发现、用户旅程、DESIGN.md 提案推进到实现和验证。

用户旅程、DESIGN.md 补丁、可运行 UI、验证摘要和三次用户检查点。

可重复使用的六步流程

无论是技术聚会、工作坊还是录屏,都可以使用同一顺序。CLI 负责准备环境,真正的 UI 工作由 AI 编程助手在代码仓库中完成。

  1. 01

    确定一个可见问题和一项受保护行为

    打开真实路由,准确指出观众需要观察的问题。然后声明 URL、数据流、字段名、文案或交互中哪些内容不得更改。

  2. 02

    安装套件并让 doctor 检查实际状态

    在项目根目录运行两个命令,安装后重启 AI 编程助手。安装成功只是准备工作,不是演示结果。

    npx oh-my-design-cli@latest npx oh-my-design-cli@latest doctor
  3. 03

    对齐 DESIGN.md 与 verified_v2 证据

    公开演示请选择 verified_v2 参考。让代理与现有 DESIGN.md 一起读取,只采用属于当前产品界面的证据;未知字体、token 和组件声明保持缺省。

  4. 04

    实现真实界面及关键状态

    继续使用现有技术栈和组件。新流程不要只打磨静态成功画面,还要覆盖用户真正可能遇到的状态。

  5. 05

    在真实路由上审计

    打开产品路由,实际操作受保护行为,并运行相关无障碍与 interface-feel 检查。只报告真正执行过的检查和测量。

  6. 06

    记录用户的修正

    用户修正某个视觉决定时,只修正对应范围,并用 omd:remember 记录,避免下次会话重犯。

适合现场修复的提示词

先阅读 DESIGN.md 并检查当前产品路由。在保留 URL、数据流、字段名和现有用户行为的前提下,修复这个页面中一个可见的层级或状态问题。公开演示请使用 verified_v2 参考,并只对齐属于该产品界面的证据;未知值不要用 fallback 填充,直接省略。在真实界面中实现改动并覆盖关键状态,然后验证该路由,报告变更文件和真正执行过的检查。扩展 DESIGN.md 或越过必需的流程检查点之前先征求我的确认。

观众应当能够核验的证据

在演示过程中同步保留这些记录。只有精美截图而没有可追溯过程,并不算可审计演示。

原始页面和一开始指出的可见问题

包含受保护行为的完整提示词

DESIGN.md 差异以及主动省略的未知字段

包含关键状态的真实产品路由,而不是独立模型

变更文件和真正运行的检查或测量

作为持久且有明确范围的偏好记录下来的用户修正

让惊喜建立在事实之上

CLI 负责安装和诊断

AI 编程助手读取已安装的上下文并修改 UI。安装器本身不会生成界面。

未知信息保持缺省

不要用系统字体、通用组件、推测 token 或相邻营销页面填补缺失的品牌事实。

证据优先于表演

没有真实前后测量,就不要宣称速度、转化率、无障碍或性能获得提升。

必需检查点不得跳过

30 分钟流程仍会在用户旅程、DESIGN.md 补丁和验证审批处停下。现场观众不是跳过它们的理由。