这次我们来看 Workbuddy 入门系列里的一个关键话题连接器和 MCP 到底是什么关系以及“一键设计稿变 APP”这条能力链路是怎么跑通的。很多朋友第一次接触 Workbuddy 时会看到两个高频词一个是“连接器”一个是“MCP”。连接器管的是“这个工具能接到哪些外部系统”MCP 管的是“AI 和外部系统之间用什么协议对话”。两者听起来像同一件事但实际层级完全不同。理解清楚这一层后面配置数据库、接入设计稿、做批量任务都会顺很多。这篇文章会用入门第 34 篇的定位把连接器、MCP、设计稿转 APP 这条链路完整拆开先给出核心能力速览再讲适用场景然后是环境准备、部署启动、功能测试、配置示例、接口与批量任务、性能观察、常见问题排查最后给一套最佳实践。全程以可落地为主尽量少讲空概念。1. 核心能力速览能力项说明项目类型AI 应用构建 / 自动化工作流工具核心功能通过连接器和 MCP 打通外部系统把设计稿、数据库、API 等资源接入 AI 工作流一键生成 APP 工程或业务应用设计稿输入支持接入设计稿来源常见方式包括 Figma MCP、蓝湖 MCP、本地设计稿文件导入等MCP 支持遵循 MCPModel Context Protocol客户端模式可挂载多个 MCP Server连接器作用把外部系统能力统一封装屏蔽不同平台的协议差异让 AI 按统一方式调用数据库访问可通过 MCP 连接器直接访问数据库执行查询、读取表结构等操作启动方式取决于实际安装版本通常为本地客户端启动或命令行启动需先保证 MCP Server 可达是否支持 API具体接口能力需按实际版本确认MCP Server 本身通常暴露工具调用接口是否支持批量任务可以围绕设计稿目录或任务队列做批量处理建议自行设计队列与重试逻辑推荐硬件常规开发机即可资源占用主要取决于 MCP Server 的规模和设计稿解析复杂度适合场景设计稿转 APP、业务系统自动搭建、数据库辅助查询、多工具串联的 AI 工作流从这张表能看出Workbuddy 的核心不是“某个单一模型”而是“把多个系统串起来”的能力。它真正解决的是设计稿、数据库、接口、文档这些外部资源如何以统一方式被 AI 读取和使用。2. 连接器和 MCP 到底是什么关系2.1 MCP 是通信协议连接器是落地封装MCP全称 Model Context Protocol是一种模型上下文协议。它解决的核心问题是AI 模型无法直接访问外部数据需要一套标准协议把外部工具、数据源、操作能力暴露给 AI。类比一下MCP 像是 USB 接口标准它规定了设备怎么连、数据怎么传。连接器则像是具体的 USB 转接头把不同平台的私有接口统一转成 MCP 能识别的标准格式。所以在 Workbuddy 里两者是“标准 实现”的关系MCP 定义了一套 AI 与外部工具交互的规范包括工具发现、参数传递、结果返回。连接器是具体的实现模块负责对接某个外部系统比如蓝湖、Figma、MySQL、企业内部 API。一个 Workbuddy 实例可以同时挂载多个连接器每个连接器内部可能对应一个或多个 MCP Server。2.2 一条典型的调用链路从设计稿到 APP 的完整链路大致长这样设计稿平台蓝湖 / Figma / 本地文件 ↓ 连接器把平台能力封装成统一接口 ↓ MCP Server暴露给 Workbuddy 的标准化工具 ↓ WorkbuddyAI 工作流调度 ↓ APP 工程生成 / 业务应用搭建这里最容易混淆的一点是连接器不等于 MCP Server但连接器通常需要依赖 MCP Server 来暴露能力。如果你在 Workbuddy 里添加了一个“蓝湖连接器”实际效果往往是Workbuddy 启动后去连接对应的 MCP Server然后通过这个 Server 调用蓝湖的设计稿读取、切图、标注能力。2.3 为什么这种方式比传统 API 直连更适合 AI传统 API 直连的痛点是每个平台的接口风格不同认证方式不同数据结构也不同。AI 每次接一个新系统都要写一套定制代码。MCP 的优点是工具格式统一AI 可以用同样的逻辑调用不同系统。上下文可携带AI 可以把设计稿 ID、页面地址、用户参数一起传给工具。多工具组合一次任务可以串联“读取设计稿 - 查数据库 - 生成代码 - 返回结果”多个环节。这也是为什么 Workbuddy 选择用连接器 MCP 的组合而不是简单写死某几个系统。3. 适用场景与使用边界3.1 适合谁用前端开发者想从设计稿快速得到可运行的 APP 工程减少手工切图和写样式的重复劳动。全栈工程师需要把业务系统的搭建流程自动化尤其是表单、列表、详情页这类高频页面。产品经理 / 设计师想用自然语言描述业务需求快速生成可交互原型。自动化实施人员需要把多个内部系统串起来做统一的数据查询和操作入口。3.2 能解决什么问题设计稿到代码的转换效率问题。多平台设计稿的格式统一问题。数据库访问的便捷性问题。AI 与外部系统之间的协议割裂问题。3.3 不适合什么场景需要极端精细还原的复杂交互动画仍需要开发人员手工调整。涉及敏感生产数据的操作不建议直接通过 MCP 暴露写权限。强依赖某平台私有功能的场景如果连接器没有覆盖扩展成本会比较高。3.4 版权、隐私与安全边界使用设计稿转 APP 功能时必须确认设计稿素材的来源和授权范围。企业设计稿通常包含内部 UI 规范、品牌元素、敏感业务字段接入 MCP 服务后数据会经过本地或服务端处理需要注意不要将未脱敏的客户数据传入未经验证的第三方服务。设计稿、字体、图标需要确认是否有商业使用授权。如果使用云端 MCP Server要关注数据传输链路是否加密。数据库连接器只读优先写操作要经过审批流程。4. 环境准备与前置条件这一部分按通用实践来写具体路径和版本以你实际安装的 Workbuddy 版本为准。4.1 软件环境操作系统Windows / macOS / Linux 均可优先选择你日常开发使用的系统。Workbuddy 客户端安装最新稳定版具体安装包从官方渠道获取。设计稿来源工具蓝湖登录账号准备好设计稿分享链接或团队项目权限。Figma准备 Figma 访问令牌确保对应文件已授权给应用。本地设计稿准备 PNG / Sketch / 设计标注文件目录。数据库客户端如果要用数据库连接器准备数据库地址、端口、账号、密码或连接串。4.2 网络环境如果使用云端 MCP Server需要保证 Workbuddy 所在机器可以访问对应服务。如果使用本地 MCP Server需要保证端口不被防火墙拦截。内网环境部署时优先把 MCP Server 和 Workbuddy 放在同一网段减少跨网延迟。4.3 目录规划建议建议在本地建立统一的工作目录workbuddy-workspace/ ├── design-sources/ # 设计稿源文件 ├── mcp-configs/ # MCP Server 配置文件 ├── generated-apps/ # 生成的 APP 工程输出 ├── logs/ # 运行日志 └── scripts/ # 批量处理脚本这样做的原因是设计稿文件通常比较大MCP Server 配置又涉及密钥信息统一管理可以避免路径混乱和敏感信息散落。5. 安装部署与启动方式5.1 安装 Workbuddy不同版本的安装方式可能不同通用流程分三步下载安装包从官方渠道下载对应系统的安装包。安装依赖如果安装包需要依赖 Node.js、Python 或 Java 环境按提示完成安装。启动客户端双击启动或在命令行执行启动命令。命令行启动时通用模板如下。# 以命令行方式启动 Workbuddy实际命令以安装目录下的可执行文件为准 cd /path/to/workbuddy ./workbuddy --host 127.0.0.1 --port 3000启动后观察控制台日志。如果日志显示“MCP Server connected”或类似字样说明连接器服务已正常接入。5.2 启动 MCP ServerWorkbuddy 本身是 MCP 客户端它需要连接一个或多个 MCP Server。启动 MCP Server 有两种常见方式方式一使用官方提供的 MCP Server 安装包单独启动。方式二使用 npx、pip 等工具直接运行社区版 MCP Server。以 npx 方式运行的通用模板# 启动一个本地的 MCP Server端口需要按实际配置调整 npx some-mcp/server --port 8080 --token YOUR_TOKEN注意MCP Server 的启动命令和参数因项目而异没有统一标准。实际使用前先阅读对应 Server 的文档。5.3 在 Workbuddy 中添加连接器在 Workbuddy 界面中打开“连接器”或“MCP 设置”页面。点击“添加连接器”。选择连接器类型设计稿、数据库、API、文件系统等。填写连接参数地址、端口、认证 Token、协议类型。保存后测试连接。测试连接是否成功的标准连接器状态显示为“已连接”。Workbuddy 日志中能看到 MCP Server 返回的工具列表。执行一次最小操作比如读取一个设计稿页面或查询一条数据库记录。如果连接失败优先检查端口、Token 和网络连通性。6. 一键设计稿变 APP功能测试与效果验证6.1 测试目的验证“设计稿 - APP 工程”的核心链路是否可用观察 AI 生成结果的质量和稳定性。6.2 测试准备准备一个结构简单、页面数量在 3 到 5 个的设计稿建议包含一个列表页。一个详情页。一个表单页。基本的文本、按钮、图片占位元素。设计稿导入前先确认命名规范。页面命名越清楚AI 生成结果越稳定。例如home-listproduct-detailorder-form6.3 测试步骤在 Workbuddy 中新建一个项目。选择“从设计稿生成 APP”。选择设计稿来源如果使用蓝湖粘贴分享链接。如果使用 Figma选择对应文件。如果使用本地文件选择设计稿目录。设置目标平台Web / 小程序 / Android / iOS。填写业务描述例如“基于设计稿生成一个商品列表和详情页列表支持下拉刷新详情页展示商品图片、价格和购买按钮。”点击生成。6.4 预期结果与判断标准检查项预期结果判断标准页面结构生成页面与设计稿基本一致页面数量、页面名称匹配布局还原列表、表单、详情布局正确无明显错位、遮挡样式还原颜色、间距、字体与设计稿一致主要设计 token 正确交互逻辑按钮点击、页面跳转可用生成代码可运行可维护性代码结构清晰有组件拆分不是单文件堆砌6.5 常见失败原因设计稿命名混乱AI 无法区分页面边界。设计稿内包含大量未分组图层导致结构解析失败。设计稿引用了商业字体或图片外链生成时无法加载资源。业务描述太模糊AI 只能按默认逻辑生成结果与预期偏差大。MCP Server 连接超时导致设计稿读取不完整。7. MCP 连接器配置示例下面给出连接器配置的通用模板。具体字段需要以 Workbuddy 的配置格式为准这里只提供一种常见思路。7.1 基础配置结构{ connectors: { design-blue-lake: { type: blue-lake, mcpServer: http://127.0.0.1:8080, auth: { token: YOUR_BLUE_LAKE_TOKEN } }, database-mysql: { type: mysql, mcpServer: http://127.0.0.1:8081, database: business_db, readOnly: true }, filesystem-local: { type: filesystem, mcpServer: http://127.0.0.1:8082, rootPath: ./design-sources } } }这个配置的含义是把蓝湖、MySQL、本地文件系统三个外部系统分别通过三个 MCP Server 暴露给 Workbuddy。7.2 环境变量方式如果不想把 Token 直接写在配置文件里可以使用环境变量export BLUE_LAKE_TOKENyour-token-here export MYSQL_CONNECTIONmysql://user:pass127.0.0.1:3306/business_db然后在连接器配置中引用环境变量名称。这种方式适合团队协作避免密钥进入代码仓库。7.3 连接器与 MCP Server 的对应关系一个连接器对应一个 MCP Server 是最清晰的部署方式。如果多个连接器共用一个 MCP Server需要在请求中显式传入连接器 ID否则 AI 可能无法判断应该调用哪个工具。生产环境建议按维度拆分 MCP Server设计稿类一个 Server。数据库类一个 Server。文件系统类一个 Server。第三方 API 类一个 Server。这样单个 Server 故障不会影响其他连接器。8. 通过 MCP 直接访问数据库8.1 能做什么从热门检索词可以看到Workbuddy 通过 MCP 直接访问数据库是一个高频需求。实际场景包括查询表结构帮助 AI 理解业务数据模型。读取示例数据用于生成表单和列表页。执行只读 SQL辅助业务分析。在生成 APP 时把数据库字段自动映射到页面字段。8.2 配置只读数据库连接器强烈建议生产环境使用只读账号避免 AI 误执行写操作。配置时创建数据库只读用户。只授予 SELECT 权限。禁止 DDL 和 DML。在连接器中设置 readOnly 标志。以 MySQL 为例创建只读用户CREATE USER workbuddy_read% IDENTIFIED BY strong_password; GRANT SELECT ON business_db.* TO workbuddy_read%; FLUSH PRIVILEGES;8.3 调用方式在 Workbuddy 中可以通过自然语言触发数据库查询例如“查询 business_db 中 product 表的字段结构并生成一个商品管理列表页。”Workbuddy 会通过数据库连接器调用 MCP Server执行类似下面的工具调用curl -X POST http://127.0.0.1:8081/mcp/tool/query \ -H Content-Type: application/json \ -d { tool: query_table_schema, params: { table: product } }返回结果会包含表的字段名、类型、注释等信息AI 再基于这些信息生成页面代码。这里要说明的是不同数据库 MCP Server 的工具名和请求格式不一定相同。上面的 curl 只是通用示例实际调用前先查看对应 Server 的工具列表。8.4 批量任务设计如果要从数据库读取多张表并批量生成多个管理页面可以设计一个任务清单1. 读取 user 表结构 - 生成用户管理页 2. 读取 order 表结构 - 生成订单管理页 3. 读取 product 表结构 - 生成商品管理页 4. 汇总生成到统一 APP 工程批量任务需要注意每个任务之间要有日志记录。失败任务要支持单独重试。数据库查询结果要缓存避免大量重复查询。生成结果要落到独立目录不要覆盖已有代码。9. 资源占用与性能观察9.1 资源占用在哪Workbuddy 本身的资源占用通常不高真正的资源消耗集中在以下几个环节MCP Server 进程每个 Server 独立运行占用一定内存。设计稿解析高分辨率设计稿或大文件解析时CPU 和内存会明显上升。数据库查询大数据量查询会占用内存建议加 LIMIT。代码生成阶段如果本地跑大模型显存占用会显著上升如果调用云端模型则主要看网络和接口配额。9.2 怎么观察推荐用以下方式观察Windows 任务管理器查看进程 CPU / 内存占用。macOS Activity Monitor 查看对应进程。命令行使用top或htop查看。如果本地跑模型用nvidia-smi查看显存占用。# 查看 MCP Server 相关进程的内存占用Linux 或 macOS 下使用 ps aux | grep -E mcp|workbuddy | grep -v grep9.3 性能优化技巧设计稿尽量压缩后导入避免超大原图直接解析。数据库查询加 LIMIT 100控制返回数据量。多个 MCP Server 分布在不同的端口和进程避免单点阻塞。生成 APP 时第一次先只生成 1 个页面验证链路再批量生成全部页面。如果本地资源不足优先考虑把生成任务放到云端执行本地只负责调度。10. 常见问题与排查方法问题现象可能原因排查方式解决方案添加连接器后提示连接失败MCP Server 未启动或端口错误检查 MCP Server 进程状态和端口监听情况启动 MCP Server确认端口与配置一致设计稿读取不到页面权限不足或链接过期确认设计稿分享链接有效期和账号权限重新生成分享链接授权给对应账号生成的 APP 布局错乱设计稿图层分组混乱在设计稿中规范图层命名和分组优化设计稿结构后重新生成数据库查询超时SQL 执行时间过长查看数据库慢查询日志加 LIMIT优化查询条件MCP 工具无法调用Token 过期或认证失败查看 Workbuddy 日志中的错误信息更新 Token重新测试连接批量任务中途卡住单任务异常未处理查看任务日志定位卡住的任务加入超时和失败重试机制生成的代码无法运行依赖缺失或环境不匹配打开生成工程检查 console 报错按报错安装缺失依赖显存不足本地模型尺寸过大使用 nvidia-smi 查看显存占用换小模型或改用云端推理排查时第一件事永远是看日志。Workbuddy 的日志一般会记录 MCP Server 的连接情况、工具调用参数和返回错误。日志里定位到具体是哪一步失败再去检查对应系统。11. 最佳实践与使用建议11.1 从小处开始验证第一次使用不要直接跑一个完整的大型设计稿。建议先拿一个单页设计稿、一个单表数据库跑通最小链路再逐步增加复杂度。最小验证清单1. 启动 Workbuddy。 2. 启动一个 MCP Server。 3. 添加一个连接器。 4. 设计稿导入一个页面。 5. 生成一个页面代码。 6. 确认代码可运行。这六步跑通了再考虑批量任务和复杂流程。11.2 设计稿规范化设计稿是输入质量的决定因素。推荐做到页面名称用英文小写加连字符避免中文和特殊字符。图层分组按“页面级分组 - 模块级分组 - 元素”组织。颜色、字体、间距尽量使用设计 token而不是散落的色值。移除无关的参考图层和标注图层。设计稿越规范AI 生成结果越稳定。11.3 数据库安全使用只读账号连接生产数据库。禁止在描述中要求 AI 执行 DELETE、UPDATE 等高危操作。查询结果脱敏后再交给 AI 处理。连接器配置中的密钥使用环境变量注入。11.4 目录与日志管理设计稿源文件、MCP 配置、生成结果分目录存放。每个批量任务生成独立日志文件。任务命名带时间戳方便回滚和对比。11.5 接口服务限制访问范围如果 MCP Server 需要暴露给其他团队调用绑定内网地址不要直接暴露公网。设置访问 Token。记录调用日志。定期轮换密钥。12. 关于 MCP 生态扩展的下一步连接器和 MCP 的关系弄清楚之后Workbuddy 的扩展方向就很清晰了。下一步可以尝试接入更多设计稿平台对比不同平台的还原效果。把数据库连接器扩展为读写分离模式实现业务数据回写。结合代码仓库连接器让生成的 APP 直接提交到 Git 分支形成自动提交流程。探索多 MCP Server 组合调用让一个任务串联设计稿、数据库、接口文档多个数据源。这套“连接器 MCP 设计稿到 APP”的组合本质上是在把重复的页面搭建工作标准化。值得先用一个小项目跑通再逐步扩大应用范围。如果你正在搭这套环境建议从单页设计稿和只读数据库起步先记录一段基线效果后面再对比优化。连接器如果不能用了第一反应不是重装 Workbuddy而是先检查对应 MCP Server 的进程、端口、Token 三个点大部分问题都出在这三处。 连接器与MCP：Workbuddy一键设计稿变APP核心链路拆解
这次我们来看 Workbuddy 入门系列里的一个关键话题连接器和 MCP 到底是什么关系以及“一键设计稿变 APP”这条能力链路是怎么跑通的。很多朋友第一次接触 Workbuddy 时会看到两个高频词一个是“连接器”一个是“MCP”。连接器管的是“这个工具能接到哪些外部系统”MCP 管的是“AI 和外部系统之间用什么协议对话”。两者听起来像同一件事但实际层级完全不同。理解清楚这一层后面配置数据库、接入设计稿、做批量任务都会顺很多。这篇文章会用入门第 34 篇的定位把连接器、MCP、设计稿转 APP 这条链路完整拆开先给出核心能力速览再讲适用场景然后是环境准备、部署启动、功能测试、配置示例、接口与批量任务、性能观察、常见问题排查最后给一套最佳实践。全程以可落地为主尽量少讲空概念。1. 核心能力速览能力项说明项目类型AI 应用构建 / 自动化工作流工具核心功能通过连接器和 MCP 打通外部系统把设计稿、数据库、API 等资源接入 AI 工作流一键生成 APP 工程或业务应用设计稿输入支持接入设计稿来源常见方式包括 Figma MCP、蓝湖 MCP、本地设计稿文件导入等MCP 支持遵循 MCPModel Context Protocol客户端模式可挂载多个 MCP Server连接器作用把外部系统能力统一封装屏蔽不同平台的协议差异让 AI 按统一方式调用数据库访问可通过 MCP 连接器直接访问数据库执行查询、读取表结构等操作启动方式取决于实际安装版本通常为本地客户端启动或命令行启动需先保证 MCP Server 可达是否支持 API具体接口能力需按实际版本确认MCP Server 本身通常暴露工具调用接口是否支持批量任务可以围绕设计稿目录或任务队列做批量处理建议自行设计队列与重试逻辑推荐硬件常规开发机即可资源占用主要取决于 MCP Server 的规模和设计稿解析复杂度适合场景设计稿转 APP、业务系统自动搭建、数据库辅助查询、多工具串联的 AI 工作流从这张表能看出Workbuddy 的核心不是“某个单一模型”而是“把多个系统串起来”的能力。它真正解决的是设计稿、数据库、接口、文档这些外部资源如何以统一方式被 AI 读取和使用。2. 连接器和 MCP 到底是什么关系2.1 MCP 是通信协议连接器是落地封装MCP全称 Model Context Protocol是一种模型上下文协议。它解决的核心问题是AI 模型无法直接访问外部数据需要一套标准协议把外部工具、数据源、操作能力暴露给 AI。类比一下MCP 像是 USB 接口标准它规定了设备怎么连、数据怎么传。连接器则像是具体的 USB 转接头把不同平台的私有接口统一转成 MCP 能识别的标准格式。所以在 Workbuddy 里两者是“标准 实现”的关系MCP 定义了一套 AI 与外部工具交互的规范包括工具发现、参数传递、结果返回。连接器是具体的实现模块负责对接某个外部系统比如蓝湖、Figma、MySQL、企业内部 API。一个 Workbuddy 实例可以同时挂载多个连接器每个连接器内部可能对应一个或多个 MCP Server。2.2 一条典型的调用链路从设计稿到 APP 的完整链路大致长这样设计稿平台蓝湖 / Figma / 本地文件 ↓ 连接器把平台能力封装成统一接口 ↓ MCP Server暴露给 Workbuddy 的标准化工具 ↓ WorkbuddyAI 工作流调度 ↓ APP 工程生成 / 业务应用搭建这里最容易混淆的一点是连接器不等于 MCP Server但连接器通常需要依赖 MCP Server 来暴露能力。如果你在 Workbuddy 里添加了一个“蓝湖连接器”实际效果往往是Workbuddy 启动后去连接对应的 MCP Server然后通过这个 Server 调用蓝湖的设计稿读取、切图、标注能力。2.3 为什么这种方式比传统 API 直连更适合 AI传统 API 直连的痛点是每个平台的接口风格不同认证方式不同数据结构也不同。AI 每次接一个新系统都要写一套定制代码。MCP 的优点是工具格式统一AI 可以用同样的逻辑调用不同系统。上下文可携带AI 可以把设计稿 ID、页面地址、用户参数一起传给工具。多工具组合一次任务可以串联“读取设计稿 - 查数据库 - 生成代码 - 返回结果”多个环节。这也是为什么 Workbuddy 选择用连接器 MCP 的组合而不是简单写死某几个系统。3. 适用场景与使用边界3.1 适合谁用前端开发者想从设计稿快速得到可运行的 APP 工程减少手工切图和写样式的重复劳动。全栈工程师需要把业务系统的搭建流程自动化尤其是表单、列表、详情页这类高频页面。产品经理 / 设计师想用自然语言描述业务需求快速生成可交互原型。自动化实施人员需要把多个内部系统串起来做统一的数据查询和操作入口。3.2 能解决什么问题设计稿到代码的转换效率问题。多平台设计稿的格式统一问题。数据库访问的便捷性问题。AI 与外部系统之间的协议割裂问题。3.3 不适合什么场景需要极端精细还原的复杂交互动画仍需要开发人员手工调整。涉及敏感生产数据的操作不建议直接通过 MCP 暴露写权限。强依赖某平台私有功能的场景如果连接器没有覆盖扩展成本会比较高。3.4 版权、隐私与安全边界使用设计稿转 APP 功能时必须确认设计稿素材的来源和授权范围。企业设计稿通常包含内部 UI 规范、品牌元素、敏感业务字段接入 MCP 服务后数据会经过本地或服务端处理需要注意不要将未脱敏的客户数据传入未经验证的第三方服务。设计稿、字体、图标需要确认是否有商业使用授权。如果使用云端 MCP Server要关注数据传输链路是否加密。数据库连接器只读优先写操作要经过审批流程。4. 环境准备与前置条件这一部分按通用实践来写具体路径和版本以你实际安装的 Workbuddy 版本为准。4.1 软件环境操作系统Windows / macOS / Linux 均可优先选择你日常开发使用的系统。Workbuddy 客户端安装最新稳定版具体安装包从官方渠道获取。设计稿来源工具蓝湖登录账号准备好设计稿分享链接或团队项目权限。Figma准备 Figma 访问令牌确保对应文件已授权给应用。本地设计稿准备 PNG / Sketch / 设计标注文件目录。数据库客户端如果要用数据库连接器准备数据库地址、端口、账号、密码或连接串。4.2 网络环境如果使用云端 MCP Server需要保证 Workbuddy 所在机器可以访问对应服务。如果使用本地 MCP Server需要保证端口不被防火墙拦截。内网环境部署时优先把 MCP Server 和 Workbuddy 放在同一网段减少跨网延迟。4.3 目录规划建议建议在本地建立统一的工作目录workbuddy-workspace/ ├── design-sources/ # 设计稿源文件 ├── mcp-configs/ # MCP Server 配置文件 ├── generated-apps/ # 生成的 APP 工程输出 ├── logs/ # 运行日志 └── scripts/ # 批量处理脚本这样做的原因是设计稿文件通常比较大MCP Server 配置又涉及密钥信息统一管理可以避免路径混乱和敏感信息散落。5. 安装部署与启动方式5.1 安装 Workbuddy不同版本的安装方式可能不同通用流程分三步下载安装包从官方渠道下载对应系统的安装包。安装依赖如果安装包需要依赖 Node.js、Python 或 Java 环境按提示完成安装。启动客户端双击启动或在命令行执行启动命令。命令行启动时通用模板如下。# 以命令行方式启动 Workbuddy实际命令以安装目录下的可执行文件为准 cd /path/to/workbuddy ./workbuddy --host 127.0.0.1 --port 3000启动后观察控制台日志。如果日志显示“MCP Server connected”或类似字样说明连接器服务已正常接入。5.2 启动 MCP ServerWorkbuddy 本身是 MCP 客户端它需要连接一个或多个 MCP Server。启动 MCP Server 有两种常见方式方式一使用官方提供的 MCP Server 安装包单独启动。方式二使用 npx、pip 等工具直接运行社区版 MCP Server。以 npx 方式运行的通用模板# 启动一个本地的 MCP Server端口需要按实际配置调整 npx some-mcp/server --port 8080 --token YOUR_TOKEN注意MCP Server 的启动命令和参数因项目而异没有统一标准。实际使用前先阅读对应 Server 的文档。5.3 在 Workbuddy 中添加连接器在 Workbuddy 界面中打开“连接器”或“MCP 设置”页面。点击“添加连接器”。选择连接器类型设计稿、数据库、API、文件系统等。填写连接参数地址、端口、认证 Token、协议类型。保存后测试连接。测试连接是否成功的标准连接器状态显示为“已连接”。Workbuddy 日志中能看到 MCP Server 返回的工具列表。执行一次最小操作比如读取一个设计稿页面或查询一条数据库记录。如果连接失败优先检查端口、Token 和网络连通性。6. 一键设计稿变 APP功能测试与效果验证6.1 测试目的验证“设计稿 - APP 工程”的核心链路是否可用观察 AI 生成结果的质量和稳定性。6.2 测试准备准备一个结构简单、页面数量在 3 到 5 个的设计稿建议包含一个列表页。一个详情页。一个表单页。基本的文本、按钮、图片占位元素。设计稿导入前先确认命名规范。页面命名越清楚AI 生成结果越稳定。例如home-listproduct-detailorder-form6.3 测试步骤在 Workbuddy 中新建一个项目。选择“从设计稿生成 APP”。选择设计稿来源如果使用蓝湖粘贴分享链接。如果使用 Figma选择对应文件。如果使用本地文件选择设计稿目录。设置目标平台Web / 小程序 / Android / iOS。填写业务描述例如“基于设计稿生成一个商品列表和详情页列表支持下拉刷新详情页展示商品图片、价格和购买按钮。”点击生成。6.4 预期结果与判断标准检查项预期结果判断标准页面结构生成页面与设计稿基本一致页面数量、页面名称匹配布局还原列表、表单、详情布局正确无明显错位、遮挡样式还原颜色、间距、字体与设计稿一致主要设计 token 正确交互逻辑按钮点击、页面跳转可用生成代码可运行可维护性代码结构清晰有组件拆分不是单文件堆砌6.5 常见失败原因设计稿命名混乱AI 无法区分页面边界。设计稿内包含大量未分组图层导致结构解析失败。设计稿引用了商业字体或图片外链生成时无法加载资源。业务描述太模糊AI 只能按默认逻辑生成结果与预期偏差大。MCP Server 连接超时导致设计稿读取不完整。7. MCP 连接器配置示例下面给出连接器配置的通用模板。具体字段需要以 Workbuddy 的配置格式为准这里只提供一种常见思路。7.1 基础配置结构{ connectors: { design-blue-lake: { type: blue-lake, mcpServer: http://127.0.0.1:8080, auth: { token: YOUR_BLUE_LAKE_TOKEN } }, database-mysql: { type: mysql, mcpServer: http://127.0.0.1:8081, database: business_db, readOnly: true }, filesystem-local: { type: filesystem, mcpServer: http://127.0.0.1:8082, rootPath: ./design-sources } } }这个配置的含义是把蓝湖、MySQL、本地文件系统三个外部系统分别通过三个 MCP Server 暴露给 Workbuddy。7.2 环境变量方式如果不想把 Token 直接写在配置文件里可以使用环境变量export BLUE_LAKE_TOKENyour-token-here export MYSQL_CONNECTIONmysql://user:pass127.0.0.1:3306/business_db然后在连接器配置中引用环境变量名称。这种方式适合团队协作避免密钥进入代码仓库。7.3 连接器与 MCP Server 的对应关系一个连接器对应一个 MCP Server 是最清晰的部署方式。如果多个连接器共用一个 MCP Server需要在请求中显式传入连接器 ID否则 AI 可能无法判断应该调用哪个工具。生产环境建议按维度拆分 MCP Server设计稿类一个 Server。数据库类一个 Server。文件系统类一个 Server。第三方 API 类一个 Server。这样单个 Server 故障不会影响其他连接器。8. 通过 MCP 直接访问数据库8.1 能做什么从热门检索词可以看到Workbuddy 通过 MCP 直接访问数据库是一个高频需求。实际场景包括查询表结构帮助 AI 理解业务数据模型。读取示例数据用于生成表单和列表页。执行只读 SQL辅助业务分析。在生成 APP 时把数据库字段自动映射到页面字段。8.2 配置只读数据库连接器强烈建议生产环境使用只读账号避免 AI 误执行写操作。配置时创建数据库只读用户。只授予 SELECT 权限。禁止 DDL 和 DML。在连接器中设置 readOnly 标志。以 MySQL 为例创建只读用户CREATE USER workbuddy_read% IDENTIFIED BY strong_password; GRANT SELECT ON business_db.* TO workbuddy_read%; FLUSH PRIVILEGES;8.3 调用方式在 Workbuddy 中可以通过自然语言触发数据库查询例如“查询 business_db 中 product 表的字段结构并生成一个商品管理列表页。”Workbuddy 会通过数据库连接器调用 MCP Server执行类似下面的工具调用curl -X POST http://127.0.0.1:8081/mcp/tool/query \ -H Content-Type: application/json \ -d { tool: query_table_schema, params: { table: product } }返回结果会包含表的字段名、类型、注释等信息AI 再基于这些信息生成页面代码。这里要说明的是不同数据库 MCP Server 的工具名和请求格式不一定相同。上面的 curl 只是通用示例实际调用前先查看对应 Server 的工具列表。8.4 批量任务设计如果要从数据库读取多张表并批量生成多个管理页面可以设计一个任务清单1. 读取 user 表结构 - 生成用户管理页 2. 读取 order 表结构 - 生成订单管理页 3. 读取 product 表结构 - 生成商品管理页 4. 汇总生成到统一 APP 工程批量任务需要注意每个任务之间要有日志记录。失败任务要支持单独重试。数据库查询结果要缓存避免大量重复查询。生成结果要落到独立目录不要覆盖已有代码。9. 资源占用与性能观察9.1 资源占用在哪Workbuddy 本身的资源占用通常不高真正的资源消耗集中在以下几个环节MCP Server 进程每个 Server 独立运行占用一定内存。设计稿解析高分辨率设计稿或大文件解析时CPU 和内存会明显上升。数据库查询大数据量查询会占用内存建议加 LIMIT。代码生成阶段如果本地跑大模型显存占用会显著上升如果调用云端模型则主要看网络和接口配额。9.2 怎么观察推荐用以下方式观察Windows 任务管理器查看进程 CPU / 内存占用。macOS Activity Monitor 查看对应进程。命令行使用top或htop查看。如果本地跑模型用nvidia-smi查看显存占用。# 查看 MCP Server 相关进程的内存占用Linux 或 macOS 下使用 ps aux | grep -E mcp|workbuddy | grep -v grep9.3 性能优化技巧设计稿尽量压缩后导入避免超大原图直接解析。数据库查询加 LIMIT 100控制返回数据量。多个 MCP Server 分布在不同的端口和进程避免单点阻塞。生成 APP 时第一次先只生成 1 个页面验证链路再批量生成全部页面。如果本地资源不足优先考虑把生成任务放到云端执行本地只负责调度。10. 常见问题与排查方法问题现象可能原因排查方式解决方案添加连接器后提示连接失败MCP Server 未启动或端口错误检查 MCP Server 进程状态和端口监听情况启动 MCP Server确认端口与配置一致设计稿读取不到页面权限不足或链接过期确认设计稿分享链接有效期和账号权限重新生成分享链接授权给对应账号生成的 APP 布局错乱设计稿图层分组混乱在设计稿中规范图层命名和分组优化设计稿结构后重新生成数据库查询超时SQL 执行时间过长查看数据库慢查询日志加 LIMIT优化查询条件MCP 工具无法调用Token 过期或认证失败查看 Workbuddy 日志中的错误信息更新 Token重新测试连接批量任务中途卡住单任务异常未处理查看任务日志定位卡住的任务加入超时和失败重试机制生成的代码无法运行依赖缺失或环境不匹配打开生成工程检查 console 报错按报错安装缺失依赖显存不足本地模型尺寸过大使用 nvidia-smi 查看显存占用换小模型或改用云端推理排查时第一件事永远是看日志。Workbuddy 的日志一般会记录 MCP Server 的连接情况、工具调用参数和返回错误。日志里定位到具体是哪一步失败再去检查对应系统。11. 最佳实践与使用建议11.1 从小处开始验证第一次使用不要直接跑一个完整的大型设计稿。建议先拿一个单页设计稿、一个单表数据库跑通最小链路再逐步增加复杂度。最小验证清单1. 启动 Workbuddy。 2. 启动一个 MCP Server。 3. 添加一个连接器。 4. 设计稿导入一个页面。 5. 生成一个页面代码。 6. 确认代码可运行。这六步跑通了再考虑批量任务和复杂流程。11.2 设计稿规范化设计稿是输入质量的决定因素。推荐做到页面名称用英文小写加连字符避免中文和特殊字符。图层分组按“页面级分组 - 模块级分组 - 元素”组织。颜色、字体、间距尽量使用设计 token而不是散落的色值。移除无关的参考图层和标注图层。设计稿越规范AI 生成结果越稳定。11.3 数据库安全使用只读账号连接生产数据库。禁止在描述中要求 AI 执行 DELETE、UPDATE 等高危操作。查询结果脱敏后再交给 AI 处理。连接器配置中的密钥使用环境变量注入。11.4 目录与日志管理设计稿源文件、MCP 配置、生成结果分目录存放。每个批量任务生成独立日志文件。任务命名带时间戳方便回滚和对比。11.5 接口服务限制访问范围如果 MCP Server 需要暴露给其他团队调用绑定内网地址不要直接暴露公网。设置访问 Token。记录调用日志。定期轮换密钥。12. 关于 MCP 生态扩展的下一步连接器和 MCP 的关系弄清楚之后Workbuddy 的扩展方向就很清晰了。下一步可以尝试接入更多设计稿平台对比不同平台的还原效果。把数据库连接器扩展为读写分离模式实现业务数据回写。结合代码仓库连接器让生成的 APP 直接提交到 Git 分支形成自动提交流程。探索多 MCP Server 组合调用让一个任务串联设计稿、数据库、接口文档多个数据源。这套“连接器 MCP 设计稿到 APP”的组合本质上是在把重复的页面搭建工作标准化。值得先用一个小项目跑通再逐步扩大应用范围。如果你正在搭这套环境建议从单页设计稿和只读数据库起步先记录一段基线效果后面再对比优化。连接器如果不能用了第一反应不是重装 Workbuddy而是先检查对应 MCP Server 的进程、端口、Token 三个点大部分问题都出在这三处。