金大哥 - page-design-guide-mcp MCP 详情

article

README

🚀 页面设计指南MCP服务器

这是一个MCP（模型上下文协议）服务器，旨在提供设计指导，助力大语言模型（LLMs）生成更优质、更具现代感的网页。该服务器着重传授设计原则和最佳实践，而非提供代码模板。

✨ 主要特性

[布局] 布局指导：何时以及如何运用F型布局、Z型布局、便当网格布局等。
[调色板] 色彩心理学：色彩含义、配色方案类型以及调色板推荐。
[字体排版] 排版设计：层级结构、字体搭配以及可读性最佳实践。
[网格] 响应式设计：移动优先策略和断点指导。
[图层] 视觉层级：对比、留白、对齐原则。
[组件] 组件指导：按钮、卡片、表单、导航等的设计原则。
[动画] 动画原则：时间安排、目的以及性能考量。
[无障碍设计] 无障碍访问：符合WCAG标准、对比度比率、语义化HTML。
[潮流趋势] 现代潮流：当前的设计潮流以及适用场景。
[审核检查] 设计审核：分析设计描述并获取建议。

📦 安装指南

使用Claude桌面端进行设置

将以下内容添加到Claude桌面端配置文件中：

MacOS：~/Library/Application Support/Claude/claude_desktop_config.json
Windows：%APPDATA%\Claude\claude_desktop_config.json

选项1：全局安装（推荐）

{
  "mcpServers": {
    "page-design-guide": {
      "command": "npx",
      "args": ["-y", "page-design-guide-mcp"]
    }
  }
}

选项2：本地安装

{
  "mcpServers": {
    "page-design-guide": {
      "command": "node",
      "args": ["/absolute/path/to/node_modules/page-design-guide-mcp/build/index.js"]
    }
  }
}

请将/absolute/path/to替换为你项目中node_modules目录的实际路径。

使用OpenCode进行设置

你的opencode.json配置文件应包含以下内容：

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "page-design-guide": {
      "type": "local",
      "command": ["npx", "-y", "page-design-guide-mcp"],
      "enabled": true
    }
  }
}

💻 使用示例

连接成功后，你可以向Claude提出以下问题：

“这个着陆页应遵循哪些设计原则？”
“哪种布局最适合作品集网站？”
“哪些颜色能传达信任和专业感？”
“我该如何构建英雄区域？”
“排版设计应避免哪些常见错误？”
“我该如何实现无障碍访问？”
“请审核我这个电子商务页面的设计方案”

📚 详细文档

`get_design_principles`

获取基础设计原则（层级结构、留白、对比、对齐等），以及指导建议和应避免的常见错误。

`get_layout_guidance`

根据页面类型获取布局建议，解释何时以及为何使用F型布局、Z型布局、便当网格布局、分屏布局等。

`get_color_guidance`

获取色彩心理学知识、配色方案类型（单色、互补色等），以及基于情绪和行业的调色板推荐。

`get_typography_guidance`

获取排版层级结构、不同风格的字体搭配建议，以及易读文本的最佳实践。

`get_section_guidance`

获取特定页面部分的指导，包括页眉、英雄区域、特色部分、推荐内容、定价、行动呼吁、页脚、常见问题解答等，涵盖目的、结构和最佳实践。

`get_responsive_guidance`

获取响应式设计原则、断点策略和移动优先的最佳实践。

`get_component_guidance`

获取用户界面组件的设计指导，包括按钮、卡片、表单、导航、模态框、图标等，涵盖尺寸、状态和无障碍访问。

`get_animation_guidance`

获取动画原则、时间安排指导和不同类型动画的性能考量。

`get_accessibility_guidance`

获取无障碍访问要求，包括对比度比率、焦点状态、语义化HTML和动画偏好。

`get_modern_trends`

获取当前网页设计潮流（2024 - 2026），以及何时和如何恰当运用这些潮流的指导。

`review_design_approach`

描述你的设计方案，获取带有评分、识别出的优势、关注点和建议的反馈。

🔧 技术细节

项目结构

page-design-guide-mcp/
├── src/
│   └── index.ts          # 主MCP服务器代码
├── build/                # 编译后的JavaScript文件（自动生成）
├── package.json
├── tsconfig.json
└── README.md

开发

若要在代码更改时自动重新构建项目，请运行以下命令：

npm run watch

环境要求

Node.js >= 18.0.0
Claude桌面端应用程序

📄 许可证

本项目采用MIT许可证。

page-design-guide-mcp