Page Design Guide MCP

🚀 Page Design Guide MCP Server

An MCP (Model Context Protocol) server that offers design guidance to assist LLMs in generating superior, more contemporary web pages. This server emphasizes teaching design principles and best practices instead of providing code templates.

🚀 Quick Start

This MCP server provides valuable design guidance for LLMs. To start using it, you need to complete the setup according to your specific requirements.

✨ Features

• [layout] Layout Guidance: Instruction on when and how to utilize F-Pattern, Z-Pattern, Bento Grid, etc.
• [palette] Color Psychology: Insights into color meanings, scheme types, and palette recommendations.
• [type] Typography: Best practices for hierarchy, font pairings, and readability.
• [grid] Responsive Design: Mobile-first strategies and breakpoint guidance.
• [layers] Visual Hierarchy: Principles of contrast, whitespace, and alignment.
• [component] Component Guidance: Design principles for buttons, cards, forms, and navigation.
• [motion] Animation Principles: Considerations for timing, purpose, and performance.
• [accessibility] Accessibility: WCAG compliance, contrast ratios, and semantic HTML.
• [sparkles] Modern Trends: Current design trends and their appropriate usage.
• [check] Design Review: Analysis of design descriptions and provision of recommendations.

📦 Installation

Setup with Claude Desktop

Add the following configuration to your Claude Desktop configuration file:

• MacOS: ~/Library/Application Support/Claude/claude_desktop_config.json
• Windows: %APPDATA%\Claude\claude_desktop_config.json

Option 1: Global Installation (Recommended)

{
  "mcpServers": {
    "page-design-guide": {
      "command": "npx",
      "args": ["-y", "page-design-guide-mcp"]
    }
  }
}

Option 2: Local Installation

{
  "mcpServers": {
    "page-design-guide": {
      "command": "node",
      "args": ["/absolute/path/to/node_modules/page-design-guide-mcp/build/index.js"]
    }
  }
}

Replace /absolute/path/to with the actual path to your project's node_modules directory.

Setup with OpenCode

Your opencode.json configuration file should include:

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "page-design-guide": {
      "type": "local",
      "command": ["npx", "-y", "page-design-guide-mcp"],
      "enabled": true
    }
  }
}

💻 Usage Examples

Basic Usage

Once connected, you can pose questions to Claude, such as:

• "What design principles should I follow for this landing page?"
• "Which layout works best for a portfolio site?"
• "What colors convey trust and professionalism?"
• "How should I structure the hero section?"
• "What are common mistakes to avoid with typography?"
• "How do I make this accessible?"
• "Review my design approach for this e-commerce page"

📚 Documentation

Available Tools

get_design_principles

Retrieve foundational design principles (hierarchy, whitespace, contrast, alignment, etc.), along with guidelines and common mistakes to avoid.

get_layout_guidance

Obtain layout recommendations based on page type. Understand when and why to use F-Pattern, Z-Pattern, Bento Grid, Split Screen, etc.

get_color_guidance

Get insights into color psychology, scheme types (monochromatic, complementary, etc.), and palette recommendations based on mood and industry.

get_typography_guidance

Receive typography hierarchy, font pairing recommendations for different styles, and best practices for readable text.

get_section_guidance

Get guidance for specific page sections: header, hero, features, testimonials, pricing, cta, footer, faq - including purpose, structure, and best practices.

get_responsive_guidance

Obtain responsive design principles, breakpoint strategies, and mobile-first best practices.

get_component_guidance

Get design guidance for UI components: buttons, cards, forms, navigation, modals, icons - including sizing, states, and accessibility.

get_animation_guidance

Receive animation principles, timing guidelines, and performance considerations for different types of motion.

get_accessibility_guidance

Get accessibility requirements including contrast ratios, focus states, semantic HTML, and motion preferences.

get_modern_trends

Get current web design trends (2024 - 2026) with guidance on when and how to use them appropriately.

review_design_approach

Describe your design and get feedback with scores, identified strengths, concerns, and recommendations.

🔧 Technical Details

Project Structure

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

Development

For development with auto-rebuild on changes:

npm run watch

Requirements

• Node.js >= 18.0.0
• Claude Desktop app

📄 License

This project is licensed under the MIT License.