From a7104aa4eb4c3e62429dad27bdffbde9f39872d0 Mon Sep 17 00:00:00 2001
From: 7418 <7418@openclaw.ai>
Date: Wed, 4 Mar 2026 19:50:18 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E9=9B=86=E6=88=90=20chrome-devtools?=
 =?UTF-8?q?=20MCP=20+=20UI=20=E9=AA=8C=E8=AF=81=E8=A7=84=E5=88=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

.mcp.json（新建）:
- 添加 chrome-devtools MCP server（stdio 模式，npx chrome-devtools-mcp@latest）
- 签入仓库使团队成员 clone 后自动启用

CLAUDE.md:
- 新增"UI 改动必须用 CDP 验证"规则：
  修改组件/样式/布局后，通过 chrome-devtools MCP 截图确认渲染正确、
  检查 console 无报错、模拟交互验证、响应式布局用 device emulation 验证

目的：建立 UI 改动的自动化视觉验证闭环，
AI 修改前端代码后自动启动浏览器截图检查，而非仅靠 typecheck 判断正确性。

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .mcp.json | 13 +++++++++++++
 CLAUDE.md |  6 ++++++
 2 files changed, 19 insertions(+)
 create mode 100644 .mcp.json

diff --git a/.mcp.json b/.mcp.json
new file mode 100644
index 0000000..ec1ba23
--- /dev/null
+++ b/.mcp.json
@@ -0,0 +1,13 @@
+{
+  "mcpServers": {
+    "chrome-devtools": {
+      "type": "stdio",
+      "command": "npx",
+      "args": [
+        "-y",
+        "chrome-devtools-mcp@latest"
+      ],
+      "env": {}
+    }
+  }
+}
\ No newline at end of file
diff --git a/CLAUDE.md b/CLAUDE.md
index ad23de3..f133a5a 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -12,6 +12,12 @@ CodePilot — Claude Code 的桌面 GUI 客户端，基于 Electron + Next.js。
 - 涉及构建/打包的改动需要完整执行一次打包流程验证产物可用
 - 涉及多平台的改动需要考虑各平台的差异性
 
+**UI 改动必须用 CDP 验证（chrome-devtools MCP）：**
+- 修改组件、样式、布局后，必须通过 chrome-devtools MCP 实际验证效果
+- 验证流程：`npm run dev` 启动应用 → 用 CDP 打开 `http://localhost:3000` 对应页面 → 截图确认渲染正确 → 检查 console 无报错
+- 涉及交互的改动（按钮、表单、导航）需通过 CDP 模拟点击/输入并截图验证
+- 修改响应式布局时，用 CDP 的 device emulation 分别验证桌面和移动端视口
+
 **新增功能前必须详尽调研：**
 - 新增功能前必须充分调研相关技术方案、API 兼容性、社区最佳实践
 - 涉及 Electron API 需确认目标版本支持情况