快速接入

先看主来源和安装命令，再打开仓库或文档；下面只保留这个条目的关键接入事实。

命令预览

npx @mockflow/wireframepro-mcp

详细介绍

MockFlow WireframePro MCP服务器

](https://www.npmjs.com/package/@mockflow/wireframepro-mcp) ![License: MIT](LICENSE)

本地主控程序服务器 MockFlow线框专业版将HTML转换为可编辑的线框，创建流程图，并直接从AI驱动的编码工具设计云架构图。

适用于 克劳德代码, 光标, VS代码副本, 法典，以及任何兼容MCP的客户端。

注： MCP服务器可能无法为涉及图像、人工智能艺术或复杂设计的某些类型的生成提供完整的体验。为了获得最佳的无缝体验，请使用什么是AI代理在MockFlow编辑器中。

快速开始

1.安装

npm install -g @mockflow/wireframepro-mcp

或者在不安装的情况下运行：

npx @mockflow/wireframepro-mcp

2.身份验证

mockflow-wireframepro-mcp login

这将打开您的浏览器，进入MockFlow的登录页面。使用您的MockFlow帐户登录并授权访问。令牌会自动保存到 ~/.mockflow/credentials.json （一次性设置）。

3.启动服务器

mockflow-wireframepro-mcp

您将看到：

MockFlow WireframePro - Local MCP Server
========================================
User: you@example.com

MCP server running on http://localhost:21194/mcp

Add to your AI client:

  Claude Code:
    claude mcp add --transport http -s user mockflow-wireframepro http://localhost:21194/mcp

4.连接您的AI客户端

克劳德代码

claude mcp add --transport http -s user mockflow-wireframepro http://localhost:21194/mcp

光标

设置>光标设置>工具和MCP：

{
  "mcpServers": {
    "mockflow-wireframepro": {
      "url": "http://localhost:21194/mcp"
    }
  }
}

VS代码副本

创建 .vscode/mcp.json 在您的项目中：

{
  "servers": {
    "mockflow-wireframepro": {
      "type": "http",
      "url": "http://localhost:21194/mcp"
    }
  }
}

食品法典委员会（OpenAI）

codex mcp add mockflow-wireframepro http://localhost:21194/mcp

5.开始提示

问你的AI客户端：

"Create a wireframe for a login page with email, password, and social login"
"Wireframe a dashboard with sidebar navigation, stats cards, and a data table"
"Create a flowchart showing the user registration process"
"Draw an AWS architecture diagram with API Gateway, Lambda, and DynamoDB"

服务器创建线框并返回一个URL。在浏览器中打开它进行查看和编辑。

可用工具（3）

工具	输入	描述
`render_wireframe`	带内联CSS的HTML	将HTML转换为可编辑的线框组件
`render_flowchart`	GoJS节点/链路数据	创建流程图（11类：UML、电路、生物等）
`render_cloudarchitecture`	云服务节点	AWS、Azure、GCP、思科网络图

如何 `render_wireframe` 作品

You: "Create a wireframe for a login page"
  |
  v
AI Client (Claude Code / Cursor / VS Code)
  |  generates complete HTML with inline CSS
  v
MCP Server (localhost:21194)
  |  loads HTML in headless browser (Puppeteer)
  |  runs imageGenerator → extracts paint objects
  |  sends to MockFlow backend
  v
app.mockflow.com
  |  creates WireframePro project with wireframe components
  v
Returns project URL → open in browser to view/edit

最佳结果的HTML提示

使用内联 style 属性（无外部CSS）
使用标准HTML元素： div, h1-h6, p, input, button, select, textarea, img, table, form
设置显式 width 在外容器上（例如。 1280px)
包含逼真的占位符文本
通过适当的嵌套保持布局干净

CLI参考

mockflow-wireframepro-mcp                     # Start server on default port (21194)
mockflow-wireframepro-mcp --port=8888         # Start on custom port
mockflow-wireframepro-mcp login               # Authenticate with MockFlow (one-time)
mockflow-wireframepro-mcp --help              # Show usage and setup instructions

配置

凭证

存储在 ~/.mockflow/credentials.json （由自动创建 mockflow-wireframepro-mcp login):

{
  "access_token": "...",
  "userid": "you@example.com",
  "clientid": "your-client-id"
}

自定义端口

如果端口21194正在使用中：

mockflow-wireframepro-mcp --port=8888

然后更新您的AI客户端配置以使用新端口。

调试模式

对于详细日志记录：

MCP_DEBUG=1 mockflow-wireframepro-mcp

验证安装

# Check server is running
curl http://localhost:21194/mcp

# List available tools
curl -X POST http://localhost:21194/mcp \
  -H "Content-Type: application/json" \
  -d '{"jsonrpc":"2.0","id":1,"method":"tools/list","params":{}}'

速率限制

仅工具调用(render_wireframe, render_flowchart, render_cloudarchitecture)被计算在内。协议消息(initialize, tools/list, ping)是无限的。

计划	限额
基本	10次工具调用/30分钟
付费	30次工具调用/分钟

限制是在服务器端为每个经过身份验证的用户强制执行的。每个回复都包括 RateLimit-Limit, RateLimit-Remaining，以及 RateLimit-Reset 标题。

故障排除

“找不到凭据”

跑 mockflow-wireframepro-mcp login 使用您的MockFlow帐户进行身份验证。

端口已在使用中

另一个进程正在使用端口21194。要么：

使用其他端口： mockflow-wireframepro-mcp --port=8888
终止进程： lsof -ti :21194 | xargs kill

AI客户端不使用WireframePro工具

在提示中明确： *“使用mockflow线框程序，为…创建线框”*.AI客户端有很多工具，可以默认生成代码。

工具调用失败，出现后端错误

确保您有有效的登录名和互联网连接。服务器需要达到 app.mockflow.com。如果您的令牌已过期，请运行 mockflow-wireframepro-mcp login 再一次。

示例提示

线框图

"Create a wireframe for a login page with email, password, remember me, and social login"
"Wireframe a dashboard with sidebar nav, user avatar, stats cards, and a data table"
"Create a wireframe for an e-commerce product page with image gallery, price, and add to cart"
"Wireframe a settings page with profile photo, form fields, and save button"

流程图

"Create a flowchart showing the checkout process"
"Create a UML class diagram for a blog system"
"Create a circuit diagram with resistors and capacitors"

云架构

"Draw an AWS architecture with API Gateway, Lambda, DynamoDB, and S3"
"Create an Azure architecture diagram for a web app with App Service and SQL Database"

链接

npm：
github：
模拟流： mockflow.com
IdeaBoard MCP： @模拟流/创意板mcp --流程图、看板、思维导图和12+可视化

贡献

欢迎在 .

许可证

麻省理工学院

目录标签

开发工具JavaScriptClaude线框图转换本地部署流程图生成云架构设计AI工具集成开发辅助

支持客户端

ClaudeCursorVS Code

接入字段

传输方式（transport，传输协议）

stdio

鉴权方式（authType，认证方式）

session

运行时（runtime，运行环境）

Node.js

来源包（packageName，安装包名）

@mockflow/wireframepro-mcp

工具数量（toolCount，工具数）

3

资源数量（resourceCount，资源数）

0

提示词数量（promptCount，提示词数）

0

权限和风险

stdiosession部署方式未说明

接入前请确认传输方式、认证方式和部署位置，并根据实际工具能力限制访问范围。

安装前确认

不要直接授予不必要的文件、网络或账号权限；先核对安装命令和配置内容。

来源信息

MCP World

mcpworld.com

/detail/6aead90e9409327dd0e5f61916a82554

MockFlow WireframePro MCP Server是一个本地MCP服务器，用于将HTML转换为可编辑的线框图、创建流程图和设计云架构图，适用于AI驱动的编码工具。

继续浏览同类 MCP

更多设计创作 MCP（1,700）返回 MCP 目录

上一个 MCP

Wine Tasting Visual Vocabulary MCP Server

一个将葡萄酒品鉴专业知识转化为AI图像生成视觉参数的知识基础设施系统，适用于葡萄酒教育和数字内容创作。

下一个 MCP

Woody MCP

Woody是一款AI驱动的木工设计助手，通过MCP连接SketchUp，允许用户使用自然语言设计家具和木工项目。

Wireframepro MCP