Page Design Guide MCP

MCP服务器页面设计指南

MCP（模型上下文协议）服务器，提供设计指导，帮助LLM生成更好、更现代的网页。此服务器侧重于教授设计原则和最佳实践，而不是提供代码模板。

特性

• \[布局\] 布局指导 -何时以及如何使用F模式、Z模式、Bento Grid等。
• \[调色板\] 色彩心理学 -颜色含义、方案类型和调色板建议
• \[类型\] 排版 -层次结构、字体配对和可读性最佳实践
• \[网格\] 响应式设计 -移动优先策略和断点指导
• \[图层\] 视觉层次感 -对比度、空白、对齐原则
• \[组件\] 组件指南 -按钮、卡片、表格、导航的设计原则
• \[动议\] 动画原理 -时间、目的和性能考虑
• \[可访问性\] 无障碍 -WCAG合规性、对比度、语义HTML
• \[闪闪发光\] 现代潮流 -当前的设计趋势以及何时使用它们
• \[检查\] 设计评审 -分析设计说明并获得建议

使用Claude Desktop进行设置

将此添加到您的Claude Desktop配置文件中：

MacOS: ~/Library/Application Support/Claude/claude_desktop_config.json\ 视窗: %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

获取特定页面部分的指导：页眉、英雄、功能、推荐、定价、cta、页脚、常见问题解答，包括目的、结构和最佳实践。

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桌面应用程序

许可证

麻省理工学院