古法编程

Appearance

Everything Claude Code 的 ui-demo Skill 专为开发者自动录制高质量 Web 应用 UI 演示视频而设计，基于 Playwright，自动注入可见 SVG 光标和字幕条，严格遵循「发现-彩排-录制」三阶段流程，有效避免传统录屏脚本中因假设错误、选择器失效或节奏不自然导致的失败。适用于产品演示、文档、培训和交付场景，输出带专业感的 WebM 视频，极大提升 AI 辅助编程的交付效率和演示质量。

Everything Claude Code UI Demo Skill：用 Playwright 录制带可见光标的专业 WebM UI 演示视频 ​

在日常开发、产品交付、团队协作或对外展示中，UI 演示视频是不可或缺的沟通载体。但传统的录屏方式（如手动操作+屏幕录制）存在诸多痛点：操作节奏难控、鼠标轨迹不清晰、录制中断难以重来、录完才发现步骤出错、UI 变动导致脚本失效等。Everything Claude Code 的 ui-demo Skill 通过 Playwright 自动化，结合可见 SVG 光标、字幕条、自然节奏和结构化脚本，极大提升了 UI 演示视频的专业度与可维护性。

本指南将详细介绍 ui-demo Skill 的应用场景、触发条件、三阶段最佳实践、完整操作流程、输出示例，以及与其他 Agent/Skill 的协作方式，帮助你在实际项目中高效、零失误地生成专业级 UI 演示视频。

1. ui-demo Skill 解决了什么问题？ ​

传统做法的痛点：

  • 录屏脚本常因 UI 变更、选择器失效、字段类型假设错误而中途失败，且往往录完才发现问题，浪费大量时间。
  • 鼠标轨迹不可见、操作节奏生硬，难以传达清晰的交互意图。
  • 视频内容难以复用、难以批量生成，自动化程度低。

ui-demo Skill 的优势：

  • 自动注入 SVG 光标，操作轨迹清晰可见，观感专业。
  • 强制「发现（Discover）-彩排（Rehearse）-录制（Record）」三阶段流程，彻底规避因假设或选择器问题导致的录制失败。
  • 支持字幕条注释、平滑滚动、分步暂停，录制节奏自然，易于理解。
  • 输出稳定的 WebM 视频文件，便于文档、培训、交付和二次剪辑。
  • 可与 E2E Runner Agent、Browser QA Skill 等协作，实现测试、演示一体化。

2. 典型触发场景与激活条件 ​

ui-demo Skill 会在以下典型场景自动激活：

  • 你要求 AI 生成「演示视频」「screen recording」「walkthrough」「tutorial」等可视化操作演示。
  • 需要为新功能、复杂流程、产品亮点制作直观的演示视频，用于内部培训、文档、客户交付或市场推广。
  • 希望用自动化方式批量生成 UI 操作视频，保证每次录制都精准还原指定流程。

3. 三阶段操作流程（Step by Step） ​

ui-demo Skill 强制每次录制都遵循「发现 → 彩排 → 录制」三阶段，绝不允许跳步。这是保证录制成功率和专业度的核心。

阶段 1：发现（Discover） ​

目标：在写脚本前，实际浏览每个页面，收集所有交互元素的真实结构。

操作步骤：

  1. 用 Playwright 打开每个页面，运行如下代码，导出所有可交互字段（input、select、textarea、button、contenteditable 等）：

    javascript
    const fields = await page.evaluate(() => {
  const els = [];
  document.querySelectorAll('input, select, textarea, button, [contenteditable]').forEach(el => {
    if (el.offsetParent !== null) {
      els.push({
        tag: el.tagName,
        type: el.type || '',
        name: el.name || '',
        placeholder: el.placeholder || '',
        text: el.textContent?.trim().substring(0, 40) || '',
        contentEditable: el.contentEditable === 'true',
        role: el.getAttribute('role') || '',
      });
    }
  });
  return els;
});
console.log(JSON.stringify(fields, null, 2));

  2. 检查字段类型、下拉选项、富文本支持、必填项、动态内容、按钮文案、表格列标题等细节，避免凭想象写脚本。

  3. 输出每个页面的字段映射（field map），为后续脚本编写提供真实依据。

示例输出：

/purchase-requests/new:
  - Budget Code: <select> (4 options)
  - Desired Delivery: <input type="date">
  - Context: <textarea>
  - BOM table: inline-editable cells
  - Submit: <button> text="Submit"

阶段 2：彩排（Rehearse） ​

目标：逐步验证所有选择器和交互步骤，确保录制时不会因元素找不到而中断。

操作步骤：

  1. 编写彩排脚本，依次检查每个关键元素是否可见且可交互：

    javascript
    async function ensureVisible(page, selector, label) {
  const el = page.locator(selector).first();
  const visible = await el.isVisible().catch(() => false);
  if (!visible) {
    console.error(`REHEARSAL FAIL: "${label}" not found - selector: ${selector}`);
    // 输出当前可见元素，便于快速修正
    return false;
  }
  console.log(`REHEARSAL OK: "${label}"`);
  return true;
}

  2. 按步骤列表依次验证：

    javascript
    const steps = [
  { label: 'Login email field', selector: '#email' },
  { label: 'Submit button', selector: 'button[type="submit"]' },
  // ...
];
let allOk = true;
for (const step of steps) {
  if (!await ensureVisible(page, step.selector, step.label)) allOk = false;
}
if (!allOk) process.exit(1);

  3. 若有失败，修正选择器或流程，重新彩排，直到全部通过。

注意： 绝不允许带错录制，彩排不过关就不能进入录制阶段。

阶段 3：录制（Record） ​

目标：自动化录制带可见 SVG 光标、字幕条、平滑滚动、自然节奏的 WebM 演示视频。

操作步骤：

  1. 初始化 Playwright 录制环境，设置分辨率 1280x720，开启视频录制：

    javascript
    const context = await browser.newContext({
  recordVideo: { dir: VIDEO_DIR, size: { width: 1280, height: 720 } },
  viewport: { width: 1280, height: 720 }
});

  2. 注入 SVG 光标和字幕条，每次页面跳转后都需重新注入：

    javascript
    await injectCursor(page);
await injectSubtitleBar(page);

  3. 分步展示字幕，用 showSubtitle(page, 'Step N - ...') 标明当前操作：

    javascript
    await showSubtitle(page, 'Step 1 - 登录');

  4. 操作鼠标轨迹，用 moveAndClick 让光标平滑移动到目标元素再点击，避免“瞬移”：

    javascript
    await moveAndClick(page, 'button[type="submit"]', '登录按钮');

  5. 输入内容，用 typeSlowly 模拟真实打字过程：

    javascript
    await typeSlowly(page, '#email', 'user@example.com', '邮箱输入');

  6. 平滑滚动、面板浏览、表格巡览，用内置辅助函数让演示更具故事感。

  7. 录制结束后，将视频文件复制到稳定输出路径，便于后续使用。

完整脚本模板（精简版，详见 Skill 源文件）：

typescript
'use strict';
const { chromium } = require('playwright');
const path = require('path');
const fs = require('fs');

(async () => {
  const browser = await chromium.launch({ headless: true });
  const context = await browser.newContext({
    recordVideo: { dir: './screenshots', size: { width: 1280, height: 720 } },
    viewport: { width: 1280, height: 720 }
  });
  const page = await context.newPage();

  await injectCursor(page);
  await injectSubtitleBar(page);

  await showSubtitle(page, 'Step 1 - 登录');
  // ...后续操作
  await showSubtitle(page, '');

  await context.close();
  const video = page.video();
  if (video) {
    fs.copyFileSync(await video.path(), './screenshots/demo.webm');
  }
  await browser.close();
})();

使用方式：

bash
# 彩排（只验证选择器，不录制）
node demo-script.cjs --rehearse

# 正式录制
node demo-script.cjs

4. 输出示例 ​

  • screenshots/demo-FEATURE.webm：带可见 SVG 光标、字幕条、自然节奏的 WebM 视频文件
  • 日志输出：每步操作、选择器验证、警告和错误信息一目了然
  • 可选：生成每步操作的截图、操作日志，便于文档和回溯

5. 常见配套 Agent/Skill 与协作关系 ​

更多 Skill/Agent 体系化用法，参考 Everything Claude Code 完全指南 和 Claude Code 快速上手指南。

FAQ ​

Q: 录制过程中 SVG 光标消失怎么办？
A: 每次页面跳转后需重新调用 injectCursor(page)，否则光标会因 DOM 重置而丢失。

Q: 视频节奏太快或太慢如何调整？
A: 可通过调整 moveAndClick、typeSlowly、showSubtitle 等函数中的延时参数，精细控制每步停顿与打字速度。

Q: 录制结果与实际 UI 不符怎么办？
A: 请务必先完成「发现」和「彩排」阶段，确保所有字段类型、选择器和流程与真实 UI 完全一致，避免凭经验假设。

友情链接： 能跑吗 · 打工算 · 车主算 · 开发工具 · 人工不智能

Copyright © 2026 地豆 蜀ICP备2021007188号 | 关于本站 | 隐私政策