图文攻略 · 同一支视频的 15 张截图
Claude Code 网页版：在浏览器里开云端会话
从连接 GitHub 到合并 PR 的完整链路——把仓库交给云端沙箱，看着它自己建分支并提交，打开它替你写好的 Pull Request；想接手时，再用一条命令把同一段对话搬到本地终端。
约 5 分钟 · 15 步，每步都能跳到原视频的精确秒数
一句话看懂 Claude Code 网页版
Claude Code 网页版把同一个 agent 放进 Anthropic 托管的云沙箱里跑，而不是跑在你机器上。GitHub 只授权一次，每个会话选一个仓库，然后用大白话描述任务：会话会在自己的分支（这里是 claude/initialize-project-…）上克隆、改动、提交、推送，并给出已经写好的 Pull Request。浏览器和终端不是两套产品——「Open in CLI」会复制一条 claude --teleport 命令，在本地终端里重新打开完全相同的对话，让你用自己的工具复核；合并之后，在 main 上执行一次 git pull 就能把结果拿回本地。
来源视频
本页所有截图都来自 Eric Tech 的录屏：一支完全在浏览器里操作的 Claude Code 网页版演示，录制于 2025 年 10 月，当时这个界面还标着「Research preview」。
截图仅用于给本站原创的步骤说明配图。录屏中显示的是 Claude Code v2.0.24 与 Sonnet 4.5，界面细节此后可能已经变化。该视频的赞助商段落没有出现在本页任何位置。
连接仓库
GitHub 只授权一次，之后每个会话选一个仓库。
- 1
从 claude.ai/code 开始，连接 GitHub
打开 claude.ai/code，这里会落到 /onboarding，标题旁挂着「Research preview」。页面上一句话就是整个产品的定位：在云端跑多个编码任务，浏览器、终端、手机都能用。点「Connect to GitHub」开始。
入口页 claude.ai/code/onboarding，页面提供的连接方式只有 GitHub。跳转到 0:40 - 2
确认 GitHub 的三项授权
GitHub 会让你确认 Claude 应用。权限列表很短也很具体：验证你的 GitHub 身份、了解你能访问哪些资源、代表你执行操作。点「Authorize Claude」之后会跳回 claude.ai。
授权前先读一遍权限——「代表你执行操作」才是会话能推送分支的前提。跳转到 0:52 - 3
认识云端会话的输入区
连好 GitHub 就进入会话主页：一个提示词输入框、一个「Select repository」按钮、一个写着「Default」的环境按钮，以及一份空的会话列表。没选仓库什么都不会跑，所以第一步永远是选仓库。
一个云会话需要三样东西——任务、仓库、环境，全都集中在这一个输入区里。跳转到 1:02 - 4
选好仓库，输入 /init
此时仓库按钮显示 EricTechPro/AI-Diagrammer，环境仍是「Default」。输入框里敲的是单行斜杠命令 /init——测试一个新云环境最省事的方式，因为它唯一的产物就是 agent 读代码写出来的 CLAUDE.md。
第一个任务只有三个字符：/init。跳转到 2:20
配置云环境
给沙箱起名、决定它能访问哪些网络，再把它需要的密钥贴进去。
- 5
定义云环境
「New cloud environment」只有三块。给沙箱起名（只有一个环境时 Default 就够）；选网络策略；再按 .env 格式粘贴密钥——录屏里用的是 API_KEY=hunter2 和 DATABASE_URL=bondi 这类占位值。这些东西不存在你本机，属于那个沙箱。
环境变量按 .env 整块粘贴，一次就能配好一个应用的全部配置。跳转到 1:25 - 6
认真选网络策略
网络菜单是这一屏唯一的安保决定。「Trusted network access」从已验证来源下载依赖，兼顾安全与性能；「No network access」完全断网、最安全但功能受限；「Custom access」让你自己写允许或拒绝的域名清单。
默认是 Trusted；No network access 最严格，Custom 最精确。跳转到 1:34
跑第一个任务
描述任务，让会话自己提交、推送，并起草 Pull Request。
- 7
会话自己做 git 操作
会话记录里能看到 agent 依次执行 git add CLAUDE.md、一次把 Claude 署名为协作者的 commit，以及 git push -u origin claude/initialize-project-011CUK5b4bEuwLiG2a6MdzrR。分支是会话自己建的——你不必给它起名，也没碰过 main。
一个文件、132 行新增，推送到会话自己创建的分支上。跳转到 4:01 - 8
读它交回来的总结
任务停下来后，会话会总结做了什么、文件里有什么：开发命令、Supabase 与 Azure OpenAI 需要的环境变量、架构说明、数据模型、数据库 schema，以及常用任务的实践指南。总结下面并排两个按钮：「Create PR」和「Open in CLI」。
这份总结同时就是复核那份 CLAUDE.md 的清单。跳转到 3:38 - 9
落在一个已经写好的 Pull Request 上
点「Create PR」会打开 GitHub 的 compare 页面：绿色的「Able to merge」、已经选好的对比分支、填好的标题，以及一段真实的描述，结尾是 Generated with [Claude Code](https://claude.com/claude-code)。你可以改文案，也可以直接点「Create pull request」。
标题、正文、分支对比，全部由云端会话预先填好。跳转到 4:24
把会话接到本地终端
从浏览器跳进你机器上的同一段对话。
- 10
把会话 teleport 到本地终端
「Open in CLI」会复制一条命令。在你本机的项目目录里执行 claude --teleport session_011CUK5b4bEuwLiG2a6MdzrR，同一段对话就在本地重新打开——版本横幅、模型，以及正在流式输出的 /init 分析，都和在浏览器里一模一样。这是接续，不是重来。
claude --teleport 把浏览器里的对话原样接到你自己的终端。跳转到 5:42 - 11
要一张架构图，它就给你一张真图
回到会话里，用大白话说一句要一份带 Mermaid 图表的 README，产出的就是仓库里真正渲染出来的架构图：顶部是 Diagram Editor 与 Auth Form，往下是 Canvas Rendering、AI Input、Supabase、History Hook 和 Toolbar，再往下是 Azure OpenAI、存储和自动布局模块。GitHub 会在 README 的 Preview 标签页把它画出来。
Mermaid 源码是 Claude 写的，图是 GitHub 渲染的。跳转到 6:21
合并并同步回来
在 GitHub 合并、在 main 上 pull，本地仓库就和云端会话一致了。
- 12
不用离开 GitHub 就能合并
1 号 Pull Request 的标题是 Initialize project documentation with CLAUDE.md and comprehensive README，把两个 commit 合进 main。合并完成后 GitHub 会给出确认，并提供一个「Delete branch」按钮来清理会话分支——这一步大多数人会忘。
已合并、已关闭，并提示你可以删掉会话分支。跳转到 7:19 - 13
把合并结果 pull 回本地
在 main 上执行一次 git pull 就快进到合并提交，输出是 2 files changed, 391 insertions(+), 1 deletion(-)：CLAUDE.md 新增 132 行，README.md 新增 260 行。云端会话的产出现在就在你机器上，而且是你先看过才生效的。
快进到合并提交：两个文件、391 行新增、1 行删除。跳转到 7:37
并行开多个会话
云端会话真正改变工作流的地方：每个会话都有自己的分支和沙箱。
- 14
旧形态：每个开发者一套环境
录屏把被替代的工作流画了出来。Dev 1 和 Dev 2 各自在自己的环境里跑 Claude Code，各自操作同一个项目的不同分支，最后都合回 main。一套环境同时只能干一件事——不跑完手上的分支，就开不了下一个。
两个开发者、两套环境、两个分支：天然串行。跳转到 7:53 - 15
新形态：一个人开多个云端会话
同一个开发者同时铺开三个 Claude Code 网页版会话。每个会话有自己的沙箱、自己的分支、自己的 Pull Request，三条线通过 GitHub 回来，测试顺序随意。瓶颈从「我有几台机器」变成「我能审多快」。
三个会话、三个分支、三个 Pull Request——沙箱之间不会互相冲突。跳转到 8:30