MCP.directory
Web Prototyping

Web Prototyping

llxxbb

Generates interactive HTML prototypes that can be served locally through a web interface with navigation and annotation features. Creates rapid mockups without needing design tools like Figma or Axure.

Provides web prototype development tools through a dual-mode architecture combining SvelteKit web interface and command-line tools, enabling rapid HTML mockup creation, JavaScript injection, and interactive prototype serving with tree-based file navigation and automatic base href management.

3306 views1Local (stdio)
productivitydeveloper tools
GitHub

What it does

  • Generate HTML prototypes from specifications
  • Start local web server for prototype preview
  • Create tree-based navigation from file structure
  • Inject interactive markers and annotations
  • Manage prototype project initialization
  • Stop and restart prototype servers

Best for

UI/UX designers creating rapid prototypesDevelopers building mockups for client reviewProduct teams iterating on interface designsAnyone needing quick HTML-based prototypes
No external design tools requiredAutomatic navigation generationLocal development server included

About Web Prototyping

Web Prototyping is a community-built MCP server published by llxxbb that provides AI assistants with tools and capabilities via the Model Context Protocol. Web Prototyping offers a framer web builder for rapid HTML mockups with a SvelteKit UI, command-line tools, and interact It is categorized under productivity, developer tools. This server exposes 5 tools that AI clients can invoke during conversations and coding sessions.

How to install

You can install Web Prototyping in your AI client of choice. Use the install panel on this page to get one-click setup for Cursor, Claude Desktop, VS Code, and other MCP-compatible clients. This server runs locally on your machine via the stdio transport.

License

Web Prototyping is released under the NOASSERTION license.

Tools (5)

hello_world

Returns a greeting message

getSpec

检索 MCP-Prototype 规范，ai 助手可以参考此规范来创建 html 原型页面

init

提供原型根路径和展示服务的端口号，可以多次调用。注意此过程需检测并安装运行 web 服务所需的包，可能时间较长

start

该工具将启动web服务并展示模型，启动后会后台运行，所以避免重复调用！ 调用成功后，请在浏览器里输入本地地址和 init 中指定的端口号进行查看。 在调用此工具前，下面的事情需要就位，否则此工具可能无法正常工作： - 遵循 getSpec 工具中的指示并进行了原型创造。 - 已经调用 init 工具进行了初始化。

stop

停止展示原型，并关闭web服务器

MCP-Prototype

可以让 AI 基于HTML直接进行原型设计的 MCP 工具，即使没有 figma、axure也可以快速构建软件原型。

工具能力：

  • 提供导航栏。

  • 将标记与原型解耦。

  • 支持页面附加说明。

配置方法

AI MCP 配置增加下面的内容

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

本地调试

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

AI 提示词建议

在原型设计前：

要求：

  • 请按原型工具规范进行原型设计。

  • 需求：abcd...

使用过程中，如想展示原型，直接输入：

展示原型

原型展示会启动一个后台，所以不需要多次输入指令，否则会启动多个实例。

如想关闭，可输入：

停止展示

或

关闭原型

使用规范

  • 导航栏：

    • 层级定义：与原型所在文件系统的目录结构一一对应。

    • 原型名称：来源于原型页面标签的 data-nav-name 数据属性值，如省略则使用文件名。

  • 功能注入，MCP-Prototype 会为每个 HTML 页面注入：

    • 标签，注意"引用"路径的正确性。
    • mcp-prototype-inject.js 文件，用于展示标记。

  • 标记：通过设置 UI 元素的 data-marker 数据属性来增强使用者对UI元素的理解，可选。如相关界面元素的意义已经非常明显，则不建议配置。

                         

  • 页面的附加说明，用于表达原型页面无法表达的内容，如设计理念，元素拖拽，注意事项等。markdown 格式，文件名格式为[原型页面文件名].annotation.md

具体参考：src\mcp\tool\getSpec.ts 文件

技术栈

  • nodejs, SvelteKit, Vite，ts

Alternatives

Chrome DevTools MCP

Chrome DevTools MCP

chromedevtools
28.1k

AI-driven control of live Chrome via Chrome DevTools: browser automation, debugging, performance analysis and network mo

OfficialPopular
50711
Chrome DevTools

Chrome DevTools

chromedevtools
28.1k

Use Chrome DevTools for web site test speed, debugging, and performance analysis. The essential chrome developer tools f

OfficialPopular
3.9k172
GitHub

GitHub

github
27.6k

Extend your developer tools with GitHub MCP Server for advanced automation, supporting GitHub Student and student packag

OfficialRemotePopular
4.5k232
Task Master

Task Master

eyaltoledano
25.8k

Boost productivity with Task Master: an AI-powered tool for project management and agile development workflows, integrat

CommunityPopular
4.9k114

Related Skills

Browse all skills
ydc-ai-sdk-integration

Integrate Vercel AI SDK applications with You.com tools (web search, AI agent, content extraction). Use when developer mentions AI SDK, Vercel AI SDK, generateText, streamText, or You.com integration with AI SDK.

2
ccxt-typescript

CCXT cryptocurrency exchange library for TypeScript and JavaScript developers (Node.js and browser). Covers both REST API (standard) and WebSocket API (real-time). Helps install CCXT, connect to exchanges, fetch market data, place orders, stream live tickers/orderbooks, handle authentication, and manage errors. Use when working with crypto exchanges in TypeScript/JavaScript projects, trading bots, arbitrage systems, or portfolio management tools. Includes both REST and WebSocket examples.

1
slidev

Comprehensive guide for Slidev - a web-based presentation framework for developers. Covers Markdown syntax, layouts, components, animations, theming, and exporting. Use this skill when creating or working with developer presentations using Slidev.

264
dotnet-backend

.NET/C# backend developer for ASP.NET Core APIs with Entity Framework Core. Builds REST APIs, minimal APIs, gRPC services, authentication with Identity/JWT, authorization, database operations, background services, SignalR real-time features. Activates for: .NET, C#, ASP.NET Core, Entity Framework Core, EF Core, .NET Core, minimal API, Web API, gRPC, authentication .NET, Identity, JWT .NET, authorization, LINQ, async/await C#, background service, IHostedService, SignalR, SQL Server, PostgreSQL .NET, dependency injection, middleware .NET.

109
web-artifacts-builder

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

41
chrome-devtools

Browser automation, debugging, and performance analysis using Puppeteer CLI scripts. Use for automating browsers, taking screenshots, analyzing performance, monitoring network traffic, web scraping, form automation, and JavaScript debugging.

30