MCP Prototype

🚀 MCP-Prototype

MCP tool that enables AI to directly perform prototype design based on HTML. You can quickly build software prototypes even without Figma or Axure.

✨ Features

• Provide a navigation bar.
• Decouple markers from prototypes.
• Support page additional descriptions.

📦 Installation

AI MCP Configuration

Add the following content to the AI MCP configuration:

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

Local Debugging

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

💻 Usage Examples

Before Prototype Design

⚠️ Important Note

• Please design the prototype according to the prototype tool specifications.
• Requirements: abcd...

During Usage

If you want to display the prototype, simply enter:

Display the prototype

Since the prototype display starts a background process, there's no need to enter the command multiple times, otherwise, multiple instances will be started.

If you want to close it, you can enter:

Stop displaying or Close the prototype

📚 Documentation

Usage Specifications

• Navigation Bar
  • Hierarchy Definition: It corresponds one - to - one with the directory structure of the file system where the prototype is located.
  • Prototype Name: It comes from the data - nav - name data attribute value of the prototype page label. If omitted, the file name is used.
• Function Injection: MCP - Prototype will inject the following into each HTML page:
  • A <base href="/html/"> tag. Pay attention to the correctness of the "reference" path.
  • The mcp - prototype - inject.js file, which is used to display markers.
• Markers: Enhance the user's understanding of UI elements by setting the data - marker data attribute of UI elements. It's optional. If the meaning of relevant interface elements is already very obvious, it's not recommended to configure it.
• Page Additional Descriptions: Used to express content that the prototype page cannot express, such as design concepts, element dragging, and precautions. It's in Markdown format, and the file name format is [prototype page file name].annotation.md. For specific reference, please refer to the src\mcp\tool\getSpec.ts file.

🔧 Technical Details

• Node.js, SvelteKit, Vite, TypeScript