多彩编程 多彩编程MZPH · CODE BLOG
ARTICLE DETAIL

文章详情

深耕前端与后端开发技术的一线实战笔记与踩坑复盘。

Claude Code 终于有好用的 UI 了,这个开源项目牛啊

Claude Code 终于有好用的 UI 了,这个开源项目牛啊 1. Claude Code 命令行体验的真实痛点与 1Code 的定位Claude Code 的能力毋庸置疑终端里一句自然语言就能让它读代码、改文件、跑测试。但真把它当成日常主力工具用上一周你会发现它的短板根本不在模型能力而在交互体验。我身边不少同事第一次用 Claude Code 时都卡在同一个地方它到底改了什么终端里刷过一堆日志最后只留一句 Done你想确认改动还得自己git diff或者切到编辑器里翻。这就是纯命令行 AI 编程的盲写问题。具体拆开看有三个高频痛点。第一是看不见变更。Claude Code 在终端里执行 Edit、Write、Bash 这些工具时输出的是文本流不是 diff 视图。它改了三个文件、删了两行、加了一个函数你只能从日志里拼凑。想核对就得手动git statusgit diff来回切窗口。第二是分支管理靠脑补。Claude Code 默认在你当前工作目录里操作如果你正在 main 分支上它可能直接改 main。回滚成本高尤其是它一次改了十几个文件的时候。你当然可以手动git checkout -b feature/xxx再启动但每开一个新任务就要重复一遍很容易忘。第三是并行任务难管理。你想让 AI 同时处理加登录接口和修支付 bug两件事只能开两个终端窗口各自 cd 到不同目录还得自己保证它们不冲突。窗口一多切来切去就乱了。1Code 这个开源项目就是冲着这三个痛点来的。它的定位一句话说清楚给 Claude Code 套一个 Cursor 风格的可视化外壳底层还是 Claude Code 的 Agent 能力但交互层换成了桌面应用——左侧会话列表、中间对话、右侧实时 Diff、底部 Git 操作。核心机制是Git Worktree 隔离每个对话会话跑在独立的 worktree 里对应一个独立分支互不干扰。Git Worktree 是什么简单说Git 允许你把同一个仓库的多个分支同时检出到不同目录。传统做法是一个仓库一个工作目录切分支要git checkout切之前还得 stash 或 commit。Worktree 让你在repo/之外再挂一个repo-feature-a/两个目录共享同一个.git但各自检出不同分支。1Code 就是给每个 Chat Session 自动创建一个 worktreeAgent 在里面随便改main 分支永远干净。适合谁用三类人最值得试一是已经在用 Claude Code、但受够终端盲操作的开发者二是需要同时推进多个功能分支、又怕搞乱 Git 历史的团队三是想要 AI 编程有可视化反馈——看到改了什么、计划做什么、执行到哪一步——的人。如果你只是偶尔让 AI 补个函数终端够用但如果你把 Claude Code 当主力1Code 这类 UI 的价值会立刻显现。2. 前置准备TaoToken 接入 Claude Code 的 Base URL 与 Key 配置在装 1Code 之前得先把 Claude Code 本身跑通。Claude Code 默认走 Anthropic 官方接口但国内直连经常不稳而且官方订阅对个人开发者不算便宜。更实际的做法是走兼容 Anthropic 协议的 API 网关把 Base URL 和 Key 配好Claude Code 和 1Code 都能复用这套配置。我用的是 TaoToken 的 Anthropic 兼容端点。它的好处是协议层和 Anthropic 一致Claude Code 不需要改任何代码只要改环境变量就行。下面是我实测跑通的配置流程。首先去控制台拿 Key。打开https://taotoken.net/console注册后在 API Keys 页面创建一个新 Key复制出来。注意 Key 只在创建时显示一次丢了就得重建。然后确认你要用的模型 ID。TaoToken 的模型列表在文档页https://taotoken.net/doc能查到Claude 系列常用的有claude-sonnet-4-5、claude-opus-4-1这类。模型 ID 必须和文档里写的一字不差写错了会直接报 model not found。接下来是配置 Claude Code 的环境变量。Claude Code 读取的是ANTHROPIC_BASE_URL和ANTHROPIC_API_KEY这两个变量。Base URL 填https://taotoken.net/api注意不要带末尾斜杠也不要带 UTM 参数——UTM 是给网页统计用的API 请求带上会 404。macOS / Linux 下写到 shell 配置里# 写入 ~/.zshrc 或 ~/.bashrc export ANTHROPIC_BASE_URLhttps://taotoken.net/api export ANTHROPIC_API_KEYsk-你的TaoToken密钥Windows PowerShell 下用$env:ANTHROPIC_BASE_URL https://taotoken.net/api $env:ANTHROPIC_API_KEY sk-你的TaoToken密钥写完source ~/.zshrc或者重开终端然后验证变量生效echo $ANTHROPIC_BASE_URL # 期望输出https://taotoken.net/api这里有个坑要提前说Claude Code 有些版本会优先读~/.claude/settings.json里的配置环境变量反而不生效。如果你配了环境变量但 Claude Code 还是连官方检查一下这个文件。正确的 settings.json 长这样{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_API_KEY: sk-你的TaoToken密钥 } }路径在 macOS/Linux 是~/.claude/settings.jsonWindows 是%USERPROFILE%\.claude\settings.json。这个文件如果存在里面的 env 会覆盖系统环境变量所以两边保持一致最省事。配完之后先别急着装 1Code直接在终端跑一次 Claude Code 确认链路通claude 用一句话说明这个项目是做什么的如果返回了正常回答说明 Base URL Key Model 三件套都对了。如果报 401多半是 Key 错了或者没生效如果报连接超时检查 Base URL 是不是写成了带 UTM 的网页地址。这一步跑通后面 1Code 才有意义——因为 1Code 本质是 Claude Code 的 UI 壳底层还是调这套接口。3. 1Code 安装配置从源码构建到 Worktree 参数落地前置链路通了现在装 1Code。它提供两种方式源码构建免费和订阅预编译版。我建议先走源码构建把核心的 Worktree Diff 体验跑通觉得好用再考虑订阅。源码构建的前置依赖有三个BunJS 运行时、Python部分脚本用、以及 macOS 上的 Xcode Command Line Tools。Windows 和 Linux 对应的是各自的构建工具链。先确认 Bun 装好bun --version # 期望输出类似1.1.x没有的话去 bun.sh 按官方命令装。然后克隆仓库并安装依赖git clone https://github.com/21st-dev/1code.git cd 1code bun install接下来这一步是最容易踩坑的地方——下载 Claude CLI 二进制bun run claude:download这个命令会把 Claude Code 的 CLI 二进制拉到项目里。如果你跳过这步直接 build装出来的 1Code 界面能开但 Agent 功能完全用不了点发送没反应。我第一次就是漏了这步排查了半小时才发现是 CLI 没下载。下载完开始构建bun run build构建成功后打包成桌面应用。macOS 用bun run package:macWindows 用bun run package:winLinux 用bun run package:linux。打包产物在dist/或release/目录下双击安装即可。装好第一次启动1Code 会读你系统里的 Claude Code 配置。如果前面~/.claude/settings.json配好了它会自动继承 Base URL 和 Key。但为了保险1Code 自己的设置里也建议显式填一遍。它的配置项对应关系是这样的配置项填写内容说明Base URLhttps://taotoken.net/api不带末尾斜杠、不带 UTMAPI Keysk-你的TaoToken密钥和 Claude Code 用同一个Model IDclaude-sonnet-4-5必须和文档一致Worktree 根目录默认~/.1code/worktrees可改成项目同级目录默认分支前缀1code/每个会话自动建分支Worktree 这块有个参数值得调Worktree 根目录。默认放在用户目录下好处是不污染项目但如果你习惯在项目旁边看分支可以改成项目同级比如/Users/you/projects/worktrees。改完之后每个新会话会在那里创建一个独立目录对应一个1code/xxx分支。还有一个隐藏配置在 1Code 的 settings 里是否自动清理已合并的 worktree。默认是关的意味着你跑完一个任务、合并了分支worktree 目录还在。任务多了会攒一堆。建议打开自动清理或者定期手动git worktree prune。配置写完重启 1Code。这时候左侧会话列表是空的点新建会话它会让你选一个项目目录。选完之后1Code 自动做三件事基于当前分支创建一个新 worktree、在新 worktree 里检出1code/随机后缀分支、把 Claude Code 的 Agent 指向这个目录。整个过程你不用敲任何 git 命令。4. 验证请求多会话并行与实时 Diff 的成功结果确认配置对不对跑一个真实任务就知道。我拿一个实际的小需求来验证给一个 Express 项目加一个/health接口。新建会话后在对话框输入需求1Code 会先进入Plan Mode。这一步是它和纯终端体验差别最大的地方——Claude 不会直接动手而是先输出一个结构化的计划用 Markdown 渲染出来比如## 计划 1. 在 routes/ 下新建 health.js 2. 在 app.js 注册路由 3. 添加对应测试你可以审批、修改、或者让它补充信息。确认后点执行Agent 才开始改文件。这时候右侧的 Diff 面板会实时刷新——每改一个文件对应的高亮就出来绿色是新增红色是删除。这比终端里刷日志直观太多。执行完成后右侧 Git 面板会显示这次会话改了哪些文件。你可以直接在里面 Stage、Commit不用切终端。Commit 完之后这个 worktree 对应的分支就有了一个干净的提交。现在验证多会话并行。再点新建会话选同一个项目目录输入另一个需求比如给用户接口加参数校验。1Code 会创建第二个 worktree检出另一个1code/分支。两个会话同时在跑各自改各自的目录互不干扰。你可以在左侧会话列表里来回切每个会话的对话历史、Diff、Git 状态都是独立的。这里的关键验证点是两个会话的改动不会串。你可以分别在两个会话里 Commit然后回到主项目目录git branch看一下应该能看到两个1code/开头的分支各自带着自己的提交。main 分支从头到尾没被动过。再验证一下和 Cursor 的协作。1Code 负责让 Agent 在隔离环境里改代码Cursor 负责你人工 review 和微调。流程是这样在 1Code 里让 Agent 改完并 Commit然后在 Cursor 里打开主项目用git checkout 1code/xxx切到那个分支就能看到 Agent 的全部改动。你在 Cursor 里 review、改几行、再 commit回到 1Code 继续下一个任务。两边共享同一个.git分支是通的。如果你想让 Cursor 里的 AI 也走同一套接口Cursor 的 Settings 里可以配 OpenAI 兼容的 Base URL。TaoToken 的 API 端点https://taotoken.net/api同时兼容 Anthropic 和 OpenAI 协议Cursor 里填这个地址 同一个 Key 对应模型 ID 即可。这样 1Code 和 Cursor 用的是同一套额度管理起来方便。验证成功的标志有三个一是 1Code 里 Agent 能正常返回、能改文件二是右侧 Diff 实时高亮Git 面板能 Commit三是开两个会话各自分支独立、main 干净。三个都满足说明 Base URL、Key、Model ID、Worktree 全部配对了。5. 常见报错排查401、local proxy failed 与 reading choices 报错配置过程中最容易撞上的几类报错我按实际遇到的频率排一下每个都给排查路径。401 Unauthorized。这是最高频的。原因通常有三个Key 复制时带了空格、Key 已失效、或者环境变量没生效。先echo $ANTHROPIC_API_KEY看输出对不对注意有没有首尾空格。然后确认~/.claude/settings.json里的 Key 和系统环境变量一致——两边不一致时settings.json 优先很容易出现我明明改了环境变量但还是 401的情况。最后去 TaoToken 控制台确认 Key 状态是 active。local proxy failed / connection refused。这个报错说明 Claude Code 或 1Code 尝试连的地址不对。九成是 Base URL 写错了。检查三点是不是写成了https://taotoken.net少了/api是不是带了 UTM 参数?utm_source...这种API 请求不能带是不是末尾多了斜杠。正确的就是干干净净的https://taotoken.net/api。Error reading choices / unexpected response format。这个报错通常出现在模型 ID 写错、或者接口返回的不是预期 JSON 的时候。先核对 Model ID 和文档是否一字不差比如claude-sonnet-4-5写成claude-sonnet-4.5就会挂。如果 Model ID 没问题检查是不是把 OpenAI 格式的请求发到了 Anthropic 端点——Claude Code 走的是 Anthropic 协议Cursor 走 OpenAI 协议虽然 TaoToken 两个都支持但客户端要发对格式。OAuth / authentication failed。如果你之前登录过 Anthropic 官方账号Claude Code 可能缓存了 OAuth token优先级高于 API Key。解决办法是清掉缓存删掉~/.claude/下的 credentials 相关文件或者跑一次claude logout然后重新用 API Key 配置。1Code 里 Agent 无响应。界面能开、能输入但点发送没反应。八成是bun run claude:download那步没做或者做了但二进制路径不对。检查项目目录下有没有下载好的 CLI 文件没有就重新跑一次下载命令。另外确认 1Code 设置里的 Base URL 和 Key 填了——它虽然会继承系统配置但某些版本继承不完整显式填一遍最稳。Worktree 创建失败。报错类似fatal: xxx is already checked out。这是因为同一个分支被两个 worktree 占用了。1Code 正常会给每个会话生成唯一分支名但如果手动改过分支前缀、或者上次异常退出没清理就会撞。解决git worktree list看当前所有 worktreegit worktree remove path删掉不用的再重试。排查这类问题的通用思路是先确认链路再确认配置最后确认客户端。链路就是curl一下 API 端点看通不通配置就是 Base URL Key Model ID 三件套客户端就是 Claude Code 和 1Code 各自的配置文件。按这个顺序走大部分报错十分钟内能定位。6. 从 1Code 到长期编码工作流把可视化 Agent 接进日常跑通之后真正的问题是怎么把它接进日常。我自己的用法是1Code 负责批量、隔离、可回滚的 Agent 任务Cursor 负责精细、交互、人工主导的编辑两者通过 Git 分支衔接。具体分工上凡是需求明确、改动范围可预期、想让 AI 一口气做完的任务丢给 1Code。比如给所有 API 加统一错误处理把某个模块从 JS 迁到 TS补一批单元测试。这类任务的特点是Agent 能独立完成、你只需要最后 review 结果、中途不需要频繁干预。1Code 的 Worktree 隔离让这些任务可以并行跑Plan Mode 让你在动手前确认方向Diff 让你 review 时一目了然。凡是需要边想边改、频繁试错、和现有代码强耦合的任务留在 Cursor 里手动做。AI 补全 人工判断的节奏比让 Agent 全自动更合适。两者衔接的关键是分支。1Code 里 Agent 改完 Commit分支就在那了Cursor 里git checkout过去 review改完再 commit回到 1Code 开新会话继续下一个任务。整个过程 main 分支始终干净每个任务一个分支回滚就是删分支。如果你任务量大、会话多可以考虑 TaoToken 的 Coding Plan。它按编码场景做了额度优化比按量计费更适合高频跑 Agent 的人。入口在https://taotoken.net/coding-plan。模型对话调试在https://taotoken.net/chatAPI Key 管理在https://taotoken.net/api-keys接入文档在https://taotoken.net/doc。最后说个实用技巧1Code 的 Worktree 目录会越攒越多建议每周跑一次git worktree prune清理已删除分支的残留。另外如果你同时开很多会话注意机器的内存——每个 worktree 是完整的工作目录副本项目大的话磁盘和内存都会吃紧。我一般同时开 3 到 4 个会话再多就切回串行了。这套工作流跑顺之后Claude Code 的能力没变但你的操作从终端盲写变成了可视化协作。Agent 在隔离环境里干活你在 UI 里 review 和决策Git 历史始终干净。这才是把 AI 编程真正接进日常的样子。
返回列表