前言

在 Vibe Coding 时代，AI 已经能帮我们写代码了。但有一个问题一直没解决：AI 能测试你的 App 吗？

不是跑单元测试，而是真正像用户一样：点按钮、输入文字、滑动页面、截图验证结果。

flutter-skill 就是为此而生的开源工具。它是一个 MCP (Model Context Protocol) 服务器，让 Claude、Cursor、Windsurf 等 AI 工具直接操控你的应用 UI。

GitHub: https://github.com/ai-dashboad/flutter-skill

核心亮点

• 255 个 MCP 工具：涵盖 tap、type、scroll、screenshot、snapshot、upload_file、Shadow DOM 穿透、网络拦截、API 测试等
• 10 个平台：Flutter iOS/Android/Web、Electron、Tauri、KMP、React Native、.NET MAUI、Web CDP、iOS Native
• 656/664 测试通过（98.8%）：全部由 AI 驱动，零手写测试代码
• snapshot() 节省 99% Token：相比截图，无障碍树文本表示极其高效，这也是微软 Playwright MCP 在 README 中承认的痛点
• 30 秒集成：flutter-skill init 自动检测框架并注入 Bridge SDK

与竞品对比

快速上手

安装

# npm
npm i -g flutter-skill-mcp

# Homebrew
brew tap nicholasmurray/tap
brew install flutter-skill

# 或者直接用 Dart
dart pub global activate flutter_skill

浏览器自动化（零配置）

# 启动 serve 模式，连接到任意网站
flutter-skill serve https://your-app.com --port=3000

# AI 现在可以通过 MCP 协议控制浏览器了
# snapshot() 返回无障碍树，比截图节省 99% token

App 测试（30 秒集成）

# 自动检测框架，注入 Bridge SDK
flutter-skill init

# 启动 demo 验证
flutter-skill demo

# 在 Claude/Cursor 的 MCP 配置中添加 flutter-skill
# 然后对 AI 说："测试登录流程"

新功能：QR 码扫码登录自动化

v0.9.6 新增 qr_login_start 和 qr_login_wait 工具，支持任何需要扫码登录的平台（微信、CSDN、知乎、钉钉等）：

1. AI 调用 qr_login_start → 自动检测页面上的二维码并截图
2. AI 将图片发到 Telegram/聊天 → 用户手机扫码
3. AI 调用 qr_login_wait → 自动检测登录成功（URL 变化、Cookie 变化、二维码消失）

技术架构

flutter-skill 采用 WebSocket JSON-RPC 2.0 协议：

• Bridge SDK：嵌入到目标 App 中，暴露 UI 树和操作接口
• MCP Server：Dart 编写，处理 AI 工具调用请求
• CDP Driver：直接通过 Chrome DevTools Protocol 操控浏览器

为什么选 WebSocket？双向通信、有状态连接、跨平台通用、JSON 可读可调试。HTTP 轮询慢 10x，gRPC 集成难 10x。

性能数据

• tap 操作：1ms
• CDP 连接：93ms
• snapshot：2ms
• screenshot：31ms

总结

flutter-skill 填补了 AI 辅助开发的最后一块拼图：让 AI 不仅能写代码，还能测试代码。

255 个工具、10 个平台、656 个测试、MIT 开源。

⭐ 如果觉得有用，欢迎 Star：https://github.com/ai-dashboad/flutter-skill