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