从蓝湖设计稿到 Codex UI 实现的本地桥梁。
DesignBridge 是一个独立的设计辅助工具，用来读取蓝湖设计稿，并查看其中的 图层、样式、切图和评论。抓取完成后，还可以把设计稿链接交给 Codex 还原 UI。它不属于任何一个业务项目，配置一次后可以辅助多个项目开发。
一次配置，多项目复用。
快速开始 · 抓取方式 · 切图导出 · Codex 插件 · UI 还原
-
在 DesignBridge 项目根目录运行一键启动脚本：
./start.sh
-
首次使用时，在客户端顶部点击 安装浏览器扩展，选择浏览器并点击 打开扩展管理页。
-
在浏览器中开启 开发者模式，点击 加载已解压的扩展程序，选择客户端显示的扩展目录并确认。
-
保持 DesignBridge 客户端开启，在顶部选择 浏览器插件。
-
粘贴具体的蓝湖设计稿链接，点击 开始抓取。客户端会打开所选浏览器，扩展自动把登录状态交给 DesignBridge。
-
回到 DesignBridge 查看抓取进度和设计稿。浏览器工具栏中的扩展按钮仍可用于主动抓取当前页面。
💡
start.sh会自动检查并准备项目依赖，不需要再手动执行其他启动命令。
| 抓取方式 | 适用场景 | 工作方式 |
|---|---|---|
| 浏览器插件（推荐） | 日常抓取 | 粘贴蓝湖链接并点击 开始抓取，客户端打开系统浏览器，由扩展读取登录状态。蓝湖接口请求、图片下载与文件保存仍由 Rust 端执行，Cookie 不会写入抓取记录。 |
| 内置浏览器 | 扩展未安装或通信异常 | 切换到 内置浏览器 后点击 开始抓取，使用原来的内置窗口完成登录和抓取。 |
⚠️ 浏览器扩展只需手动加载一次；客户端更新扩展文件后，需要在浏览器扩展管理页点一次 重新加载。
正式版客户端会把扩展和通信程序安装到稳定的应用数据目录，不依赖源码目录；DesignBridge 客户端需要在抓取期间保持开启。当前扩展抓取支持 macOS 和 Linux 上的 Chrome、Edge、Brave 与 Chromium，Windows 暂时继续使用内置浏览器。
在 DesignBridge 项目根目录运行：
./build.sh脚本会自动构建前端、生成独立 MCP，并打包 Tauri 正式版。产物位于：
src-tauri/target/release/bundle
默认跳过代码签名，适合本机安装和分发测试。
如果要让 Codex 在业务项目中读取 DesignBridge 数据，启动 DesignBridge 客户端后，在顶部点击 安装 Codex 插件 即可。客户端会调用 Rust 安装程序，同时安装个人插件，并把 MCP 显式注册到当前用户的 Codex 配置中。
这个步骤只需要在 DesignBridge 项目中完成一次，不要在业务项目中执行。安装完成后请完全退出并重新打开 Codex，然后新建一个任务，让插件和 MCP 配置刷新；仅刷新窗口或只新建会话可能不会刷新 MCP 列表。
如果客户端按钮因为系统环境问题无法执行，也可以在 DesignBridge 项目根目录使用备用脚本：
./install-plugin.shmacOS 用户也可以直接双击 install-plugin.command，效果相同。
脚本会自动把 DesignBridge 插件安装到当前用户的 Codex 个人插件目录，并注册 DesignBridge MCP。
插件安装后，DesignBridge 客户端和 Codex 插件会自动联动：客户端负责抓取蓝湖设计稿并复制 designbridge:// 链接，插件负责让 Codex 读取链接对应的图层、样式、切图和评论。
完全退出并重新打开 Codex 后，可以进行以下确认：
- 在插件列表中看到
DesignBridge。 - 在 设置 → MCP 服务器 中看到
designbridge。
如果以后更新了 DesignBridge 代码或插件规则，再次点击客户端的安装按钮并重启 Codex 即可。
插件与 MCP 运行文件会一起复制到当前用户的个人插件目录，MCP 配置也只指向这个稳定目录，不依赖开发时的项目路径。安装完成后，即使源码目录被移动或删除，Codex 仍然可以读取 DesignBridge 客户端保存的数据。换电脑或更新客户端版本时，在新客户端中再次点击 安装 Codex 插件 即可；业务项目不需要重新配置。
| 操作 | 使用方法 |
|---|---|
| 移动画板 | 在设计稿上按住鼠标并拖动。 |
| 缩放画板 | 点击顶部的加减按钮，或修改缩放百分比。支持 4% 到 400%。 |
| 查看图层 | 鼠标移到设计稿上，出现手形光标后点击。图层信息会显示在右侧。 |
| 选择重叠图层 | 在同一位置继续点击，即可逐层向下选择。 |
| 查看切图 | 虚线框表示该位置有切图，点击后可在右侧查看和导出。 |
| 查看评论 | 蓝色数字气泡表示蓝湖评论，点击气泡即可查看内容。 |
| 取消选择 | 点击设计稿外部，右侧信息栏会自动收起。 |
🖱️ 鼠标滚轮用于上下滚动画板；触控板双指缩放用于放大或缩小。
- 点击画板上带虚线框的切图。
- 在右侧确认切图预览和名称。
- 选择
PNG、JPG或WEBP。 - 选择
Android或iOS。 - 选择需要的图片尺寸。
- 点击 下载切图。
- 下载完成后，点击 打开导出目录。
🔍 切图预览可以点击放大。空白、完全透明和
1 × 1 px的无效图片会被自动过滤。
- 点击左侧记录可以重新打开已经抓取的设计稿。
- 蓝湖设计稿更新后，打开对应记录并点击画板顶部的 刷新，即可重新抓取并替换本地数据；刷新失败或取消时仍会保留旧记录。
- 左侧记录栏可以收起、展开，也可以拖动边缘调整宽度。
- 同一个设计稿链接只保留一条记录。再次提交相同链接时，会直接定位到原记录。
- 抓取失败时，点击记录旁的 重试。
- 不再需要某条记录时，点击删除按钮并确认。
这项功能是可选的。普通的设计稿查看和切图导出不需要配置 MCP。
安装完成后，MCP 使用标准的按需启动方式：Codex 需要读取设计稿时，会自动启动 DesignBridge MCP；读取完成后自动结束。平时不需要打开终端运行 MCP，也不需要让 MCP 窗口一直保持开启。
后续业务项目只需要把 DesignBridge 生成的 MCP 链接和局部截图发给 Codex，不需要在业务项目中安装依赖、复制脚本或再次配置 MCP。
DesignBridge 和业务项目是两个独立的目录：
| 项目 | 职责 |
|---|---|
| DesignBridge | 抓取蓝湖设计稿、保存设计数据并提供 MCP。 |
| 业务项目 | Codex 实际修改代码、创建组件和保存切图的位置。 |
实际使用时按以下顺序操作：
- 启动 DesignBridge，抓取并打开需要参考的蓝湖设计稿。
- 在画板中选中要实现模块的最外层容器图层，点击 MCP 链接 复制链接。
- 在 Codex 中打开你正在开发的业务项目目录。
- 把 MCP 链接、目标区域截图和实现要求一起发给 Codex。
- Codex 通过 DesignBridge MCP 读取该位置的图层、样式、切图和评论，然后直接在当前业务项目中实现 UI。
切图会通过 MCP 提供给 Codex，Codex 可以把需要的图片保存到业务项目的资源目录。切换到其他业务项目时，只需重复第 3 至第 5 步，不需要重新配置 MCP。
例如，你正在开发一个 picbind 前端项目，只需要实现蓝湖设计稿中的“登录弹窗”模块，而不是还原整个页面：
-
在 DesignBridge 中粘贴蓝湖链接并点击 开始抓取。
-
抓取完成后，在画板上点击登录弹窗，选择覆盖整个弹窗的最外层容器图层。
-
查看右侧的图层名称、位置和大小，确认红色边框刚好包住整个登录弹窗。如果选中了按钮、文字或背景等内部图层，在同一位置继续点击，直到选中正确的容器图层。
-
点击顶部的 MCP 链接。此时复制的是当前登录弹窗模块的定位链接，例如：
designbridge://design/e0c390c6-a652-4644-bba1-d8f1e56674cf/9aa66533-aa6c-4c55-a8ac-b23222fac054?node-id=已选图层ID不需要手动修改链接，直接使用按钮复制的内容即可。
-
截取登录弹窗所在的局部设计图。截图用于视觉核对，MCP 链接用于读取准确的图层数据。
-
在 Codex 中打开
picbind项目目录，发送下面的需求，并附上刚才的局部截图：请在当前 picbind 项目中实现截图里的登录弹窗模块。 DesignBridge MCP 链接： designbridge://design/e0c390c6-a652-4644-bba1-d8f1e56674cf/9aa66533-aa6c-4c55-a8ac-b23222fac054?node-id=已选图层ID 请通过 MCP 读取这个模块及其子图层的 frame、间距、颜色、圆角、字体、效果、切图和蓝湖评论，并结合截图实现。 请沿用当前项目已有的框架、组件和样式规范。需要的切图保存到当前项目的资源目录，不要实现截图中模块以外的页面内容。 -
Codex 会通过 DesignBridge MCP 读取登录弹窗容器及其子图层，只在当前
picbind项目中创建或修改对应的组件、样式和图片文件。
这里的 picbind 只是目标业务项目示例；换成其他项目时，只需要在 Codex 中打开对应目录并发送新的设计稿链接。DesignBridge 不需要复制到目标项目中。
- 在 DesignBridge 中打开设计稿。
- 实现某个模块时，选中该模块的最外层容器图层，再点击画板顶部的 MCP 链接。链接会包含当前模块的定位信息；未选中图层时复制整张设计稿链接。
- 将 MCP 链接、需要实现的局部截图和具体要求一起发给 Codex。
- Codex 会读取对应位置的图层、样式、切图和评论，并据此实现 UI。
也可以直接对 Codex 说 使用 DesignBridge 实现这个模块，再粘贴链接和截图；插件会自动选择对应的 DesignBridge 工作流。
示例需求：
请根据这个设计稿实现截图中的 UI：
designbridge://design/{projectId}/{imageId}
需要考虑该区域的蓝湖评论，并使用设计稿中的切图。
💬 Codex 会同时读取蓝湖评论。例如评论中指定了夜间颜色，Codex 会把它作为 UI 实现要求处理。
| 数据 | 说明 |
|---|---|
| 设计数据 | 设计稿、图层、切图和评论只保存在本机。 |
| 本地目录 | macOS 默认目录为 ~/Library/Application Support/com.designbridge.app/captures。 |
| 登录信息 | 蓝湖登录信息只保存在系统 WebView 的站点数据中，不会写入抓取结果。 |
| MCP 权限 | MCP 只读取本地抓取结果，不会修改蓝湖设计稿或评论。 |