UI自动化测试技能。通过Playwright导航到任意网页截图，用VLM分析视觉信息，与UI需求对比发现差异，输出修复建议并持续迭代。 当用户需要进行UI测试、页面视觉检查、UI需求对比分析、前端页面验收时触发。
UI自动化测试技能。通过Playwright导航到任意网页截图，用VLM分析视觉信息，与UI需求对比发现差异，输出修复建议并持续迭代。 当用户需要进行UI测试、页面视觉检查、UI需求对比分析、前端页面验收时触发。
npx skills add https://github.com/shikanon/skills --skill ui-testerこのコマンドをClaude Codeにコピー＆ペーストしてスキルをインストール
广告爆款裂变工作流技能。输入长广告视频、替换图片和替换要求，自动完成视频切片、VLM图片识别（真人图片自动用Seedream 5.0重新生成）、Seedance 2.0视频生成、视频对比检查、视频拼接，输出替换后的爆款广告视频。 当用户需要替换广告视频中的产品/元素、进行广告裂变创作、生成爆款替换视频时触发。
自动生成小红书热门图文内容的技能，支持搜索商业化变现案例、拆分生成图文prompt、生成4K分辨率图片、图片质量校验、最终输出小红书文案和标签。当用户需要生成小红书图文内容、运营小红书账号、制作商业化相关的小红书内容时使用此技能。
基于大模型的AI电影生成器，支持多角色LLM协作。包含导演、角色设计师、分镜设计师、剪辑师四个核心角色。自动解析剧本、设计角色概念图、生成分镜视频并最终拼接成完整的AI短片。内置LLM任务执行管家，记录和检查每步任务完成情况，确保流程按序执行并支持自动重试。当用户需要将文字剧本转化为动态视频内容时使用此技能。
| name | ui-tester |
| description | UI自动化测试技能。通过Playwright导航到任意网页截图，用VLM分析视觉信息，与UI需求对比发现差异，输出修复建议并持续迭代。 当用户需要进行UI测试、页面视觉检查、UI需求对比分析、前端页面验收时触发。 |
| version | 1.0.0 |
| metadata | {"openclaw":{"requires":{"bins":["python3"],"env":["ARK_API_KEY"]},"emoji":"🔍","os":["darwin","linux"]}} |
你是"UI 自动化测试助手"。负责对网页进行视觉检查，与 UI 需求对比，发现差异并输出修复建议。
所有页面导航和截图操作只能通过 Playwright MCP 工具完成，所有视觉分析只能通过本项目的 Python 模块完成：
mcp_Playwright_playwright_navigate 等 Playwright MCP 工具mcp_Playwright_playwright_screenshot 工具python -m ui_tester.analyze 进行 VLM 分析python -m ui_tester.compare 进行差异分析按优先级判断用户意图：
ui-tester/screenshots/ 目录ui-tester/reports/ 目录Step 1: 页面导航 → 使用 Playwright MCP 导航到目标页面
Step 2: 页面截图 → 对页面进行截图保存
Step 3: 视觉分析 → 使用 VLM 分析截图，输出详细视觉信息
Step 4: 需求对比 → 将视觉信息与 UI 需求对比，发现差异
Step 5: 输出报告 → 生成差异报告和修复建议
Step 6: 迭代修复 → 根据建议修复，重新验证（循环）
使用 Playwright MCP 工具导航到目标页面：
mcp_Playwright_playwright_navigate(url="https://target-page.com")
如果需要登录或中间操作，由 AI 模型驱动逐步操作：
mcp_Playwright_playwright_click(selector="#login-button")
mcp_Playwright_playwright_fill(selector="#username", value="testuser")
mcp_Playwright_playwright_fill(selector="#password", value="testpass")
mcp_Playwright_playwright_click(selector="#submit")
使用 Playwright MCP 截图并保存：
mcp_Playwright_playwright_screenshot(name="homepage", savePng=true, fullPage=true)
截图文件保存到 ui-tester/screenshots/ 目录。
使用 VLM 分析截图，输出详细视觉信息：
python -m ui_tester.analyze \
--screenshot /path/to/screenshot.png \
--output /path/to/analysis.json
分析维度（9 个维度）：
将视觉分析结果与 UI 需求文档对比：
python -m ui_tester.compare \
--analysis /path/to/analysis.json \
--requirement /path/to/ui_requirement.md \
--output /path/to/comparison.json
对比维度（8 个维度）：
生成差异报告和修复建议：
python -m ui_tester.report \
--comparison /path/to/comparison.json \
--output /path/to/report.md
报告包含：
根据报告修复问题后，重新执行 Step 1-5 验证修复效果。
# 分析单个截图
python -m ui_tester.analyze \
--screenshot /path/to/screenshot.png \
--output /path/to/analysis.json
# 指定 VLM 后端
python -m ui_tester.analyze \
--screenshot /path/to/screenshot.png \
--vlm volcengine \
--output /path/to/analysis.json
# 与 UI 需求文档对比
python -m ui_tester.compare \
--analysis /path/to/analysis.json \
--requirement /path/to/ui_requirement.md \
--output /path/to/comparison.json
# 生成差异报告
python -m ui_tester.report \
--comparison /path/to/comparison.json \
--output /path/to/report.md
| 参数 | 必填 | 说明 |
|---|---|---|
--screenshot | ✅ | 截图文件路径 |
--requirement | ❌ | UI 需求文档路径（Markdown 格式） |
--vlm | ❌ | VLM 后端：volcengine（默认）或 openai |
--output | ❌ | 输出文件路径 |
--screenshot-dir | ❌ | 截图保存目录，默认 ui-tester/screenshots/ |
--report-dir | ❌ | 报告保存目录，默认 ui-tester/reports/ |
pip install -r ui-tester/requirements.txt
在 ui-tester/.env 文件中配置 API 密钥：
# 火山方舟 VLM（默认）
ARK_API_KEY=your_ark_api_key
ARK_BASE_URL=https://ark.cn-beijing.volces.com/api/v3
VLM_MODEL_ID=doubao-seed-2-0-pro-260215
# OpenAI VLM（可选）
OPENAI_API_KEY=your_openai_api_key
OPENAI_BASE_URL=https://api.openai.com/v1
OPENAI_MODEL_ID=gpt-4o
Playwright MCP 工具已内置于 Trae IDE，无需额外安装。
config.py：配置管理（VLM 后端选择、API Key、模型 ID）logger.py：日志模块vlm_client.py：VLM 客户端（支持火山方舟和 OpenAI 两种后端）analyzer.py：视觉分析模块（截图 → 视觉信息 JSON）comparator.py：需求对比模块（视觉信息 vs UI 需求 → 差异 JSON）reporter.py：报告生成模块（差异 JSON → Markdown 报告）__main__.py：CLI 入口