docs: add promotional article for Coder Studio

Author: pallyoung

docs/promotion/article-2026-05.md

@@ -0,0 +1,194 @@
+# 打破设备的边界：Coder Studio 让你的开发工作流真正"随时随地"
+
+## 一个真实的开发困境
+
+周五下午，你在办公室启动了一个复杂的代码重构任务，AI Agent 正在帮你处理。下班时间到了，你想回家再继续看结果。但问题来了：
+
+- 你的终端还在办公室电脑上跑着
+- 回家想查看进度，只能重新 SSH 接管环境
+- 手机上收到通知，却看不到完整的 workspace 上下文
+- 想在平板上审阅代码改动？几乎不可能
+
+这不是一个新问题，而是每个开发者都曾面对的现实：**你的开发环境被物理设备绑定了**。
+
+## 从"被设备束缚"到"随时继续"
+
+**Coder Studio** 的设计理念非常简单：
+
+> Deploy once, code everywhere.
+
+**一次部署，随处继续**。
+
+它把你的 AI coding workspace 变成了一个浏览器可访问的工作台。Claude Code 或 Codex、文件、Git、终端——全部集成在一个界面里。你的工作流不再被固定在某一张桌子前或某一台设备上。
+
+## 它是如何改变你的工作方式的
+
+### 场景一：办公室启动 → 通勤路上查看
+
+在办公室启动服务后，你可以：
+
+1. 创建一个 Claude 会话处理某个 feature
+2. 让 Agent 先开始工作
+3. 下班后用手机浏览器打开同一个 workspace
+4. 在通勤路上实时查看 Agent 输出和 Git 变化
+
+不是远程桌面那种"被迫盯着小屏幕操作"，而是真正为移动端优化的工作台。
+
+### 场景二：跨设备无缝切换
+
+你在办公室用桌面电脑发起任务，晚上想用家里的笔记本继续：
+
+- 打开浏览器，访问同一个服务地址
+- 完全相同的 workspace 上下文
+- 不需要重新 clone、重新配置、重新接管
+
+**这是同一个工作区，不是新的环境**。
+
+### 场景三：减少工具切换的碎片化
+
+传统的 AI 编程工作流是这样的：
+
+```
+终端 (运行 Claude Code)
+  ↓ 切换
+编辑器 (查看文件)
+  ↓ 切换
+Git 工具 (看 diff)
+  ↓ 切换
+浏览器 (查资料)
+```
+
+每一次切换都是注意力的流失。Coder Studio 把这一切整合在一个工作台：
+
+| 功能模块 | 说明 |
+|---------|------|
+| Agent 面板 | 运行 Claude Code 或 Codex，实时查看输出 |
+| 文件树 + 编辑器 | Monaco Editor 支持语法高亮，边看边改 |
+| Git 视图 | 分支、变更文件、diff 一目了然 |
+| 终端 | 独立的 Shell 终端，验证 Agent 的结果 |
+
+**一个浏览器窗口，完成所有工作**。
+
+## 核心设计理念
+
+### 1. 真正的"随时随地"
+
+很多"云 IDE"产品其实只是把编辑器搬到了网页上。但你的实际工作流远不止编辑器：
+
+- Agent 的执行状态
+- 文件的实时变化
+- Git 的 diff 和历史
+- 终端的输出日志
+
+Coder Studio 把这四件事放在一起，让你在任何设备上都能看到完整的上下文。
+
+### 2. 本地运行，数据可控
+
+服务运行在你自己的机器上，不是某个云端的虚拟机：
+
+- 代码永远留在本地
+- 会话数据不经过第三方云
+- 可以完全离线运行（仅文件和终端功能）
+
+**你的代码，你的设备，你掌控一切**。
+
+### 3. 响应式设计，各端优化
+
+同一个服务地址，在不同设备上自动适配：
+
+**桌面端**：完整的四面板布局，支持快捷键操作，适合深度编码
+
+**平板端**：触控优化，适合审阅代码、追踪进度
+
+**手机端**：紧凑布局，随时查看 Agent 状态和终端输出
+
+## 从安装到第一次使用
+
+只需要两步：
+
+```bash
+# 1. 全局安装
+npm install -g @spencer-kit/coder-studio
+
+# 2. 启动服务
+coder-studio open
+```
+
+浏览器会自动打开工作台。点击"打开工作区"，选择你的项目目录，就可以开始了。
+
+> 没有安装 Claude Code 或 Codex CLI？没关系，你可以先使用文件浏览和终端功能，之后再补装。
+
+## 实际工作流示例
+
+### 工作流一：Agent 驱动的异步开发
+
+1. **桌面端**：创建 Codex 会话，描述你要实现的功能
+2. **移动端**：在通勤路上用手机查看 Agent 的进度和输出
+3. **平板端**：用平板审阅生成的代码改动
+4. **桌面端**：在完整键盘环境下做最后的调整和提交
+
+整个过程，workspace 保持连续，不需要"重新接手"。
+
+### 工作流二：团队实时查看
+
+同一局域网内的同事可以通过浏览器访问你的 workspace：
+
+- 团队成员实时查看你的工作状态
+- 无需屏幕共享，直接展示代码和终端
+- 适合代码走查和问题排查
+
+### 工作流三：多 Agent 并行
+
+在一个工作区内同时运行多个会话：
+
+- 一个 Codex 会话处理单元测试
+- 一个 Claude 会话重构某个模块
+- 同时查看两个 Agent 的进度和输出
+
+## 技术实现亮点
+
+| 组件 | 技术选型 | 说明 |
+|------|---------|------|
+| Frontend | React + Vite + Jotai | 现代化前端架构，状态管理清晰 |
+| Backend | Fastify + WebSocket | 轻量高效，支持实时通信 |
+| Terminal | xterm.js + node-pty | 完整的终端模拟，支持交互 |
+| Editor | Monaco Editor | VS Code 同款编辑器内核 |
+| Storage | SQLite | 本地数据持久化，无需额外服务 |
+
+整个系统使用 Node.js 编写，安装简单，依赖少，启动快。
+
+## 谁适合使用 Coder Studio
+
+- **AI 辅助编程的深度用户**：每天都用 Claude Code 或 Codex，希望更高效地管理多个会话
+- **需要在多设备间切换的开发者**：办公室电脑、家里电脑、移动设备无缝衔接
+- **团队协作场景**：需要实时共享工作状态，方便代码走查和问题排查
+- **注重数据隐私的用户**：希望代码和会话数据留在本地，不依赖云服务
+
+## 开始你的"随处编码"之旅
+
+如果你已经厌倦了：
+
+- 被固定在某一台设备前工作
+- 在终端、编辑器、Git 工具之间反复切换
+- 换个设备就要重新接管环境
+- 手机上只能看通知，看不了完整的 workspace
+
+那么 Coder Studio 可能是你一直在寻找的工具。
+
+```bash
+npm install -g @spencer-kit/coder-studio
+coder-studio open
+```
+
+**Deploy once, code everywhere.** 
+
+让你的开发工作流，真正自由。
+
+---
+
+**相关链接**：
+
+- [GitHub 仓库](https://github.com/spencerkit/coder-studio)
+- [快速开始指南](help/quick-start.md)
+- [App 功能总览](help/app-overview.md)
+- [移动端使用指南](help/mobile-guide.md)