chore: 集成 chrome-devtools MCP + UI 验证规则

.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

@@ -0,0 +1,13 @@
+{
+  "mcpServers": {
+    "chrome-devtools": {
+      "type": "stdio",
+      "command": "npx",
+      "args": [
+        "-y",
+        "chrome-devtools-mcp@latest"
+      ],
+      "env": {}
+    }
+  }
+}

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 需确认目标版本支持情况