get_accessibility_guidance
Returns a11y standards regarding contrast, focus states, and semantic HTML. Filter by specific accessibility topic.
LABSCO SUMMARY
A design knowledge base the model can query mid-build, not a code generator.
It teaches rather than templates: each tool hands back principles and concrete values — a palette's hex codes, a layout pattern's use case, a section's structure — so the page the model writes is grounded in a stated rule instead of a guess.
What it is
A server that answers design questions for the model as it generates web pages, returning concrete specs rather than code — palettes with hex values, layout patterns, typography scales, and accessibility rules.
What you get
- get_design_principles and get_layout_patterns return foundational rules — hierarchy, whitespace, contrast — and named patterns like F-pattern, Z-pattern, and Bento Grid, with when to use each
- get_modern_palettes and get_color_guidance return trending colour combinations with hex codes plus colour psychology and scheme types
- get_typography_guidance and get_component_guidance cover font scales, pairings, and per-component specs for buttons, cards, forms, and navigation
- get_section_guidance, get_responsive_guidance, and get_accessibility_guidance give structure advice for hero/footer/pricing sections, breakpoint and touch-target rules, and contrast and semantic-HTML standards
- get_modern_trends, get_animation_guidance, get_holistic_design_review, and get_inspiration_by_mood round it out with trend guidance, motion timing, a full review checklist, and curated inspiration by style
Requirements
Runs through npx; no account or key. Node is the only prerequisite.
Setup effort
One command — npx -y page-design-guide-mcp
USE CASES
01
Choosing a layout for a new page
Ask get_layout_patterns which pattern fits the page type and get back F-pattern, Z-pattern, or Bento Grid with the reasoning, before any markup is written.
02
Picking a colour scheme that fits the mood
get_modern_palettes returns trending combinations with hex codes, and get_color_guidance explains the psychology behind them so the choice is defensible.
03
Making a generated page accessible
get_accessibility_guidance returns contrast ratios, focus-state and semantic-HTML rules to check the design against.
04
Reviewing a design concept before building it
get_holistic_design_review returns a checklist across every design category so nothing is skipped, and get_inspiration_by_mood points to reference sites in the target style.
13 tools
Counted once with only startup setup. Other versions, modes or optional credentials may expose a different list.
get_animation_guidance
Returns best practices for UI animation timing, easing, and purpose. Filter by specific animation topic.
get_color_guidance
Returns color psychology, color scheme types, and modern palette examples. Filter by specific color topic.
get_component_guidance
Returns detailed design specs for UI components (buttons, cards, forms, navigation) with modern 2026 best practices.
get_design_principles
Retrieves core UI/UX principles (hierarchy, whitespace, contrast) to ensure visual quality. Filter by specific principle type.
get_holistic_design_review
Returns a comprehensive checklist of all design categories to review a user's concept. Filter to specific review area.
get_inspiration_by_mood
Returns curated inspiration sources (websites, component libraries) based on desired mood or style.
get_layout_patterns
Returns standard layout patterns (F-pattern, Z-pattern, Bento Grid) and when to use them. Filter by specific pattern type.
get_modern_palettes
Returns trending 2026 color palette combinations with specific hex codes and usage examples. Use category to filter by palette type.
get_modern_trends
Returns current visual design trends and what trends to avoid. Filter by specific trend category.
get_responsive_guidance
Returns breakpoints, mobile-first principles, and touch target rules. Filter by specific responsive topic.
get_section_guidance
Returns specific structure and design advice for common page sections (hero, footer, features).
get_typography_guidance
Returns font hierarchy scales, font pairings, and readability best practices. Filter by specific typography topic.
BEFORE YOU INSTALL
What to know first
Tools you get
13 tools when we connected.
Requires
- npx on PATH
- Node.js >= 18.0.0
CONTEXT COST
Light Standing cost
Rated by the size of the 13 tool definitions that ride along on every turn, not by how many there are
INSTALLATION
Connect your client
Add the block to your client, or run the command directly.
Server setup
Configuration file
JSON
{
"mcpServers": {
"page-design-guide-mcp": {
"command": "npx",
"args": [
"-y",
"page-design-guide-mcp"
]
}
}
}npx
TERMINAL
npx -y page-design-guide-mcp
