mobile-mcp-validator - 移動開發MCP驗證工具，解決AI助手編碼問題，支持多平臺

探索

Mobile MCP Validator

移動開發MCP驗證工具，通過強制任務規劃、代碼質量檢查和UI/UX規範執行，解決AI助手'隨意編碼'問題，支持Flutter、React Native、iOS和Android平臺

開發者工具人工智能聊天機器人 #代碼質量檢查 #UI/UX規範 #任務規劃 #移動開發

評分 : 2分

下載量 : 5.6K

更新時間 : 2025-12-29

打開站點

什麼是Mobile MCP Validator?

Mobile MCP Validator是一個專門為移動開發設計的AI助手監管工具。它通過Model Context Protocol (MCP)集成到Cursor IDE中，在AI編寫代碼時即時驗證代碼質量，確保AI助手遵循專業的開發規範，而不是隨意編寫代碼。

如何使用Mobile MCP Validator?

安裝後，Mobile MCP Validator會自動在後臺工作。當AI助手嘗試編寫或修改移動應用代碼時，它會檢查代碼是否符合預設規則，如文件大小限制、架構分離、UI狀態完整性等。如果發現問題，它會阻止AI繼續，直到問題被修復。

適用場景

適用於所有使用AI助手進行移動開發的場景，特別是： 1. 使用Cursor IDE進行Flutter、React Native、iOS或Android開發 2. 團隊希望保持代碼質量和一致性 3. 防止AI助手破壞現有架構 4. 確保UI/UX符合專業標準

主要功能

強制任務規劃

要求AI在開始編碼前創建詳細的任務計劃，防止隨意修改代碼

代碼質量驗證

自動檢查代碼質量，包括文件大小、函數複雜度、架構分離等

破壞性變更檢測

檢測AI是否意外修改了不應更改的代碼，防止破壞現有功能

UI/UX最佳實踐

內置完整的UI/UX設計指南，確保AI創建的界面專業且一致

多平臺支持

支持Flutter、React Native、iOS原生和Android原生開發

阻止式驗證

發現嚴重問題時阻止AI繼續編碼，直到問題被修復

優勢

防止AI隨意修改代碼，保持代碼庫的穩定性

強制執行專業開發規範，提升代碼質量

減少代碼審查時間，AI生成的代碼更符合團隊標準

支持多種移動開發框架，適用範圍廣

內置UI/UX指南，確保界面設計的一致性

侷限性

需要配置和集成到開發環境中

對於非常規項目可能需要調整驗證規則

可能增加AI編碼的初始規劃時間

如何使用

克隆倉庫

將Mobile MCP Validator項目克隆到本地

配置Cursor IDE

編輯Cursor的MCP配置文件，添加Mobile MCP Validator服務器

添加服務器配置

在配置文件中添加Mobile MCP Validator的啟動命令

重啟Cursor

重啟Cursor IDE使配置生效

項目配置（可選）

在項目中創建配置文件來自定義驗證規則

使用案例

案例1：添加新功能頁面

AI需要添加一個新的用戶個人資料頁面

案例2：修復現有功能

AI需要修改現有的設置頁面

案例3：重構複雜代碼

AI需要重構一個過於複雜的組件

常見問題

Mobile MCP Validator會影響編碼速度嗎？

支持哪些移動開發框架？

如何自定義驗證規則？

MCP驗證失敗會怎樣？

需要網絡連接嗎？

🚀 移動MCP驗證器

移動MCP驗證器能夠阻止AI“隨意編碼”，助力規範的移動開發。

🚀 快速開始

1. 克隆倉庫

git clone https://github.com/emran1993/mobile-mcp-validator.git
cd mobile-mcp-validator
dart pub get

2. 添加到Cursor

將以下內容添加到你的 ~/.cursor/mcp.json 文件中：

{
  "mcpServers": {
    "mobile-mcp-validator": {
      "command": "dart",
      "args": ["run", "/path/to/mobile-mcp-validator/bin/mobile_mcp_validator.dart"]
    }
  }
}

3. 重啟Cursor

完成以上步驟！MCP現在將保護你的代碼庫。

✨ 主要特性

🎯 任務規劃（杜絕隨意更改）

AI在編碼前必須制定計劃：

用戶：“添加一個設置屏幕”

AI調用：create_task_plan()

→ 任務1：分析現有模式
→ 任務2：創建設置控制器
→ 任務3：構建包含所有UI狀態的設置屏幕
→ 任務4：運行驗證
→ 任務5：驗證代碼質量

🚫 錯誤攔截（強制修復）

當AI出錯時，它將被攔截：

{
  "success": false,
  "isBlocking": true,
  "message": "BLOCKING: 文件超過300行（當前：425行）",
  "fixSuggestion": "拆分為更小的模塊..."
}

AI必須修復問題才能繼續。

🔍 變更檢測

在修改現有代碼之前：

AI會對當前狀態進行“快照”
修改後，進行比較以檢測意外修改
如果類、方法或API被意外刪除，會發出警報

🎨 UI/UX最佳實踐

內置全面的指南：

設計原則 — 視覺層次、間距、一致性
顏色系統 — 調色板、暗黑模式、對比度
排版 — 字體大小、粗細、可讀性
8pt網格系統 — 一致的間距
動畫 — 時間、緩動、微交互
可訪問性 — 觸摸目標、屏幕閱讀器、對比度

📦 安裝指南

克隆倉庫

git clone https://github.com/emran1993/mobile-mcp-validator.git
cd mobile-mcp-validator
dart pub get

添加到Cursor

將配置添加到 ~/.cursor/mcp.json 文件：

{
  "mcpServers": {
    "mobile-mcp-validator": {
      "command": "dart",
      "args": ["run", "/path/to/mobile-mcp-validator/bin/mobile_mcp_validator.dart"]
    }
  }
}

重啟Cursor

完成上述步驟後，MCP將開始保護你的代碼庫。

💻 使用示例

配置 `flutter_guardian.yaml`

在你的項目中創建 flutter_guardian.yaml 文件：

rules:
  max_file_lines: 300
  max_build_method_lines: 120
  max_function_lines: 50

architecture:
  pattern: feature_first
  require_separation: true

testing:
  require_ui_states:
    - loading
    - error
    - empty
    - success

安裝預提交鉤子

在每次提交代碼前驗證代碼：

dart run mobile_mcp_validator:pre_commit --install

📚 詳細文檔

🎯 解決的問題

在經歷了8年的移動開發後，我發現AI編碼助手存在一個反覆出現的問題：

“隨意編碼” — AI編寫的代碼零散、缺乏規劃，會破壞現有代碼，忽視模式，並且生成的UI顯得業餘。

這種情況是否似曾相識？AI存在以下問題：

❌ 無計劃地直接開始編碼
❌ 修改不應修改的內容
❌ 忽視你的架構模式
❌ 創建不一致、不專業的UI
❌ 忘記處理加載、錯誤和空狀態
❌ 生成的文件超過500行

我開發了移動MCP驗證器來解決這個問題。

💡 解決方案

移動MCP驗證器是一個適用於 Cursor IDE 的 MCP（模型上下文協議）服務器，它就像你移動代碼庫的守護者。

它強制AI做到以下幾點：

之前	之後（使用MCP）
直接開始編碼	✅ 先創建任務計劃
隨意進行更改	✅ 驗證每一處更改
忽視文件大小限制	✅ 阻止超過300行的文件
忘記UI狀態	✅ 要求處理加載/錯誤/空/成功狀態
破壞現有代碼	✅ 檢測破壞性更改
生成醜陋的UI	✅ 遵循UI/UX最佳實踐

📱 支持的平臺

該工具適用於所有移動開發框架：

平臺	語言	代碼檢查集成
💙 Flutter	Dart	`flutter analyze`
⚛️ React Native	JavaScript、TypeScript	ESLint
🍎 iOS原生	Swift、Objective - C	SwiftLint
🤖 Android原生	Kotlin、Java	ktlint

🛠️ 工具

任務規劃

工具	功能
`create_task_plan`	編碼前創建清單
`validate_task_completion`	確保所有任務完成
`update_task_status`	跟蹤進度

代碼質量

工具	功能
`validate_file_size`	阻止超過300行的文件
`validate_function_complexity`	阻止超過50行的函數
`validate_widget_complexity`	阻止超過120行的構建方法
`find_business_logic_in_widgets`	檢測業務邏輯是否混入UI

變更檢測

工具	功能
`snapshot_ui_state`	變更前捕獲狀態
`detect_breaking_changes`	查找意外修改
`find_affected_usages`	列出使用某個文件的所有代碼

平臺分析

工具	功能
`detect_project_framework`	自動檢測Flutter/RN/iOS/Android
`run_project_analysis`	自動運行正確的代碼檢查器
`validate_ios_config`	檢查Info.plist、Podfile
`validate_android_config`	檢查AndroidManifest、Gradle

🎨 UI/UX指南

MCP包含用於構建精美應用的全面資源：

資源	描述
`uiux://design-principles`	專業UI的核心原則
`uiux://color-system`	顏色、主題、暗黑模式
`uiux://typography`	字體選擇和層次結構
`uiux://spacing-layout`	8pt網格系統
`uiux://animations`	動畫和微交互
`uiux://accessibility`	包容性設計指南
`uiux://platform-guidelines`	iOS人機界面指南和Material Design
`uiux://common-mistakes`	應避免的反模式

⚙️ 配置

在項目中創建 flutter_guardian.yaml 文件：

rules:
  max_file_lines: 300
  max_build_method_lines: 120
  max_function_lines: 50

architecture:
  pattern: feature_first
  require_separation: true

testing:
  require_ui_states:
    - loading
    - error
    - empty
    - success

🔒 預提交鉤子

在每次提交代碼前驗證代碼：

dart run mobile_mcp_validator:pre_commit --install

👨‍💻 關於作者


	### 埃姆蘭·謝赫·艾哈邁德 SolarEdge高級軟件工程師 🚀 8年以上移動開發經驗 📱 專注於 Flutter、iOS 和 Android 💡 熱衷於代碼質量、架構和開發者體驗 🎯 開發此MCP以解決AI助手常見的“隨意編碼”問題

開發原因

“在多年開發移動應用後，我明白業餘代碼和專業代碼的區別不僅在於功能，更在於規範。編碼前進行規劃，遵循一致的模式，採用簡潔的架構，設計美觀、可訪問的UI。

當AI助手開始輔助編碼時，我發現它們往往缺乏這種規範。它們會無計劃地直接開始編碼，創建龐大的文件，忽視模式，並且生成不一致的UI。

移動MCP驗證器就是我的解決方案。它將資深開發者的規範引入AI輔助編碼。這是我入行時希望擁有的守護者 —— 現在它為所有人所用。”

— 埃姆蘭·謝赫·艾哈邁德