Vibe Coding IDE 工具

一句话结论：新手用网页对话框（生成单文件 HTML）就够；想管多个文件、连续迭代，再上 IDE 工具。

三档工具

1. 网页对话框（豆包 / Kimi / DeepSeek 网页版）：说需求 → 得到一个 HTML 文件 → 浏览器打开即用。零安装，适合 90% 的教师场景；
2. 轻量 IDE / Agent 客户端：能读你整个文件夹、连续修改多个文件、边改边预览；
3. 专业 IDE + 编码智能体（Claude Code、Qoder、Trae 等）：面向「作品级」项目，能跑命令、装依赖、接版本管理。上图为 Claude Code（终端形态）与 Trae（编辑器形态）——两种形态都很常用。

新手建议的路径

先看看 IDE 里做出来的成品什么样（函数实验室，滑块实时改曲线）：

第 1 周：网页对话框 + 单文件 HTML（见「消费骗局」一课的口诀）
第 2-3 周：挑一个轻量 IDE，把第一周的工具体面化
之后：有真实项目再考虑专业 IDE