Flutter Skill

🚀 flutter-skill

flutter-skill 可以让任何 AI 智能体在运行的应用程序中拥有视觉和交互能力。它支持 10 个平台，无需编写测试代码，仅需一个 MCP 服务器即可。

🚀 快速开始

1. 安装（30 秒）

npm install -g flutter-skill

2. 添加到你的 AI（复制粘贴到 MCP 配置中）

{
  "mcpServers": {
    "flutter-skill": {
      "command": "flutter-skill",
      "args": ["server"]
    }
  }
}

支持 Claude Desktop、Cursor、Windsurf、Copilot、Cline、OpenClaw 等任何兼容 MCP 的智能体。

3. 添加到你的应用（Flutter 只需 2 行代码）

import 'package:flutter_skill/flutter_skill.dart';

void main() {
  if (kDebugMode) FlutterSkillBinding.ensureInitialized();
  runApp(MyApp());
}

4. 测试 — 直接与你的 AI 对话

"启动我的应用，探索每个屏幕，并报告任何错误"

就是这么简单。无需配置，无需测试代码，整个过程在 60 秒内完成。

✨ 主要特性

• 连接任意 AI 智能体：通过 MCP 直接将任何 AI 智能体（Claude、Cursor、Windsurf、Copilot、OpenClaw 等）连接到你正在运行的应用程序。
• 智能体可查看屏幕：智能体可以像不知疲倦的人类测试人员一样，点击按钮、输入文本、滚动页面和导航。
• 无需测试代码：无需使用 Page Objects、XPath 或脆弱的选择器，只需用普通英语描述测试任务。
• 零配置：只需两行代码，即可在所有 10 个平台上运行。

💻 使用示例

基础用法

# 让 AI 自动探索应用并查找错误
flutter-skill explore https://my-app.com --depth=3

# 进行猴子/模糊测试，执行随机操作并检测崩溃
flutter-skill monkey https://my-app.com --actions=100 --seed=42

# 并行多平台测试
flutter-skill test --url https://my-app.com --platforms web,electron,android

# 零配置 WebMCP 服务器，使任何网站都可测试
flutter-skill serve https://my-app.com

高级用法

// 批量操作示例
{"actions": [
  {"type": "fill", "target": "input:Coupon Code", "value": "SAVE20"},
  {"type": "tap", "target": "button:Apply"},
  {"type": "tap", "target": "button:Checkout"},
  {"type": "fill", "target": "input:Email", "value": "test@example.com"},
  {"type": "tap", "target": "button:Continue"}
]}

📚 详细文档

与 AI 平台结合使用

MCP 服务器模式（IDE 集成）

适用于任何兼容 MCP 的 AI 工具，只需一行配置：

{
  "mcpServers": {
    "flutter-skill": {
      "command": "flutter-skill",
      "args": ["server"]
    }
  }
}

HTTP 服务模式（CLI 和自动化）

适用于独立的浏览器自动化、CI/CD 管道或远程访问：

# 启动服务器
flutter-skill serve https://your-app.com

# 使用 CLI 客户端命令
flutter-skill nav https://google.com
flutter-skill snap                    # 可访问性树（减少 99% 的令牌）
flutter-skill screenshot /tmp/ss.jpg
flutter-skill tap "Login"
flutter-skill type "hello@example.com"
flutter-skill eval "document.title"
flutter-skill tools                   # 列出所有可用工具

支持 --port=N、--host=H 标志以及 FS_PORT/FS_HOST 环境变量。

两种模式对比

完整的 CLI 客户端参考：docs/CLI_CLIENT.md

支持 10 个平台

大多数测试工具仅支持 1 - 2 个平台，而 flutter-skill 支持 10 个平台：

总计：656/664 个测试通过（98.8%）——每个平台都针对一个包含 50 多个元素的复杂社交媒体应用进行了测试。

性能表现

针对复杂社交媒体应用的自动化测试运行的真实基准测试结果：

令牌效率：snapshot() 返回结构化的元素树，而不是图像，与向 AI 智能体发送截图相比，减少 87 - 99% 的令牌。

速度有多快：一次 tap 操作的端到端时间仅为 1 - 2 毫秒。像 Playwright 和 Selenium 这样的浏览器自动化工具通常需要 50 - 100 毫秒才能完成相同的操作。这意味着 flutter-skill 快 50 - 100 倍，因为它直接与应用程序运行时通信，而无需通过 WebDriver 或 CDP 间接通信。

复杂 DOM 网站（真实世界场景）

对 15 个 MCP 工具在生产网站上进行了测试，75/75 通过，无超时情况：

总时间包括页面加载时间。即使在复杂 DOM 网站上，工具执行时间也始终低于 100 毫秒。

与其他工具对比

flutter-skill 是唯一一款跨移动、Web 和桌面平台的原生 AI 端到端测试工具，其工具数量是最接近的竞争对手的 7 倍。

支持的操作

查看

• screenshot — 捕获屏幕
• inspect_interactive — 获取所有可点击/可输入元素及其语义引用
• find_element / wait_for_element
• get_elements — 获取完整的元素树

交互

• tap / long_press / swipe / drag
• enter_text / set_text / clear_text
• scroll — 支持所有方向滚动
• go_back / press_key

检查（v0.8.0）

• 语义引用：button:Login, input:Email
• 在 UI 更改时保持稳定
• tap(ref: "button:Submit")
• 支持 7 种角色：按钮、输入框、开关、滑块、选择框、链接、项目

控制

• launch_app — 以不同的版本启动应用
• hot_reload / hot_restart
• get_logs / get_errors
• scan_and_connect — 自动查找应用

平台设置

dependencies:
  flutter_skill: ^0.9.7

import 'package:flutter_skill/flutter_skill.dart';

void main() {
  if (kDebugMode) FlutterSkillBinding.ensureInitialized();
  runApp(MyApp());
}

npm install flutter-skill-react-native

import FlutterSkill from 'flutter-skill-react-native';
FlutterSkill.start();

npm install flutter-skill-electron

const { FlutterSkillBridge } = require('flutter-skill-electron');
FlutterSkillBridge.start(mainWindow);

// Swift Package Manager: FlutterSkillSDK
import FlutterSkill
FlutterSkillBridge.shared.start()

Text("Hello").flutterSkillId("greeting")

implementation("com.flutterskill:flutter-skill:0.8.0")

FlutterSkillBridge.start(this)

[dependencies]
flutter-skill-tauri = "0.8.0"

示例提示

只需告诉 AI 要测试的内容：

🔧 技术细节

减少 95% 的令牌使用

大多数 AI 测试工具会向大语言模型发送 截图，每张截图大约需要 4000 个令牌。而 flutter-skill 使用 Chrome 的 可访问性树 为 AI 提供任何页面的紧凑语义摘要：

// 页面摘要 → 约 200 个令牌（相比截图的约 4000 个令牌）
{
  "title": "购物车",
  "nav": ["主页", "产品", "购物车", "账户"],
  "forms": [{"输入框:优惠券代码": "文本"}],
  "buttons": ["应用", "结算", "继续购物"],
  "特性": {"搜索": true, "分页": true},
  "链接": 47, "输入框": 3
}

然后在一次调用中批量执行多个操作：

// 探索操作 → 每次调用执行 5 个操作（相比每次调用执行 1 个工具操作）
{"actions": [
  {"type": "填充", "目标": "输入框:优惠券代码", "值": "SAVE20"},
  {"type": "点击", "目标": "按钮:应用"},
  {"type": "点击", "目标": "按钮:结算"},
  {"type": "填充", "目标": "输入框:电子邮件", "值": "test@example.com"},
  {"type": "点击", "目标": "按钮:继续"}
]}

结果：你的 AI 智能体测试速度更快，成本更低，并且比基于截图的工具更能理解页面。

📄 许可证

MIT License © 2025

贡献指南

请参阅 CONTRIBUTING.md 获取贡献指南。

git clone https://github.com/ai-dashboad/flutter-skill
cd flutter-skill
dart pub get
dart run bin/flutter_skill.dart server  # 启动 MCP 服务器

相关链接

⭐ 如果 flutter-skill 为你节省了时间，请给项目点个星，让更多人发现它！