MCP server providing modern web design guidance, color psychology, typography, layout patterns, and UI best practices for AI assistants
MCP server providing modern web design guidance, color psychology, typography, layout patterns, and UI best practices for AI assistants. The page design guide mcp mcp server wraps that behind the Model Context Protocol, so an assistant can use it through 11 defined tools rather than through you.
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.
Setup follows the usual MCP pattern — install or clone the server, register it in your client's configuration file, restart the client. The configuration blocks on this page cover the common clients.
Everything the assistant can do here goes through one of these:
get_design_principles — Get foundational design principles (hierarchy, whitespace, contrast, alignment, etc.) with guidelines and common mistakes to avoidget_layout_guidance — Get layout recommendations based on page type. Explains when and why to use F-Pattern, Z-Pattern, Bento Grid, Split Screen, etcget_color_guidance — Get color psychology, scheme types (monochromatic, complementary, etc.), and palette recommendations based on mood and industryget_typography_guidance — Get typography hierarchy, font pairing recommendations for different styles, and best practices for readable textget_section_guidance — Get guidance for specific page sections: header, hero, features, testimonials, pricing, cta, footer, faq - including purpose, structure, and bestget_responsive_guidance — Get responsive design principles, breakpoint strategies, and mobile-first best practicesget_component_guidance — Get design guidance for UI components: buttons, cards, forms, navigation, modals, icons - including sizing, states, and accessibilityget_animation_guidance — Get animation principles, timing guidelines, and performance considerations for different types of motionget_accessibility_guidance — Get accessibility requirements including contrast ratios, focus states, semantic HTML, and motion preferencesget_modern_trends — Get current web design trends (2024-2026) with guidance on when and how to use them appropriatelyreview_design_approach — Describe your design and get feedback with scores, identified strengths, concerns, and recommendationsThis sits in the developer tooling group, where several servers overlap in what they claim to do but differ sharply once you actually set them up. Page Design Guide MCP's toolset — get_design_principles, get_layout_guidance, get_color_guidance and 8 more — is a fair guide to whether it matches your workflow. It is maintained by chihebnabil; worth a glance at recent repository activity before you build anything load-bearing on it.
We check each listing at SyncDev against the project's documentation before it goes live — if something here drifts out of date, it is a bug worth reporting.
| Tool | What it does |
|---|---|
| get_design_principles | Get foundational design principles (hierarchy, whitespace, contrast, alignment, etc.) with guidelines and common mistakes to avoid. |
| get_layout_guidance | Get layout recommendations based on page type. Explains when and why to use F-Pattern, Z-Pattern, Bento Grid, Split Screen, etc. |
| get_color_guidance | Get color psychology, scheme types (monochromatic, complementary, etc.), and palette recommendations based on mood and industry. |
| get_typography_guidance | Get 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 | Get 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 | Get 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. |
{
"mcpServers": {
"page-design-guide": {
"command": "npx",
"args": ["-y", "page-design-guide-mcp"]
}
}
}Configuration as documented by the project. Restart the client after saving.
Kill hallucinated APIs — version-accurate, up-to-date library documentation injected straight into context.
Microsoft's official browser automation server — drive a real browser through the accessibility tree, no screenshots needed.
GitHub's official server — repos, issues, pull requests, Actions and code security, straight from your assistant.
Issue tracking at the speed of conversation — Linear's official hosted server with OAuth and zero install.
Local repository surgery — status, diffs, commits, branches and history for any repo on disk.
Timezone sanity for AI — current time anywhere and correct conversions, without the model doing date math.