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桌面应用程序
许可证
麻省理工学院