【外滩大会2026】Workbench —— 面向本地开发与 AI 工作流的 Windows 桌面工作台

[yyc-labs]

Workbench —— 面向本地开发与 AI 工作流的 Windows 桌面工作台

👤 团队 / 作者

• YYC Labs
• GitHub：yyc-labs

---

📖 项目简介

Workbench 是一款面向 Windows 开发者的 本地优先（Local First）AI 开发工作台。

它基于 Electron、React、TypeScript 构建，将本地项目管理、代码浏览与编辑、Git 工作流、Markdown 文档、AI CLI Runtime、AI Gateway、会话记录、学习资料以及终端管理整合到统一的桌面应用中。

传统开发过程中，开发者通常需要在：

• IDE
• 终端
• Git 客户端
• Markdown 工具
• AI 对话窗口
• 浏览器

之间频繁切换。

Workbench 希望围绕 "项目（Project）" 和 "开发上下文（Context）" 组织统一工作空间，让代码、终端、Git、AI 与文档自然衔接，减少工具切换和上下文丢失。

目前项目已能够作为日常 AI 辅助开发工作台使用，并持续进行功能迭代。

---

🚀 我做了什么

我使用 Codex（GPT 系列模型） 参与完成了 Workbench 的产品设计、架构规划、代码实现与持续优化。

Codex 主要协助完成：

• Electron Main / Preload / Renderer 分层架构
• React 页面与 Zustand 状态管理
• Monaco 编辑器与 Markdown 工作区
• Git 状态、分支、提交、Diff、冲突处理
• AI CLI Runtime 与 Runtime Profile
• Claude Code、OpenAI Codex 等 AI CLI 接入
• AI Gateway、Provider 管理、模型路由
• AI Transcript 导入、浏览与日志管理
• Windows Native / WSL 执行环境适配
• 学习中心、浏览器辅助学习
• 网页长截图与固定元素处理
• 性能优化、模块重构
• 文档编写、代码审查、Bug 修复

Codex 不仅用于生成代码，也参与需求拆解、技术方案评审、架构设计、模块重构与问题分析，成为整个开发过程中的 AI 编程协作伙伴。

---

✨ 核心功能

📁 本地项目工作区

支持项目管理、最近打开记录，并围绕项目快速进入代码、Git、终端和 AI 工作流。

💻 代码浏览与编辑

• Monaco Editor
• 文件树
• Markdown
• Diff 查看
• 文件预览

🌿 Git 工作流

支持：

• 仓库状态
• 分支管理
• Commit
• 文件 Diff
• 暂存区
• 常用 Git 操作

🤖 AI Runtime

支持项目级 Runtime 配置，区分：

• Windows Native
• WSL

已适配：

• Claude Code
• OpenAI Codex

🔀 AI Gateway

提供：

• Provider 管理
• 模型路由
• Gateway
• Streaming Response

📝 AI Transcript

支持：

• 会话导入
• 浏览
• 日志查看
• Markdown / JSON 联动

📄 Markdown 工作区

支持：

• GFM
• Mermaid
• 代码高亮
• 表格

🖥️ 多终端

基于：

• node-pty
• xterm.js

实现多个终端统一管理。

📚 学习中心

支持：

• 学习资料
• 技能管理
• 浏览器辅助学习
• 长截图
• 元素标记
• 截图预览

---

🏗 技术架构

Workbench 遵循 Electron 进程隔离模型：

React Renderer
      │
      ▼
Typed Preload API
      │
      ▼
IPC Handlers
      │
      ▼
Electron Main Domains
      │
      ├── 文件与项目服务
      ├── Git 服务
      ├── Runtime
      ├── AI Gateway
      ├── Transcript
      └── Windows / WSL

共享类型、IPC 契约、主进程能力和界面逻辑彼此解耦，避免 Renderer 直接访问系统能力。

同时针对 Windows Native 与 WSL 设计了统一 Runtime 执行模型。

---

🛠 技术栈

• Electron 42
• React 18
• TypeScript
• Vite
• electron-vite
• Zustand
• Monaco Editor
• xterm.js
• node-pty
• React Markdown
• Mermaid
• Tailwind CSS
• Playwright Core
• Node.js Test Runner
• Git

---

⭐ 项目特色

Workbench 并不是简单堆叠多个工具，而是围绕 项目上下文 组织整个开发流程：

Project
├── Code
├── Git
├── Terminal
├── AI Runtime
├── AI Transcript
├── Markdown
└── Learning

AI 不再只是一个聊天窗口，而成为项目工作流的一部分。

开发者可以在一个工作台中完成：

• 编码
• Git
• AI
• 文档
• 终端
• 学习

完整闭环。

---

🤝 Codex 开发实践

开发过程中，Codex 主要承担：

1. 功能拆解
2. 架构设计
3. 模块重构
4. 页面生成
5. IPC 与类型生成
6. Runtime 兼容分析
7. Bug 定位
8. 文档编写
9. 持续优化

Codex 不仅提升编码效率，也帮助保持统一架构与工程规范。

---

⚠️ 开发挑战

主要挑战包括：

• Electron IPC 权限边界
• Windows 文件系统访问
• WSL 与 Native 差异
• AI Runtime 生命周期管理
• Gateway Provider 适配
• Streaming Response
• Transcript 大文本性能
• Monaco 与 Markdown 集成
• 深浅色主题一致性

Codex 在问题定位、方案验证、代码重构与文档沉淀过程中提供了大量帮助。

---

📌 项目状态

目前已完成：

• ✅ 本地项目工作区
• ✅ Git 工作流
• ✅ Claude Code Runtime
• ✅ OpenAI Codex Runtime
• ✅ AI Gateway
• ✅ AI Transcript
• ✅ Markdown & Mermaid
• ✅ 多终端
• ✅ 浏览器截图
• ✅ Windows / WSL 支持
• ✅ 学习中心

项目仍在持续迭代，未来将扩展更多 Runtime Provider、平台支持及自动化发布能力。

---

🔗 项目链接

GitHub：

https://github.com/yyc-labs/Workbench

[TreeLin]

感谢分享！Workbench 的完成度很高 👍 有两点想请你补充一下，方便我们收录到 Showcase：

1. 效果截图 / 演示：正文暂时没有看到界面截图或演示视频，方便贴一两张工作台实际界面吗？
2. 百炼能力：我们 Showcase 主要沉淀基于阿里云百炼的开发实践，方便说明一下项目中是否 / 如何用到了百炼 CLI、百炼模型或 Skill 吗？如果这次主要用的是其他工具，也可以如实说明。

补齐后我们就可以整理上线啦～

👉 提交加入百炼开源开发者计划：http://bailian.console.aliyun.com/opensource

[yyc-labs]

✨ 功能展示

🚀 AI 工作台

Workbench 提供统一的 AI 工作台，可集中管理常用的 AI 工具、开发项目和工作环境。无需频繁切换不同应用，即可快速进入开发状态，为 AI 编程打造更加流畅、高效的工作流。

---

⚡ 一键启动项目

Workbench 能够自动识别项目根目录中的启动脚本，并提供一键启动能力。

所有开发服务均由 Workbench 统一管理，无需额外打开多个终端窗口，有效避免任务栏和桌面被大量命令行窗口占用，让开发环境更加整洁。同时支持同时管理多个项目，大幅提升日常开发效率。

---

💻 集成开发工作区

Workbench 提供轻量级集成开发工作区，将项目浏览、文件管理、代码编辑、终端以及 Markdown 阅读整合到同一界面，减少开发过程中频繁切换 IDE、资源管理器和文档工具。

同时针对 Markdown 阅读体验进行了优化，更适合阅读技术文档、README 和开发笔记。

---

🌿 Git 助手

内置 Git 助手，帮助开发者快速完成日常版本管理工作。

支持标准化 Commit 信息生成、快速提交代码等功能，减少重复命令输入，使 Git 操作更加高效、规范，适用于个人开发及团队协作。

---

📄 Markdown 阅读器

安装 Workbench 后，可直接关联并打开 Markdown 文件。

内置高质量 Markdown 渲染引擎，支持快速浏览 README、项目文档、接口文档及开发笔记，为开发者提供更加舒适的阅读体验。

---

🌐 浏览器集成

完成浏览器配置后，可通过 Ctrl + Shift + S 快速启动浏览器。

浏览器实例由 Workbench 统一管理，可快速打开开发页面，并为后续截图、自动化测试及页面调试提供统一入口。

---

📸 浏览器截图

Workbench 内置浏览器截图能力，支持整页长截图以及指定元素截图。

截图完成后既可以直接在 Workbench 内查看，也可以调用系统默认图片查看器打开，方便开发、测试、文档编写及 Bug 反馈等场景。

---

🔀 AI 网关与协议转换

Workbench 内置本地 AI 网关，可统一管理模型访问配置，并支持不同 AI 服务之间的协议转换。

通过协议适配，可将不同模型接口统一为一致的调用方式，方便在 Claude Code、Codex 等 AI 编程工具之间切换，降低不同模型接入成本，提高 AI 工作流的灵活性。

---

📱 AI 消息通知

Workbench 支持接收 Claude Code、Codex 等 AI 编程工具的运行消息。

通过简单配置，可将通知实时推送至手机飞书应用，在任务完成、需要用户确认或发生异常时第一时间收到提醒，无需长时间守在电脑前等待 AI 执行结束。

[TreeLin]

截图收到了，界面完成度很高，谢谢补充 👍（第 1 点效果展示已解决）

还差第 2 点就能收录：社区 Showcase 收录的是基于阿里云百炼（ModelStudio）能力的案例。目前正文和补充里，开发用的是 Codex（GPT 系列），AI Gateway 适配的是 Claude Code / Codex，暂时没看到百炼的直接使用。方便说明一下吗：

1. Workbench 的开发过程有没有用到百炼 CLI（bl）/ 百炼模型做编码；
2. 或者 AI Gateway / Runtime 里有没有内置 / 接入百炼模型（如 qwen3-coder、qwen3.6-plus 等）作为可选 Provider？把具体模型名和接入方式补上即可。

补齐后我们就整理上线～

👉 提交加入百炼开源开发者计划：http://bailian.console.aliyun.com/opensource

[yyc-labs]

关于百炼（ModelStudio）能力的补充说明

感谢反馈！

Workbench 在开发过程中确实使用了阿里云百炼（ModelStudio）能力，使用 百炼 CLI（bl） 及百炼模型参与了代码分析、功能开发、文档生成等开发工作。

AI Runtime

Workbench 采用开放式 AI Runtime 架构，并不局限于 Codex 或 Claude Code。

支持开发者自定义：

• 启动命令（Command）
• 启动参数（Arguments）
• 工作目录（Working Directory）
• 运行环境（Environment）

因此可以将 百炼 CLI（bl）、Codex、Claude Code 以及其他 AI CLI 工具作为 Runtime 统一管理和快速启动，方便根据不同开发场景自由切换。

AI Gateway

Workbench 的 AI Gateway 采用兼容 OpenAI API 的 Provider 设计，可配置接入阿里云百炼（ModelStudio）提供的模型服务。

开发者只需配置：

• Endpoint
• API Key
• Model Name

即可使用百炼模型（如 Qwen3-Coder、Qwen3.6-Plus 等）作为 AI Provider，并统一纳入 Workbench 的 AI 工作流。

设计目标

Workbench 希望通过 Runtime 与 AI Gateway 的统一抽象，为开发者提供一个开放的 AI 开发平台。

开发者无需受限于某一种 AI 工具，可以根据需求自由选择百炼 CLI、Codex、Claude Code 等不同 Runtime，并结合百炼模型及其他模型服务，构建统一、高效的 AI 开发工作流。

[TreeLin]

你的案例已收录到 Showcase：https://modelstudioai.github.io/showcase/ ，感谢贡献！🎉

另外邀请你申请「阿里云百炼认证开发者」🎖️

你的案例已经收录到社区 Showcase，正好符合认证的贡献要求。麻烦花 1 分钟填一下认证申请问卷，我们会据此为你开通认证权益：

👉 https://survey.aliyun.com/apps/zhiliao/Zinj0FNaW

填写时建议备注上你的 GitHub ID（yyc-labs）和本 issue 链接，方便我们快速对上你的案例。有任何问题，直接回复本 issue 即可。

👉 提交加入百炼开源开发者计划：http://bailian.console.aliyun.com/opensource