Page Design Guide Mcp Server
@chihebnabil
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.
Overview
What is Page Design Guide Mcp Server?
An MCP (Model Context Protocol) server that provides design guidance to help LLMs generate better, more modern web pages. It teaches design principles and best practices rather than providing code templates.
How to use Page Design Guide Mcp Server?
Add the server to your Claude Desktop configuration (macOS: ~/Library/Application Support/Claude/claude_desktop_config.json, Windows: %APPDATA%\Claude\claude_desktop_config.json) using either global installation ("command": "npx", "args": ["-y", "page-design-guide-mcp"]) or local installation pointing to the built index.js. Once connected, ask design questions like “What design principles should I follow for this landing page?” or use the available tools.
Key features of Page Design Guide Mcp Server
- Layout guidance for patterns like F-Pattern, Z-Pattern, Bento Grid
- Color psychology, scheme types, and palette recommendations
- Typography hierarchy, font pairings, and readability best practices
- Responsive design with mobile-first strategies and breakpoint guidance
- Visual hierarchy principles (contrast, whitespace, alignment)
- Component guidance for buttons, cards, forms, navigation
- Animation principles including timing, purpose, and performance
- Accessibility guidance for WCAG compliance and contrast ratios
- Modern trends (2024-2026) with appropriate usage advice
- Design review tool that scores and provides recommendations
Use cases of Page Design Guide Mcp Server
- Get layout recommendations for a landing page based on its type
- Choose a color palette that conveys trust and professionalism
- Structure a hero section with proper visual hierarchy
- Make an existing design more accessible
- Review a design approach for an e-commerce page with feedback
FAQ from Page Design Guide Mcp Server
What design guidance does the server provide?
It provides foundational design principles, layout recommendations, color psychology, typography guidance, responsive design strategies, component guidance, animation principles, accessibility requirements, modern trends, and a design review tool.
How do I install Page Design Guide Mcp Server?
You can install it globally via npx -y page-design-guide-mcp or locally by pointing to the built index.js in the package. Set it up in your Claude Desktop or OpenCode configuration.
What are the system requirements?
Node.js >= 18.0.0 and the Claude Desktop app are required.
What tools are available?
The server includes tools such as get_design_principles, get_layout_guidance, get_color_guidance, get_typography_guidance, get_section_guidance, get_responsive_guidance, get_component_guidance, get_animation_guidance, get_accessibility_guidance, get_modern_trends, and review_design_approach.
Can the server analyze my existing design description?
Yes. The review_design_approach tool lets you describe your design and receive feedback with scores, identified strengths, concerns, and recommendations.
