我先说下我是怎么使用 Claude Code，通常我会在~/.zshrc 这个文件中配置一个 Claude Code 的快捷指令，因为很多模型厂商都支持了 Claude Code 这种方式，为了可以方便的使用豆包的 Doubao-Seed-Code+Claude Code 模式，所以我们很有必要添加一个快捷方式。
function claude_doubao(){
export ANTHROPIC_BASE_URL=https://ark.cn-beijing.volces.com/api/coding
export ANTHROPIC_AUTH_TOKEN=your apikey
export API_TIMEOUT_MS=3000000
export ANTHROPIC_MODEL=doubao-seed-code-preview-latest
export ANTHROPIC_SMALL_FAST_MODEL=doubao-seed-code-preview-latest
export ANTHROPIC_DEFAULT_SONNET_MODEL=doubao-seed-code-preview-latest
export ANTHROPIC_DEFAULT_OPUS_MODEL=doubao-seed-code-preview-latest
export ANTHROPIC_DEFAULT_HAIKU_MODEL=doubao-seed-code-preview-latest
claude
}
ps，说一下啊，这个地方的 apikey 可以在这个网址申请：
https://www.volcengine.com/activity/codingplan
基本上是地板价了，9.9 元RMB，一杯柠檬水的价钱，反正是很值了，因为之前一直在体验 coze空间移动 App，白嫖了很久，体验还确实很好。
扣子空间 App
白嫖这么久，就会有一种深深的负罪感，这次为了他们支持了 Claude Code，高低也得买一个赞助赞助下呀。
也不得不顺便安利下 coze空间，目前一直在提 AI 原生，我觉得 coze 空间就是我想象的那种 AI 原生开发。一句话实现千人千面的需求，不再是固化的规则逻辑。
好，接着我们的 豆包Doubao-Seed-Code吧。
缘起，排序算法不光是我的噩梦，现在也成了表弟的噩梦
好了，接下来，我们就要进入正题了，我今天想使用豆包Doubao-Seed-Code做的工具是一个对比各种快速排序的动画，因为，我表弟恰好今天就在问我排序算法相关的事情，他始终搞不懂快速排序、堆排序、合并排序到底是怎么在执行，也许是刚接触排序算法，所以会有这种焦虑。
还记得当时学数据结构和算法的时候，那对着程序脑袋里面脑补各种排序的执行流程，想想就觉得非常落后，当时可是花费了我好多时间才彻底搞定各种排序的执行流程，并且把它牢牢的刻画在了自己的脑袋里面。
现在完全不用了，有 Claude Code 这种神器的加持之下，想必做一个各种排序的对比动画，已经不是什么难事。如果可以看一看动画的效果，那比在脑海中脑补，绝对是强上百倍。说干就干～（当然这个思路完全可以用在模拟观察其他算法的实现过程上面）
实现，看看我的实现效果
先来给大家看看效果吧，我实现之后的效果是这个样子的
各种排序的动画效果
想必，你肯定关心的是，我们怎么去使用豆包Doubao-Seed-Code 来完成这项工作，而不是只想看到结果。下面我就将自己的全部的实现流程给详细的记录下来，方便你来复现。
第一步，一定是创建你的需求描述
我新起了一个工程目录，然后在里面初始化了一个 requirement.md 文件，这个就是我的需求描述的场景，后面发生的一切事情都是以这个为起点开始，这个文件描述的准确度直接决定了我们生成的效果。我也不卖关子了，直接贴一下我写的需求文档。
创建一个网页版的排序算法可视化工具，同时运行多种排序算法并比较性能。
## 具体需求
### 1. 算法支持
- 实现至少6种排序算法：冒泡排序、选择排序、插入排序、快速排序、归并排序、堆排序
- 每个算法独立运行，使用相同的数据源
### 2. 可视化界面
- 使用Canvas绘制每个算法的排序过程
- 柱状图表示数组元素，高度对应数值大小
- 不同颜色区分不同状态的元素
### 3. 实时统计
- 显示每个算法的比较次数、交换次数、已用时间
- 算法完成后显示完成顺序和总用时
- 进行排名，比如：#1代表第一名，一次类推
### 4. 交互控制
- 可调节数组元素数量
- 可调节动画速度
- 开始/重置按钮
- 禁止在运行中调整参数
### 5. UI设计
- 深色主题，现代化玻璃拟态设计
- 响应式布局，支持多列排列
- 实时显示算法状态
### 6. 技术实现
- 单HTML文件实现，尽量简化，Tailwind CSS通过CDN引入，尽量不要引入三方库，除非必要
你看看，我写的需求描述其实也并不复杂，就是把我的核心诉求以及基本的交互动作，和 UI 设计简单的、结构化的描述了一下。仅此而已，有时候我都懒得补充技术实现细节，但是这里为了让他老老实实用 HTML 实现，我还是补充了下。
这里写需求的过程我恶也不得不安利一下，写需求文档的时候，我习惯用 cursor，因为 cursor 的 tab tab (NEXT EDIT)实在是太好用了。我基本上习惯了他这个套路，基本上，我前面把我的需求的大概描述完毕之后，他就会给我把下面的框架都给整出来，基本上我就是修修补补，去掉些不合理的就完事了，整个过程就是 5 分多钟，当然包括我对交互的思考，对实现细节的简化。
第一步，一定要 /init ，这个是灵魂，即便是豆包 Claude Code 也不例外
我习惯这么设置，因为简单
因为 /init的过程，Claude Code 会理解你的需求，并且大概率进行了一些规划了，接下来的事情就简单很多。直接让 Claude Code 干活就好。
让Claude Code 干活吧
这一步其实最简单，最难的我们已经在前面给潇洒的实现了。
请实现我的需求
我们要求的几乎完美实现
就这么一句豆包 for Claude Code 就帮我生成了整个的 html 文件而且是一次性完成到这样的一个效果。你可能会疑惑，为什么能够这样玩，其实答案很简单，我之前已经讲过了，因为我们第一步创建了需求，然后接着就让 Claude Code 去执行了/init 命令生成 CLAUDE.MD 文件，这个过程其实 Claude Code 已经有了上下文，他完全理解我说的‘请实现我的需求’是怎么回事。
最后一个彩蛋
我通过观察动画的时候，发现，插入排序算法貌似可以继续优化。
如是，我告诉 豆包
不知道你有没有发现,插入排序可以优化,比如,在插入的时候,使用二分搜索插入的位置,这种可以加
速找到插入点,你来实现
嘿嘿，他居然帮我实现了二分插入排序，
经过测试：
确实要比普通的插入排序快上不少，完全从直观上感受上就可以看出来，不过还是打不赢快速排序的。
新的算法的性能优势：
- 比较次数：从约
n(n-1)/2次减少到约n log₂n次 - 移动次数：保持
O(n)不变 - 可视化效果：可以看到二分查找每次跳转到数组中间位置，而不是逐个比较
不知道是不是一个新的算法呢？其实我查了下，还真不是，早就有人做了这种优化，但是我为什么可以发现，完全是因为我在插入排序动画中执行过程中观察出的，而且很容易观察出优化点。
个人的直观感受
个人感觉哈，Doubao-Seed-Code 的核心优势在于“多模态代码生成 + 超长上下文 + 低价高配 + 生态兼容”，目前也是通过一些生态工具，可以做到端到端自动化开发，能够处理复杂的工程，绝对不是仅仅是一个 demo，这个从他测评数据就可以看出，我就不贴了，官网去看。最吸引人的地方，人家字节钱多，可以把价格打到国内最低梯队，并且迭代更新也是超快，马上就能原生适配主流工具链，这是最直观的感受。
根据官网的介绍，Doubao-Seed-Code可直接参考 UI 设计稿、截图或手绘草图生成前端代码，这种显然就是前端开发者的福音，对于懒人来说，就是“根据我这个截图复刻一个这样的 App/网站”，你说这有多香，提示词都不用了，Doubao-Seed-Code自己去理解去补充。而且很有关键是人家比你描述得还准确。你还费那个劲干啥呢？
Doubao-Seed-Code 最高支持约 256K 级上下文，便于处理长代码，相信狠多用过 Claude Code 的朋友都知道 /context 这个命令，用得多就代表你对上下文的焦虑越大。256K，基本上是头部模型能够具备的配置了，不过个人还是希望能够更大一些，来个 1M ，这种上下文焦虑感会瞬间降低到地板上。就看字节跟不跟了，我想他大概率是会跟的，很多朋友都说，做agent 做到最后，做的其实就是上下文工程，但如果模型本身就足够大的上下文，这个工程化的难度就小很多了，对开发者也会相对更加友好一些。