MCP服务器设计批评
  ](https://nodejs.org)
一个模型上下文协议（MCP）服务器，提供全面的视觉设计分析和评论功能。该服务器使AI助手能够分析设计图像的构图、色彩和谐、排版和可访问性合规性。
特性
- 综合设计评论：分析整体设计质量，并提出可操作的建议
- 颜色分析：提取调色板、分析和谐度并检查对比度
- 成分分析：评估视觉平衡、网格对齐和布局结构
- 排版分析：评估字体层次结构、可读性和一致性
- 无障碍合规性：WCAG 2.1与色盲模拟的合规性检查
- 多格式支持：适用于网络、移动、印刷和一般设计格式
- 实时分析：采用优化算法的快速图像处理
先决条件
- Node.js 18或更高版本
- npm或yarn包管理器
- 画布依赖项（自动安装）
安装
Cursor的快速安装
*注意：安装后，将文件路径更新到实际的安装目录。*
手动安装
- 克隆存储库：
git clone https://github.com/haasonsaas/design-critique-mcp.git
cd design-critique-mcp- 安装依赖项：
npm install- 构建项目：
npm run build配置
Claude桌面配置
添加到您的Claude Desktop配置(~/Library/Application Support/Claude/claude_desktop_config.json):
{
"mcpServers": {
"design-critique": {
"command": "node",
"args": ["/path/to/design-critique-mcp/dist/index.js"]
}
}
}可用工具
critic_design
提供全面的设计评论和视觉分析，包括构图、色彩和谐、排版和可访问性。
参数：
image_data（必填）：Base64编码图像数据design_type：设计类型-"web","mobile","print"，或"general"（默认值："web")target_audience：目标受众描述（可选）brand_guidelines：品牌指南对象（可选）
- colors：十六进制格式的品牌颜色数组 - fonts：品牌字体名称数组
退货： 综合分析包括：
- 总得分（0-100）
- 平衡和网格对齐的成分分析
- 基于和谐分数和调色板的色彩分析
- 基于层次结构和可读性评分的排版评估
- 符合WCAG标准的无障碍报告
- 可采取行动的建议
分析颜色方案
分析设计中的调色板和和谐。
参数：
image_data（必填）：Base64编码图像数据
退货：
- 带有十六进制代码的主色
- 色彩和谐分析
- 对比问题
- 颜色关系（互补、相似等）
分析布局
分析视觉构图和布局结构。
参数：
image_data（必填）：Base64编码图像数据design_type：设计类型-"web","mobile","print"，或"general"（默认值："web")
退货：
- 布局得分（0-100）
- 平衡评估（对称/非对称）
- 网格对齐检测
- 视觉层次分析
- 空白评估
分析理论
分析排版层次、可读性和字体使用情况。
参数：
image_data（必填）：Base64编码图像数据
退货：
- 检测到的字体数量和系列
- 层次结构得分（0-100）
- 可读性得分（0-100）
- 排版问题和建议
分析可访问性
分析设计可访问性，包括对比度、色盲和WCAG合规性。
参数：
image_data（必填）：Base64编码图像数据
退货：
- 无障碍评分（0-100）
- 对比度检查
- 色盲模拟结果
- WCAG合规问题
- 无障碍建议
check_color_contrast
检查两种特定颜色之间的对比度。
参数：
foreground（必填）：十六进制格式的前景颜色（例如，“#000000”）background（必填）：十六进制格式的背景颜色（例如“#ffffff”）
退货：
- 对比度
- WCAG AA合规性（通过/失败）
- WCAG AAA合规性（通过/失败）
- 推荐使用案例
示例用法
基础设计评论
// In Claude Desktop
const result = await critique_design({
image_data: "base64_encoded_image_data_here",
design_type: "web",
target_audience: "Young professionals aged 25-35"
});检查特定颜色对比度
const contrast = await check_color_contrast({
foreground: "#333333",
background: "#f0f0f0"
});
// Returns: { ratio: 11.2, passes_aa: true, passes_aaa: true }分析移动应用程序设计
const analysis = await critique_design({
image_data: "base64_encoded_image_data",
design_type: "mobile",
brand_guidelines: {
colors: ["#FF5722", "#00BCD4", "#FFC107"],
fonts: ["Roboto", "Open Sans"]
}
});用例
设计检查
- 自动化设计质量评估
- 跨设计系统的一致性检查
- 发射前设计验证
可访问性审计
- WCAG合规性验证
- 颜色对比验证
- 色盲影响评估
设计教育
- 通过AI反馈学习设计原则
- 理解构图和色彩理论
- 改进排版选择
品牌合规性
- 根据品牌指南检查设计
- 确保一致的视觉语言
- 验证调色板使用情况
发展
# Run in development mode
npm run dev
# Run tests
npm test
# Lint code
npm run lint
# Type check
npm run typecheck建筑
服务器使用具有专用分析器的模块化架构：
┌─────────────────┐ ┌──────────────────┐ ┌─────────────────┐
│ MCP Client │────▶│ Design Analysis │────▶│ Analyzers │
│ (Claude) │ │ Server │ │ - Color │
│ │◀────│ │ │ - Composition │
└─────────────────┘ └──────────────────┘ │ - Typography │
│ - Accessibility│
└─────────────────┘图像处理
- 支持常见的图像格式（PNG、JPEG、WebP）
- 自动图像优化，处理速度更快
- 最大图像大小：10MB
- 建议分辨率：1920x1080用于网页设计
演出
- 平均分析时间：每张图像2-5秒
- 并发请求处理
- 内存高效的图像处理
- 用于重复分析的缓存
故障排除
“图像数据无效”
- 确保图像正确进行base64编码
- 检查是否支持图像格式
- 验证图像大小是否小于10MB
“找不到画布”错误
- 跑
npm install canvas安装本机依赖项 - 在macOS上：可能需要安装Cairo图形库
- 在Linux上：安装所需的系统依赖项
分析耗时过长
- 处理大图像可能需要更长的时间
- 在分析之前考虑调整图像大小
- 检查系统资源（CPU/内存）
贡献
- 分叉存储库
- 创建要素分支
- 进行更改
- 添加新功能的测试
- 提交拉取请求
许可证
此项目根据MIT许可证获得许可-请参阅 许可证 文件以获取详细信息。
作者
乔纳森·哈斯 -
致谢
- 通过MCP与Anthropic的Claude集成
- 使用sharp进行图像处理
- 由色度js提供支持，用于颜色分析
- 使用Tesseract.js进行排版检测
- WCAG 2.1的无障碍标准
支持
如果您遇到任何问题或有疑问：