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許可證。