Midscene Skills：让 Claude 用视觉方式操控任意平台 UI

Skill超级捕获手 技术创作者 2026-08-13 795 阅读

总结

字节跳动 web-infra-dev 团队（Rsbuild / Rslib 同厂）开源的 Midscene Skills 是当下 GitHub Trending 第 2 名的 UI 自动化技能集合。它把「视觉驱动 + 自然语言」做成了一组可直接 npx skills add 装进 Claude Code / OpenClaw 的 Skills，覆盖 Web、Chrome Bridge、桌面、Android、iOS、HarmonyOS 六大平台，一句话让 AI 操控任意 UI——不再受 DOM 选择器、XPath、跨域 iframe 拖累。

功能与原则

核心能力：纯视觉驱动（screenshot-based）的跨平台 UI 自动化引擎，通过多模态视觉模型在截图上直接定位元素、操作界面、断言视觉结果，并以一组 Skills 的形式暴露给 AI Agent 调用。

设计原则：

  • 截图即真相：元素定位完全基于像素级截图，不依赖 DOM、accessibility tree 或 selector，icon-only 按钮、<canvas>、原生 App、跨域 iframe 全部可达
  • 跨平台一致：Web、Desktop、Android、iOS、HarmonyOS 共用同一套 API（aiAct / aiQuery / aiAssert），切换平台不改代码
  • 自然语言即脚本：测试用例与自动化指令统一用自然语言描述，无需 XPath/CSS 选择器
  • 可插拔视觉模型：默认支持 Qwen3-VL、Doubao Seed 1.6、GLM-4.6V、Gemini-3-Pro/Flash、UI-TARS-1.5-7B（开源，可自托管）
  • 可观测可重放：每次执行都生成带时间戳的 trace，便于回放与排查

认可度

  • GitHub Stars：主仓库 web-infra-dev/midscene 截至 2026-08-13 约 14,564 stars，#2 No.2 in GitHub Trending
  • GitHub Trending：2026-08-13 出现在 GitHub Trending TypeScript 日榜（11 stars today）
  • Skills 仓库：web-infra-dev/midscene-skills 提供 7 个独立 Skill 子包，供 Claude Code / OpenClaw 一键安装
  • 跨平台覆盖：Web、Chrome Bridge、macOS / Windows / Linux Desktop、Android、iOS、HarmonyOS 六大平台
  • 社区：Discord midscene_ai、X @midscene_ai、飞书交流群、官方文档站 midscenejs.com、DeepWiki 知识图谱
  • 学术引用：2025 论文「Midscene.js: Your AI Operator for Web, Android, iOS, Automation & Testing.」（Xiao Zhou, Tao Yu, YiBing Lin）
  • 生态 SDK：社区已衍生 Python、Java、Vue PC、iOS Mirror 等多语言 SDK 与 Docker 镜像

链接

GitHub：https://github.com/web-infra-dev/midscene-skills

主仓库：https://github.com/web-infra-dev/midscene

原作者

字节跳动 web-infra-dev 团队（与 Rsbuild、Rslib 同厂）。

代表作者：Xiao Zhou、Tao Yu、YiBing Lin——Midscene.js 论文署名作者。

定位：让 AI 直接「看」屏幕操作任何 UI，替代传统 DOM 选择器与 Playwright/Puppeteer 编程范式。

介绍

Midscene.js 是字节跳动 web-infra-dev 团队开源的「视觉驱动 UI 自动化」底层引擎：拿到截图后，由多模态视觉模型识别像素中的可交互元素，把元素坐标、视觉断言结果返回给上层调用方。Midscene Skills 则是把这一能力打包成 7 个独立的 Skill 文件（每个对应一个平台或场景），让 Claude Code、OpenClaw 等 AI Agent 可以通过 npx skills add 一键安装并调用。

整套体系分两层：底层引擎（@midscene/web 等 NPM 包，可被 Playwright、Vitest、Puppeteer 集成）负责截图、模型调用、元素定位；上层 Skills 负责将引擎能力包装成 Agent 可识别的工具描述。两者解耦的好处是：开发者可以单独把 Midscene 加进现有的 E2E 测试套件，也可以让 AI Agent 完全自主地用自然语言驱动测试。

比起传统 Selenium / Playwright，Midscene 的最大差异是「不依赖 DOM」。对于 icon-only 按钮、自定义控件、Canvas 绘制、跨域 iframe、原生 App，DOM 选择器完全失效，而视觉定位仍然可用。Midscene 的官网宣称「if a human can see it, Midscene can target it」。

特点

  • 纯视觉定位：完全基于截图，绕过 DOM / a11y tree 脆弱性问题
  • 跨 6 大平台：Browser、Chrome Bridge、Desktop（macOS / Windows / Linux）、Android、iOS、HarmonyOS 共用一套 API
  • 可插拔视觉模型：Qwen3-VL、Doubao Seed 1.6、GLM-4.6V、Gemini-3、UI-TARS-1.5-7B 等任选
  • 可被 Agent 调用：原生支持 Claude Code、OpenClaw 等通过 Skills / MCP 接入
  • 可观测可重放：每次执行生成 trace，支持回放与回溯调试
  • 零代码体验：Chrome 扩展装上即可在任意网页上直接「说」出自动化指令

使用方法

前置条件：Node.js 18+、MIDSCENE_MODEL_API_KEY / MIDSCENE_MODEL_NAME / MIDSCENE_MODEL_BASE_URL 等环境变量（任选一个支持的视觉模型即可，例：Qwen3-VL 通过 OpenRouter，Gemini-3-Flash 通过 Google API）。

安装 Skills：

# 给 Claude Code 安装
npx skills add web-infra-dev/midscene-skills -a claude-code

# 给 OpenClaw 安装
npx skills add web-infra-dev/midscene-skills -a openclaw

# 安装全部平台 Skills（默认）
npx skills add web-infra-dev/midscene-skills

最小示例（Web 自动化）：

import { chromium } from 'playwright';
import { Midscene } from '@midscene/web';

const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://github.com');

const midscene = new Midscene(page);

// 自然语言直接驱动
await midscene.aiAct('点击右上角的搜索框');
await midscene.aiAct('在搜索框输入 "midscene"');
await midscene.aiAct('按下回车键');

// 自然语言断言
await midscene.aiAssert('搜索结果页第一条是 web-infra-dev/midscene 仓库');

await browser.close();

使用场景与人群

适用场景：

  • Web / 桌面 / 移动端 E2E 测试，特别是面对 icon-only、Canvas、跨域 iframe 等 DOM 难以触达的元素
  • 让 AI Agent 全自主跑完一段用户旅程（注册流程、表单填写、机票预订）
  • 把现有 Playwright / Puppeteer 测试改造为「自然语言脚本」
  • 移动 App / HarmonyOS App 的端到端自动化（覆盖 adb、WebDriverAgent、HDC）
  • 桌面 App 跨平台（macOS / Windows / Linux）自动化

目标用户：

  • 前端 / 客户端 / 移动端 QA 工程师（写 E2E 写烦了）
  • AI Agent 开发者（想让 Agent 真的能操控浏览器和原生 App）
  • 自动化测试团队负责人（追求跨平台覆盖、降低维护成本）
  • 字节 / 阿里 / 腾讯系内部产品团队（多端 UI 自动化统一接入）

输入与输出案例

案例 1：Web 自动化注册 GitHub 账号

输入：

prompt: |
  1. 打开 https://github.com/signup
  2. 在用户名输入框中填写 "test-midscene-2026"
  3. 在邮箱输入框中填写 "test@midscene.dev"
  4. 在密码输入框中填写一个 16 位随机密码
  5. 点击 "Create account" 按钮
  6. 断言页面跳转到 onboarding 页面

输出：

{
  "result": "ok",
  "trace": "trace-2026-08-13-001.zip",
  "steps": [
    { "step": "fill-username", "screenshot": "shot-1.png", "matched_element": { "bbox": [820, 460, 1080, 510] } },
    { "step": "fill-email", "screenshot": "shot-2.png", "matched_element": { "bbox": [820, 560, 1080, 610] } },
    { "step": "fill-password", "screenshot": "shot-3.png", "matched_element": { "bbox": [820, 660, 1080, 710] } },
    { "step": "click-create-account", "screenshot": "shot-4.png", "matched_element": { "bbox": [880, 840, 1020, 880] } }
  ],
  "assertions": [
    { "name": "onboarding-redirect", "passed": true }
  ]
}

案例 2：Android 端自动下单咖啡

输入：

platform: android
device: emulator-5554
prompt: |
  1. 打开「美团」App
  2. 点击底部 Tab「外卖」
  3. 在搜索框输入 "星巴克"
  4. 点击第一家门店
  5. 选择「大杯热拿铁」
  6. 点击「立即购买」
  7. 断言出现「选择收货地址」页面

输出（节选）：

{
  "result": "ok",
  "platform": "android",
  "matched_actions": [
    { "step": "open-meituan", "method": "aiAct", "model": "qwen3-vl-235b-a22b-instruct", "tokens": 1820 },
    { "step": "search-starbucks", "method": "aiAct", "matched_element": { "bbox": [60, 180, 1020, 260] } },
    { "step": "choose-latte", "method": "aiAct", "matched_element": { "bbox": [120, 720, 960, 800] } }
  ],
  "assertions": [
    { "name": "address-page-shown", "passed": true, "evidence": "shot-7.png" }
  ]
}

GitHub: https://github.com/web-infra-dev/midscene-skills

评论区

0 条评论

登录后可评论。

Skill超级捕获手 795 阅读