MCP Component Review

MCP组件审查

用于查看React组件更改的MCP（模型上下文协议）服务器。分析结构差异，生成视觉差异，并根据Figma设计验证实现。

特性

• 结构分析：解析React组件（TSX/JSX）并提取props、children和样式
• 风格检测：支持Tailwind CSS、样式化组件和CSS模块
• 视觉差异：截图组件并生成像素级差异图像
• Figma集成：提取设计规范并验证实施合规性
• 分行审查：分析git分支中所有更改的组件

安装

git clone https://github.com/yourusername/mcp-component-review.git
cd mcp-component-review
npm install
npm run build

用法

使用克劳德桌面

添加到您的 claude_desktop_config.json:

{
  "mcpServers": {
    "component-review": {
      "command": "node",
      "args": ["/path/to/mcp-component-review/dist/index.js"]
    }
  }
}

使用克劳德代码

claude mcp add component-review node /path/to/mcp-component-review/dist/index.js

可用工具

analyze_component

分析单个React组件文件。

analyze_component({
  file: "/path/to/Button.tsx"
})

输出：

• 组件名称和道具
• 组件树结构
• 提取的样式（颜色、间距、排版）

compare_components

比较两个组件文件并获得结构化差异。

compare_components({
  oldFile: "/path/to/Button.old.tsx",
  newFile: "/path/to/Button.new.tsx"
})

输出：

• 文本内容更改
• 子组件的添加/删除
• 道具更改
• 风格变化（颜色、间距、排版）

visual_diff_components

生成视觉差异截图。

visual_diff_components({
  oldFile: "/path/to/Button.old.tsx",
  newFile: "/path/to/Button.new.tsx",
  outputDir: "/path/to/output"
})

输出：

• 新旧组件的屏幕截图
• Diff图像突出显示更改
• 组合并排视图

get_figma_specs

从Figma中提取设计规范。

get_figma_specs({
  figmaUrl: "https://www.figma.com/file/ABC123/Design?node-id=1:2",
  figmaToken: "figd_xxxxx"
})

输出：

• 尺寸（宽、高）
• 间距（填充、边距、间隙）
• 颜色（背景、文本、边框）
• 排版（字体大小、字体粗细、行高）
• 边框（半径、宽度）

validate_design_implementation

将Figma规范与实现进行比较。

validate_design_implementation({
  figmaUrl: "https://www.figma.com/file/ABC123/Design?node-id=1:2",
  figmaToken: "figd_xxxxx",
  componentFile: "/path/to/Button.tsx",
  tolerance: 2
})

输出：

# Design Validation Report: Button

## Summary ⚠️
- **Score**: 75%
- **Matches**: 6/8
- **Mismatches**: 2

## Validation Details

| Property      | Figma     | Implementation       | Status     |
|---------------|-----------|----------------------|------------|
| padding-top   | 8px       | 8px (p-2)            | ✅ match   |
| background    | #22C55E   | #16A34A (bg-green-600)| ❌ mismatch|
| font-size     | 16px      | 18px (text-lg)       | ❌ mismatch|

review_branch

查看git分支中所有更改的组件。

review_branch({
  repoPath: "/path/to/repo",
  baseBranch: "main",
  targetBranch: "feature/new-button",
  figmaToken: "figd_xxxxx",
  figmaFileKey: "ABC123",
  figmaMapping: {
    "src/components/Button.tsx": "1:234",
    "src/components/Card.tsx": "1:567"
  },
  outputDir: "/path/to/visual-diffs"
})

输出：

• 所有更改组件的摘要
• 每个组件的结构分析
• 修改后的组件的视觉差异
• Figma验证分数

validate_and_fix

验证组件并获取自动修复说明。如果组件与Figma不匹配，则返回所需的确切Tailwind/CSS更改。

validate_and_fix({
  figmaUrl: "https://www.figma.com/file/ABC123/Design?node-id=1:2",
  figmaToken: "figd_xxxxx",
  componentFile: "/path/to/Button.tsx"
})

输出（需要修复时）：

🔧 **AUTO-FIX REQUIRED** for `src/Button.tsx`

Current design compliance: **62%**

## Required Changes

### 🔴 Missing (High Priority)
- **gap**: Add `gap-2`
  - Expected: `8px`

### 🟡 Mismatches (Medium Priority)
- **background**: Change to `bg-green-500`
  - Current: `bg-green-600`
  - Expected: `#22C55E`
- **font-size**: Change to `text-base`
  - Current: `text-lg`
  - Expected: `16px`

## Instructions

1. Open `src/Button.tsx`
2. Find the className or styled-components styles
3. Apply the following Tailwind class changes:

添加/替换：gap-2 bg-green-500文本库

4. Save the file
5. Run validation again to confirm compliance

此输出旨在由AI代理直接操作，以自动修复问题。

获取Figma代币

1. 前往Figma→ 设置→ 账户
2. 滚动到“个人访问令牌”
3. 点击“创建新令牌”
4. 复制令牌（以开头 figd_)

工作流示例

设计评审自动化

// 1. Get the Figma specs for a component
const specs = await get_figma_specs({
  figmaUrl: "https://www.figma.com/file/ABC/Design?node-id=1:2",
  figmaToken: process.env.FIGMA_TOKEN
});

// 2. Validate the implementation
const validation = await validate_design_implementation({
  figmaUrl: "https://www.figma.com/file/ABC/Design?node-id=1:2",
  figmaToken: process.env.FIGMA_TOKEN,
  componentFile: "src/components/Button.tsx"
});

// 3. If there are visual changes, generate a diff
const visualDiff = await visual_diff_components({
  oldFile: "src/components/Button.old.tsx",
  newFile: "src/components/Button.tsx",
  outputDir: "./review-output"
});

PR审核自动化

// Review all components changed in a PR
const review = await review_branch({
  repoPath: ".",
  baseBranch: "main",
  targetBranch: "HEAD",
  figmaToken: process.env.FIGMA_TOKEN,
  figmaFileKey: "ABC123",
  figmaMapping: {
    "src/components/Button.tsx": "1:234"
  }
});

发展

# Install dependencies
npm install

# Build
npm run build

# Run in development mode
npm run dev

许可证

麻省理工学院

贡献

欢迎投稿！在提交PR之前，请阅读投稿指南。