ui-demo

ui-demo 技能概览

ui-demo 能做什么

ui-demo 技能可以帮助你用 Playwright 录制更精致的 Web 应用演示视频，包括可见的鼠标移动、节奏更自然的交互，以及比普通屏幕录制更像真人讲解的浏览体验。它非常适合产品演示、上手引导、功能导览和教程式视频，目标是清晰展示一个可工作的 UI。

谁应该使用它

如果你需要一种可重复的方法，把粗糙的产品流程整理成适合展示的录制内容，就该用 ui-demo 技能。它适合开发者、产品团队，以及能够启动浏览器、检查页面并执行脚本化交互的 agent，而且不需要完整的视频剪辑工作流。

它为什么有价值

它的核心价值在于流程纪律：这个技能会推动你先把真实 UI 走一遍，再排练流程，最后才正式录制。这样可以减少因为选择器错误、控件隐藏或节奏不真实而导致的演示翻车。如果你想做 ui-demo for Prototypes，这一点尤其有用，因为原型 UI 变化很快，录制前往往需要快速验证。

如何使用 ui-demo 技能

安装并明确任务范围

进行 ui-demo install 时，先从 repo 中添加该技能，然后只把它应用到单一流程，而不是整个应用。一个典型的安装命令是：
npx skills add affaan-m/everything-claude-code --skill ui-demo

开始之前，先定义清晰的录制目标：是哪一个页面、哪段用户旅程、观众应该学到什么，以及这段视频是用于文档、销售还是内部评审。

先探索，再录制

ui-demo usage 的工作流依赖于先理解真实可用的 UI。先打开目标页面，检查可见的输入框、按钮、菜单和弹窗，并留意那些不按标准 HTML 元素方式工作的自定义控件。repo 里的指导很明确：先发现，后排练，最后录制。

好的输入示例：

• “录制一个 60 秒的流程，展示如何创建新项目、添加一个任务并分享它。”
• “展示 staging 环境里的设置流程，重点是主题切换和邀请链接。”

不够好的输入示例：

• “给这个应用做一个演示视频。”

先读对文件

使用 ui-demo guide 时，先从 SKILL.md 和任何会影响浏览器设置或录制约束的关联 repo 说明读起。在这个 repo 里，SKILL.md 是主要信息源，也没有额外的支持目录可以依赖，所以关键工作是认真阅读流程部分，并把它适配到你的应用上。

用排练过的脚本

把演示写成一串用户意图步骤，而不是一份点击清单。要包含起始状态、动作路径和预期结束状态。如果流程里有高风险环节，比如文件上传、异步保存或弹窗，录制前先把这些步骤排练熟，这样正式录制时才会更顺。

ui-demo 技能 FAQ

ui-demo 比普通提示更好吗？

是的，前提是任务目标是产出一段可信的录制，而不只是解释一个功能。通用提示可能只能给你一份粗略清单，但 ui-demo skill 提供的是一套工作流，能减少选择器失误、节奏问题和不真实的交互。

ui-demo 只适合已完成产品吗？

不是。这个技能同样适用于原型、staging 构建和内部工具，所以 ui-demo for Prototypes 是一个很实用的场景。关键要求是 UI 具有足够的交互性，能够稳定地探索和录制。

什么会阻碍好结果？

最常见的阻碍是不稳定的界面、目标旅程不清晰，以及对页面结构的错误假设。如果应用变化很快，就要提供当前路由、稳定的测试数据和准确的 UI 路径，这样录制才不会跑偏。

它对新手友好吗？

友好，前提是你能把用户旅程描述清楚。你不需要会视频剪辑，但需要有足够的产品上下文，说明这段演示要证明什么、又要省略什么。

如何改进 ui-demo 技能

给技能更清晰的简报

最好的 ui-demo usage 输入会写清受众、时长和成功标准。比如：“制作一个 45 秒的 stakeholder 演示，展示经理如何查看报告并导出 CSV，过程中不要出现错误状态或初始化页面。” 这比泛泛地要求“做一个产品流程演示”更有效，因为它定义了节奏和范围。

提供稳定的 UI 上下文

如果界面有动态数据、认证或基于角色的视图，就要提供准确的起始条件。说明账号类型、路由、测试记录名称，以及任何预加载状态。这一点很重要，因为 ui-demo skill 在浏览器状态可预测时效果最好。

在第一次录制后迭代

先检查第一版的节奏、鼠标指向是否清楚，以及观众在没有旁白的情况下能否看懂故事。然后通过删减多余点击、缩短空等时间、把含糊的过渡改成明确的 UI 步骤来优化脚本。想让 ui-demo install 真正见效，就要把第一次运行当作排练数据，而不是最终成品。

注意常见失败模式

最常见的错误是流程太长、选择器没有验证，以及演示脚本一次想覆盖太多功能。如果视频显得很杂，就把旅程收窄到一个结果，并让每一步都服务于这个结果。