$ loading_
自动录制专业感网页应用界面演示视频，适合讲解、教程与产品展示
复制安装指令，让 AI 自动完成配置 · 推荐新手
请帮我安装 askskill 上的 "ui-demo" 技能： 1. 下载 https://raw.githubusercontent.com/affaan-m/ECC/main/skills/ui-demo/SKILL.md 2. 保存为 ~/.claude/skills/ui-demo/SKILL.md 3. 装好后重载技能，告诉我可以用了
请为我们的 SaaS 仪表盘录制一个 90 秒的 UI 演示视频，展示登录、查看数据概览、筛选报表并导出 CSV 的流程。要求光标可见，节奏自然，适合发给客户预览。
一段制作精致的 WebM 演示视频，清晰展示核心操作路径，适合客户观看。
帮我录制一个网页应用功能讲解视频，重点演示团队管理页面中的添加成员、设置权限和发送邀请三个步骤，风格专业，像产品发布说明中的操作演示。
一段按步骤推进的 WebM 讲解视频，突出关键功能操作与界面反馈。
请录制一个教学风格的界面操作视频，演示用户如何在后台创建项目、填写基本信息、保存设置并查看结果页面，整体节奏稍慢，方便新手跟随。
一段节奏友好、光标清晰可见的 WebM 教程视频，适合新用户学习操作。
Record polished demo videos of web applications using Playwright's video recording with an injected cursor overlay, natural pacing, and storytelling flow.
Every demo goes through three phases: Discover -> Rehearse -> Record. Never skip straight to recording.
Before writing any script, explore the target pages to understand what is actually there.
You cannot script what you have not seen. Fields may be <input> not <textarea>, dropdowns may be custom components not <select>, and comment boxes may support @mentions or #tags. Assumptions break recordings silently.
Navigate to each page in the flow and dump its interactive elements:
// Run this for each page in the flow BEFORE writing the demo script
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));
<select>, <input>, custom dropdowns, or comboboxes?value="0" or value="" which looks non-empty. Use Array.from(el.options).map(o => ({ value: o.value, text: o.text })). Skip options where text includes "Select" or value is "0".@mentions, #tags, markdown, or emoji? Check placeholder text.required, * in labels, and try submitting empty to see validation errors."Submit", "Submit Request", or "Send".input[type="number"] to its column header instead of assuming all numeric inputs mean the same thing.A field map for each page, used to write correct selectors in the script. Example:
/purchase-requests/new:
- Budget Code: <select> (first select on page, 4 options)
- Desired Delivery: <input type="date">
- Context: <textarea> (not input)
- BOM table: inline-editable cells with span.cursor-pointer -> input pattern
- Submit: <button> text="Submit"
/purchase-requests/N (detail):
- Comment: <input placeholder="Type a message..."> supports @user and #PR tags
- Send: <button> text="Send" (disabled until input has content)
Run through all steps without recording. Verify every selector resolves.
Silent selector failures are the main reason demo recordings break. Rehearsal catches them before you waste a recording.
Use ensureVisible, a wrapper that logs and fails loudly:
async function ensureVisible(page, locator, label) {
const el = typeof locator === 'string' ? page.locator(locator).first() : locator;
const visible = await el.isVisible().catch(() => false);
if (!visible) {
const msg = `REHEARSAL FAIL: "${label}" not found - selector: ${typeof locator === 'string' ? locator : '(locator object)'}`;
console.error(msg);
const found = await page.evaluate(() => {
return Array.from(document.querySelectorAll('button, input, select, textarea, a'))
…
通过双评审智能体对结果进行对抗式校验，提升输出发布前的可靠性
使用 Playwright 测试本地 Web 应用、排查界面问题并采集截图与日志