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 的内容有几个一贯的方法论主题:
- 实战优先 — 不讲理论,每个技巧都来自日常编码的真实痛点
- 工具对比驱动 — 通过 Cursor/Claude Code/Codex 的横向对比帮读者做选择
- 小投入大回报 — AGENTS.md 只需 36 行 Markdown 就能显著提升 AI 输出质量
- 迭代优化 — 不追求一步到位,用 trial and error 持续改进规则和工作流
相关链接
- Builder.io — 可视化开发平台
- Fusion — 可视化 AI 编码界面
- Twitter/X — Steve 的社交媒体
关联笔记
- AI Jason — VibeCoding 博主深度笔记 — 同系列其他博主笔记