Page Design Guide MCP

🚀 页面设计指南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许可证。