Page Design Guide Mcp Server

Created By

chihebnabil22 days ago

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.

# mcp

# design

Overview Content Tools Comments

Overview

What is Page Design Guide MCP Server?

Page Design Guide MCP Server is an MCP (Model Context Protocol) server that provides design guidance to help LLMs generate better, more modern web pages. It focuses on teaching design principles and best practices rather than providing code templates.

How to use Page Design Guide MCP Server?

To use the server, integrate it with your Claude Desktop or OpenCode configuration, and ask design-related questions to receive guidance on various design aspects.

Key features of Page Design Guide MCP Server?

Layout Guidance: Recommendations on layout patterns like F-Pattern and Z-Pattern.
Color Psychology: Insights on color meanings and palette suggestions.
Typography: Best practices for font pairings and readability.
Responsive Design: Mobile-first strategies and breakpoint guidance.
Visual Hierarchy: Principles of contrast, whitespace, and alignment.
Component Guidance: Design principles for UI components.
Animation Principles: Guidelines for effective animations.
Accessibility: WCAG compliance and semantic HTML.
Modern Trends: Current design trends and their applications.
Design Review: Analyze designs and get recommendations.

Use cases of Page Design Guide MCP Server?

Assisting in the design of landing pages.
Providing layout recommendations for portfolio sites.
Offering color suggestions for branding.
Ensuring accessibility in web designs.
Reviewing and improving existing design approaches.

FAQ from Page Design Guide MCP Server?

Can this server help with all aspects of web design?

Yes! It covers a wide range of design principles and best practices.

Is there a cost to use the Page Design Guide MCP Server?

No! It is free to use for everyone.

What are the system requirements?

Node.js >= 18.0.0 and the Claude Desktop app are required.

Server Config

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

Recommend Servers

TraeBuild with Free GPT-4.1 & Claude 3.7. Fully MCP-Ready.

EdgeOne Pages MCPAn MCP service designed for deploying HTML content to EdgeOne Pages and obtaining an accessible public URL.

ChatWiseThe second fastest AI chatbot™

WindsurfThe new purpose-built IDE to harness magic

Y GuiA web-based graphical interface for AI chat interactions with support for multiple AI models and MCP (Model Context Protocol) servers.

Baidu Map百度地图核心API现已全面兼容MCP协议，是国内首家兼容MCP协议的地图服务商。

Tavily Mcp

Howtocook Mcp基于Anduin2017 / HowToCook （程序员在家做饭指南）的mcp server，帮你推荐菜谱、规划膳食，解决“今天吃什么“的世纪难题； Based on Anduin2017/HowToCook (Programmer's Guide to Cooking at Home), MCP Server helps you recommend recipes, plan meals, and solve the century old problem of "what to eat today"

AiimagemultistyleA Model Context Protocol (MCP) server for image generation and manipulation using fal.ai's Stable Diffusion model.

BlenderBlenderMCP connects Blender to Claude AI through the Model Context Protocol (MCP), allowing Claude to directly interact with and control Blender. This integration enables prompt assisted 3D modeling, scene creation, and manipulation.

Zhipu Web SearchZhipu Web Search MCP Server is a search engine specifically designed for large models. It integrates four search engines, allowing users to flexibly compare and switch between them. Building upon the web crawling and ranking capabilities of traditional search engines, it enhances intent recognition capabilities, returning results more suitable for large model processing (such as webpage titles, URLs, summaries, site names, site icons, etc.). This helps AI applications achieve "dynamic knowledge acquisition" and "precise scenario adaptation" capabilities.