Vibe Design Guide MCP Server

This Model Context Protocol (MCP) server exposes The Vibe Coder's Web Design Guide directly as tools for AI agents. With this server connected, your AI assistant (e.g. Claude Desktop, Cursor, windsurf, or custom agents) can look up UI design patterns, CSS/JS code snippets, design theories, and compose optimized front-end prompts matching the guide's formula.

Exposed Tools

1. list_design_elements: Lists all design aesthetics, layouts, animations, navigation patterns, typography, and components available in the guide.

2. get_element_details: Retrieves comprehensive definitions, CSS instructions, code templates, study sites, and prompt rules for a specific element (e.g. glassmorphism, bento_grid).

3. search_guide: Searches keywords across all definitions, instructions, and prompt templates in the guide.

4. compose_design_prompt: Automatically structures and generates a optimized prompt using the guide's core formula: Aesthetic + Layout + Animation + specific colors/fonts + custom request.

Related MCP server: mcpsystem.design MCP Server

Installation

Make sure you have Python installed and the standard Model Context Protocol SDK package (mcp) available.

1. Install Dependencies

Run the following command in your terminal to install the MCP package:

pip install -r requirements.txt

(Or simply run pip install mcp)

2. Verify Server Manually

To check if the server runs properly, you can start it from your terminal:

python server.py

(It will run in standard I/O mode, listening for JSON-RPC messages on stdin. Press Ctrl+C to exit.)

Integration Setup

A. Claude Desktop Integration

To add this server to Claude Desktop on Windows:

1. Open your Claude Desktop configuration file. The default path on Windows is: %APPDATA%\Claude\claude_desktop_config.json

2. Add the server under the mcpServers block. Replace the absolute path to point to your server.py file:

{
  "mcpServers": {
    "vibe-design-guide": {
      "command": "python",
      "args": [
        "d:/Enginner Yatharth/WebDesigningMCP/server.py"
      ]
    }
  }
}

3. Save the file and restart Claude Desktop. You should now see a plug/tool icon in your chat box!

B. Cursor Integration

To add this server to Cursor:

1. Open Cursor and go to Settings -> Features -> MCP.

2. Click on + Add New MCP Server.

3. Fill in the following details:

   • Name: vibe-design-guide

   • Type: command

   • Command: python -u "d:/Enginner Yatharth/WebDesigningMCP/server.py"

4. Click Save. The server status indicator should turn green showing it is successfully connected.

C. Developer Tooling (Debugging)

To test and inspect the MCP server tools in real-time, you can use the MCP Inspector:

npx @modelcontextprotocol/inspector python d:/Enginner Yatharth/WebDesigningMCP/server.py

This launches a local web interface at http://localhost:5173 where you can manually invoke and test each tool.