page-design-guide

The Page Design Guide MCP server provides a structured set of design guidance tools to help language models generate modern, accessible, and visually coherent web pages. It exposes a collection of commands that cover foundational principles (get_design_principles), layout recommendations (get_layout_guidance), color psychology (get_color_guidance), typography guidance (get_typography_guidance), section-specific recommendations (get_section_guidance), responsive design (get_responsive_guidance), component guidance (get_component_guidance), animation principles (get_animation_guidance), accessibility considerations (get_accessibility_guidance), and current trends (get_modern_trends). There is also a design review workflow (review_design_approach) to analyze a described design and surface strengths, concerns, and actionable recommendations. When connected through Claude or a compatible MCP client, you can invoke these commands to fetch targeted guidance for specific parts of a page, such as the hero, features, or pricing sections, and to review an overall design approach for a site or page type.

To use the tools, start by establishing a connection to the MCP server (page-design-guide). Then issue one of the available tool calls, for example: get_layout_guidance for a portfolio layout, get_color_guidance for mood-based color palettes, or get_section_guidance for structuring a hero, features, and testimonials area. You can also request reviews using review_design_approach to obtain a score, highlighted strengths, concerns, and recommended improvements. The suite is designed to be read alongside your project brief so you can iteratively refine layout, typography, color, and accessibility decisions as you build modern web pages.

Prerequisites:

• Node.js v18.x or newer
• npm (comes with Node.js)

Option A — Global usage via npx (recommended):

1. Ensure you have Node.js installed (v18+).
2. Run the MCP server directly with npx:

npx -y page-design-guide-mcp

This will fetch and run the page-design-guide-mcp package without installing it globally.

Option B — Local installation (recommended for offline or repeated use):

1. Install the package in your project:

npm install --save-dev page-design-guide-mcp

2. Start the server via npx from your project or invoke the built entry point as described in the package docs.

Option C — Claude Desktop configuration (for Claude users):

1. Add to Claude Desktop config (Mac): ~/Library/Application Support/Claude/claude_desktop_config.json or (Windows): %APPDATA%\Claude\claude_desktop_config.json
2. Use the global option:

{
  "mcpServers": {
    "page-design-guide": {
      "command": "npx",
      "args": ["-y", "page-design-guide-mcp"]
    }
  }
}

3. Alternatively, use a local path if you have built artifacts:

{
  "mcpServers": {
    "page-design-guide": {
      "command": "node",
      "args": ["/absolute/path/to/node_modules/page-design-guide-mcp/build/index.js"]
    }
  }
}

Prerequisites and notes:

• Ensure network access to fetch the MCP package when using npx.
• If you plan to run locally, the build artifacts (build/index.js) must exist (run npm run build if provided by the package).
• The README’s example configuration uses the package name page-design-guide-mcp; adjust if your package name differs in your setup.

Tips and common issues:

• Node.js version: The server requires Node.js v18 or newer. Use nvm to manage versions if needed.
• If you encounter permission errors with npx, try clearing npm cache or running with elevated permissions where appropriate.
• When using local installation, ensure your project structure includes the expected build/index.js entry point as described in the package's docs.
• The available tools are designed to be called programmatically; provide clear prompts to the MCP to receive the most relevant guidance (e.g., specify the page type, target audience, and accessibility constraints).
• For accessibility guidance, consider including WCAG 2.1/2.2 criteria references and color contrast checks in your prompts.
• If Claude or your client supports multi-tool workflows, you can chain calls such as get_design_principles followed by get_section_guidance to iteratively shape a page design.
• Environment variables (if exposed by the server) may include API keys for external design systems or feature flags; consult the package docs for supported env vars and defaults.