Page Design Guide Mcp Server

页面设计指南 MCP 服务

一个 MCP（Model Context Protocol）服务，可提供设计指导，帮助大模型生成更优质、更现代的网页。此服务侧重于讲解设计原则和最佳实践，而非提供代码模板。

功能

• [layout] 布局指导 - 何时以及如何使用 F 型布局、Z 型布局、Bento Grid 等
• [palette] 色彩心理学 - 色彩含义、配色方案类型和调色板建议
• [type] 字体排版 - 层级、字体搭配和可读性最佳实践
• [grid] 响应式设计 - 移动优先策略和断点指导
• [layers] 视觉层级 - 对比、留白、对齐原则
• [component] 组件指导 - 按钮、卡片、表单、导航的设计原则
• [motion] 动画原则 - 时长、目的和性能方面的考量
• [accessibility] 无障碍访问 - WCAG 合规性、对比度和语义化 HTML
• [sparkles] 现代趋势 - 当前设计趋势及其适用场景
• [check] 设计评审 - 分析设计描述并获取建议

使用 Claude Desktop 进行设置

将以下内容添加到 Claude Desktop 配置文件中：

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 型布局、Bento Grid、分屏布局等。

get_color_guidance

获取色彩心理学、配色方案类型（单色、互补色等），以及根据情绪和行业提供的调色板建议。

get_typography_guidance

获取字体排版层级、适用于不同风格的字体搭配建议，以及文本可读性的最佳实践。

get_section_guidance

获取特定页面区域的指导：页眉、主视觉区域、功能介绍、用户评价、定价、行动号召、页脚、常见问题，包括用途、结构和最佳实践。

get_responsive_guidance

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

get_component_guidance

获取 UI 组件的设计指导：按钮、卡片、表单、导航、模态框、图标，包括尺寸、状态和无障碍访问。

get_animation_guidance

获取动画原则、时长指南，以及不同类型动效的性能方面考量。

get_accessibility_guidance

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

get_modern_trends

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

review_design_approach

描述你的设计并获取反馈，包括评分、发现的优势、需要关注的问题和建议。

项目结构

page-design-guide-mcp/
├── src/
│   └── index.ts          # Main MCP server code
├── build/                # Compiled JavaScript (generated)
├── package.json
├── tsconfig.json
└── README.md

开发

如需在更改时自动重新构建以进行开发：

npm run watch

要求

• Node.js >= 18.0.0
• Claude Desktop 桌面应用

许可证

MIT