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
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.
Compare MCP servers by category, or browse hosted MCP servers if you prefer an endpoint over a local process.
Check the linked publisher documentation and your connected client's tool list. Names and availability can vary with the server version and account permissions.
| Tool | What it does |
|---|---|
| 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 | |
| review_design_approach |
{
"mcpServers": {
"page-design-guide": {
"command": "npx",
"args": [
"-y",
"page-design-guide-mcp"
]
}
}
}From the project documentation. Replace placeholders and example paths before connecting.
Use Microsoft’s Playwright MCP server to navigate pages, inspect accessibility snapshots, fill forms and capture browser screenshots.
Puppeteer-powered browser control that drives pages from the accessibility tree instead of pixels.
Your project's design system for coding agents: tokens, components, contrast checks, guidelines.
WCAG 2.1 AA accessibility scanner (Playwright + axe-core) with grounded, browser-verified fixes.
Alt text, headings, contrast, ARIA for AI agents
MCP server to generate design systems, tokens, and provide Figma layout information to AI coding agents like Cursor