Page Design Guide Mcp Server

MCP server providing modern web design guidance, color psychology, typography, layout patterns, and UI best practices for AI assistants

An MCP (Model Context Protocol) server that provides design guidance to help LLMs generate better, more modern web pages. This server focuses on teaching design principles and best practices rather than providing code templates.

- [layout]Layout Guidance- When and how to use F-Pattern, Z-Pattern, Bento Grid, etc.
- [palette]Color Psychology- Color meanings, scheme types, and palette recommendations
- [type]Typography- Hierarchy, font pairings, and readability best practices
- [grid]Responsive Design- Mobile-first strategies and breakpoint guidance
- [layers]Visual Hierarchy- Principles of contrast, whitespace, alignment
- [component]Component Guidance- Design principles for buttons, cards, forms, navigation
- [motion]Animation Principles- Timing, purpose, and performance considerations
- [accessibility]Accessibility- WCAG compliance, contrast ratios, semantic HTML
- [sparkles]Modern Trends- Current design trends and when to use them
- [check]Design Review- Analyze design descriptions and get recommendations

Add this 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"] } } }

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

Replace/absolute/path/towith the actual path to your project'snode_modulesdirectory.

Youropencode.jsonconfiguration file should include:

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

Once connected, you can ask Claude questions like:

- "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"

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

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

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

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

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

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

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

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

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

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

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

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

For development with auto-rebuild on changes:

This is a web browser that enables your coding agent, such as Claude Code, to visit websites on your behalf and assist you in identifying bugs or creating UI test cases.

Create crafted UI components inspired by the best 21st.dev design engineers.

Bring agent evaluations, observability, and synthetic test set generation directly into your IDE for free with Galileo's new MCP server

An MCP server to help AI assistants to answer questions and generate AccelByte Extend SDK code more effectively .

MCP server for AI Diagram Maker — generate beautiful software engineering diagrams directly inside Cursor, Claude Desktop, Claude Code, or any MCP-compatible AI agent

ALAPI MCP Tools,Call hundreds of API interfaces via MCP

AI-powered SVG animation generator that transforms static files into animated SVG components using the Allyson platform

MCP server that gives AI assistants on-demand access to 1,500+ amCharts docs, ~300 code examples, and 1000+ class API references.

APIMatic MCP Server is used to validate OpenAPI specifications using APIMatic. The server processes OpenAPI files and returns validation summaries by leveraging APIMatic’s API.

One shared context layer for AI agents and humans — live API specs, DB schemas, and versioned contracts across repos so every agent and teammate works from the same source of truth.

Build and deploy full-stack Next.js apps with 98 tools for React, AWS, and MongoDB