MCP Prototype Server

基于 Model-Context Protocol 实现的 AI 原型设计辅助工具

javascript

3

GitHub Stars

javascript

Language

6 months ago

First Indexed

2 months ago

Catalog Refreshed

Documentation & install

Readme and setup notes from the catalogue, plus a client-ready config you can copy for your MCP host.

Installation

Add the following to your MCP client configuration file.

Configuration

View docs

{
  "mcpServers": {
    "llxxbb-mcp-prototype": {
      "command": "npx",
      "args": [
        "-y",
        "@llxxbb/mcp-prototype"
      ]
    }
  }
}

This MCP server lets you design HTML-based prototypes directly in your workflow. It provides a navigable prototype structure, decouples markup from prototype content, and supports page annotations to communicate design intent and constraints to your team.

How to use

You interact with the MCP Prototype tool through your MCP client. To start displaying a prototype, issue the standard display command from your MCP client and select the prototype you want to view. The system will launch a background instance to serve the prototype, so you don’t need to re-enter the command for each view. When you’re done, you can stop the display to free resources.

Key concepts you’ll work with include a navigation sidebar that mirrors the folder structure of your prototype files. Each page can have a data-marker attribute to enrich UI element context, and pages can include an annotation markdown file to convey design notes and guidance. If you want to reveal or hide the prototype during a session, use the dedicated commands in your MCP client to start or stop the projection.

How to install

Prerequisites: ensure Node.js and npm are installed on your machine.

Start the MCP Prototype server using the MCP command runner:

{ 
  "mcpServers": { 
    "mcp_prototype": {
      "command": "npx",
      "args": [
        "-y",
        "@llxxbb/mcp-prototype"
      ]
    }
  }
}

If you prefer running the prototype locally for debugging, use the following approach to start the MCP server from your local directory where the prototype is installed:

"mcp_prototype": {
    "command": "npm",
    "args": [
      "--prefix",
      "path/to/mcp-prototype",
      "start:mcp"
    ]
  }
}