Steve Builder.io — VibeCoding 博主深度笔记

博主画像

  • 频道:youtube.com/@Steve8708
  • 真名:Steve Sewell,Builder.io CEO
  • 产品:Builder.io(可视化开发平台)、Fusion(可视化 AI 编码界面)
  • 定位:实战派 VibeCoding 教育者,擅长从用户视角对比工具、提炼可立即上手的工作流技巧

高质量内容精选

1. How I use Claude Code (+ my best tips)

YouTube 视频 | 博客原文 | 335K 播放 | 12:43

核心内容:

  • 从 Cursor 重度用户转为 Claude Code 日常驱动的原因
  • VS Code 扩展安装,多窗格并行运行不同任务
  • 终端 UI 的实用技巧:/clear 清理上下文、/model 切换模型、上箭头恢复历史会话
  • claude --dangerously-skip-permissions 跳过权限确认(类似 Cursor 的 yolo 模式)
  • GitHub 集成:/install-github-app 自动 PR code review,自定义 review prompt 只关注 bug 和安全
  • 消息队列系统:可以排队多个 prompt,Claude 智能判断执行时机
  • 自定义 Hooks(.claude/settings.json):编辑前自动 prettier,编辑后自动 type check
  • 自定义 Commands(.claude/commands/):用自然语言编写可复用工作流
  • 18,000 行巨型 React 组件只有 Claude Code 能可靠更新

关键摘录:

我的工作流发生了根本转变。以前 Claude 是编码时旁边的小窗口,现在 Claude 是主界面,代码编辑器反而变成了次要的。

/clear 是最高频命令。每次做新任务就清一次——你不需要历史上下文浪费 token,也不需要 Claude 做压缩来总结旧对话。直接清掉,继续下一步。

Claude 发现的 bug 比人类多,因为人类喜欢纠结变量命名,而 Claude 会找到真正的逻辑错误和安全问题。


2. Codex vs Claude Code

YouTube 视频 | 博客原文 | 81K 播放 | 8:17

核心内容:

  • 三大 AI 编码工具(Cursor / Claude Code / Codex)的 agent 能力趋同
  • 模型对比:Codex(GPT-5)推理时间更长但 token 输出更快,Claude Opus 推理短但输出慢
  • 价格分析:GPT-5 成本约为 Sonnet 的 1/3、Opus 的 1/10,Codex 在用量限制上更宽松
  • Codex 的核心优势:GitHub 集成——自动 code review、行内评论、从评论直接修复并推送 commit
  • Claude Code 的优势:功能更丰富(sub-agent、hooks、自定义 commands),MCP 生态更好
  • Claude Code 的痛点:不支持 AGENTS.md 标准(只用 CLAUDE.md),权限系统过于繁琐

关键摘录:

我曾告诉 Cursor 团队:从 Claude Code 我学到的是,我真的不在乎功能。我只想要最好的 agent——告诉它我要什么,它最可靠地交付。所有花哨的功能我有时会用到,但没它们我也不想念。

Codex 的 GitHub 集成是决定性优势。它可以自动 review PR、发现真正的 bug、从评论直接修复。Claude 的 GitHub app 相比之下很鸡肋——verbose、找不到明显 bug、不能让 Claude 帮你修。


3. Improve your AI code output with AGENTS.md

YouTube 视频 | 博客原文 | 31K 播放 | 7:00

核心内容:

  • AGENTS.md 是跨工具通用的 AI 规则文件标准(类似 .cursorrules 但不限工具)
  • 实战对比:同一任务,无 AGENTS.md 时 AI 输出存在 MUI 版本错误、样式格式不对、dark mode 漏色等问题
  • 最佳实践拆解:Do/Don’t 列表、文件级命令(单文件 type check 而非全量 build)、项目结构索引、正反面代码示例、API 文档引用、PR checklist
  • Claude Code /init 可自动生成 CLAUDE.md,但需要人工修正(可能学了旧代码的模式)
  • 设计系统索引(Design System Indexing):让 AI 正确使用你的组件库
  • 嵌套 AGENTS.md:大型 repo 按子目录分层定义规则

关键摘录:

AGENTS.md 的本质不是写一份完美的规范,而是持续迭代。每次跑 prompt,看哪里不满意,就把反馈加进去。第二次看到同一个错误,就加一条规则。

文件级命令是关键优化。Agent 知道它刚改了哪个文件——告诉它 tsc --noEmit path/to/file.tsx 而不是 yarn build,反馈从分钟级变成秒级。

AGENTS.md 可以嵌套。大型 repo 每个关键子目录放一个,让规则和具体技术栈匹配。一个 legacy 包可以保持 React 17 规则,新包用 React 18 规则,互不干扰。

方法论总结

Steve 的内容有几个一贯的方法论主题:

  1. 实战优先 — 不讲理论,每个技巧都来自日常编码的真实痛点
  2. 工具对比驱动 — 通过 Cursor/Claude Code/Codex 的横向对比帮读者做选择
  3. 小投入大回报 — AGENTS.md 只需 36 行 Markdown 就能显著提升 AI 输出质量
  4. 迭代优化 — 不追求一步到位,用 trial and error 持续改进规则和工作流

相关链接

关联笔记