--- url: https://ain.hmgf.hxcn.space/ai/vibe-coding-learning-path-202605.md description: 从中文入门教程、工具型教程、项目上线、上下文工程到 Harness 工程，整理一条适合新手逐步推进的 Vibe Coding 学习路线。 --- # Vibe Coding 入门路线 很多人一接触 Vibe Coding，第一反应都是去找"最强 prompt"或者"最火工具"。这样未必错，但很容易学得很散：今天看一个 Cursor 技巧，明天看一个 Codex 视频，后天又去追 Agent 新闻，读到最后还是不知道该从哪里下手。 按真实开发会发生的顺序往前走，会省很多弯路。 这条路线可以分成四段：做出一个小东西，学怎么把项目上线，补上下文工程，最后去看 Harness 工程，理解怎样让 Agent 在真实仓库里稳定工作。按这个顺序走，资料再多也不容易乱。 这篇就按这条线往下排：**入门工具教程 → 项目上线 → 上下文工程 → Harness 工程**。 ## Vibe Coding 对新手有什么用 Vibe Coding 对新手最大的帮助，是把"能不能开始"这件事大幅前置了。 以前很多人卡在环境、语法、框架选型，还没做出第一个页面就放弃了。现在你只要会描述需求，就已经能和 Claude Code、Codex、Lovable、Cursor 这类工具一起把原型做出来，至少把想法变成一个可见、可点、可测试的东西。 但这不等于责任消失了。 你还是得判断需求有没有价值，得知道功能顺序怎么排，得知道什么时候继续问 AI，什么时候自己验证，什么时候把东西部署出去给别人用。Vibe Coding 降低的是启动门槛，判断、调试和交付并没有消失。 所以这条路线要解决的是三种实际能力： * 能从零开始做出一个可运行的小项目； * 能把项目从"本地能跑"推进到"别人能访问"； * 能在项目变复杂之后，继续稳住上下文、任务和验证流程。 ## 找一条入门入口 这一段聚焦中文和零基础友好的材料，重点是找到自己的起步方式。 ### easy-vibe：零基础学习地图 [`datawhalechina/easy-vibe`](https://github.com/datawhalechina/easy-vibe) 的首页写得很直接：如果你会说话，就可以开始做应用。 把它放在第一站，主要因为两点。 第一，它的结构很像"学习地图"。项目说明里有很明确的学习路径分流： * 想先快速体验一次 AI 编程是什么感觉； * 想把想法做成一个产品原型； * 想继续往全栈产品、部署、支付、后端流程走； * 想进入更高级的 Claude Code 和 agent workflow。 另外，它没有停在"AI 会做什么"这一层，还把不同阶段该学什么拆开了。项目说明里能看到从游戏化理解 AI、到学习地图、到全栈项目、到 Stripe 支付和微信小程序后端流程的延伸。这对新手很重要，因为很多所谓零基础教程只停在"做一个页面"，`easy-vibe` 明显想把人继续往项目推进。 如果你是完全零基础，可以读它的在线文档和 learning paths，再按自己的情况选路径： * 想建立信心，就走"fast first win"； * 想把 idea 变 demo，就走 prototype 路线； * 想做 web app，就往 full-stack products 那条读。 这比一开始就埋进某个工具的参数细节更稳。 ### vibe-vibe：更完整的系统教程，适合继续补上"从想法到产品" [`datawhalechina/vibe-vibe`](https://github.com/datawhalechina/vibe-vibe) 的定位比 `easy-vibe` 更系统。仓库首页直接把它叫做"人人都能学会的 AI 编程指南"，并且把读者分得很细：完全零基础、只用过大模型没做过项目、有编程基础、想直接动手做项目，都有不同起点。 最该看的地方，是它把教程分成四大板块： * 基础篇：AI 编程入门、心法和第一个项目； * 进阶篇：从 0 到上线的避坑指南； * 实践篇：按人群分项目实战； * 优质文章篇：持续学习和行业追踪。 这组内容放在 `easy-vibe` 后面很顺。前者给你一张地图，后者再把基础篇和进阶篇补齐。 资料里还明确给出不同人群的推荐起点： * 完全零基础：从基础篇第 1 章开始； * 用过 ChatGPT 但没做过项目：从基础篇第 2 章心法开始； * 有编程基础：基础篇快读后直接进进阶篇； * 想直接做项目：看基础篇第 4 章实战。 这类"从哪个章节进"信息很有用，写文章时不该省略，因为它直接决定新手会不会在第一周就被内容量淹没。 ### vibe-coding-cn：资源总控台 [`MaoTouHU/vibecodingcn`](https://github.com/MaoTouHU/vibecodingcn) 和前两个项目的气质不太一样。 它既有课程结构，也有 Vibe Coding 中文资源站的味道。仓库一开头就讲"规划驱动"和"模块化"，还把"道、法、术、器"这套方法论放得很靠前： * 道：目的主导、上下文优先、先结构后代码； * 法：一句话目标 + 非目标、按职责拆模块、接口先行； * 术：写清楚能改什么 / 不能改什么，debug 给最小复现； * 器：IDE、终端、prompt、skills、资源链接等工具层。 如果说 `easy-vibe` 和 `vibe-vibe` 是把人带进门，`vibe-coding-cn` 讲的就是进门之后，桌上该放哪些工具，脑子里该有哪套工作法。 把它放在第一段后半程会更合适。你已经做过一两个小项目之后，再回头看"规划就是一切""文档即上下文""一次只改一个模块"这些规则，会比刚入门时更有感觉。 ## 开始把东西做出来，并准备上线 这一段的重点，是把"做出东西"继续往"做成项目"推进。 ### lovable-for-beginners：面向不想先碰代码的新手 [`cporter202/lovable-for-beginners`](https://github.com/cporter202/lovable-for-beginners) 是一门面向绝对新手的 Lovable 课程。 课程首页写得很清楚：Lovable 允许你用自然语言描述需求，然后直接生成 full-stack 网站和应用，不要求代码经验。面向的人群也非常明确： * 完全新手； * 想快速做 MVP 的创业者； * 想把设计变成应用的设计师； * 想做 landing page 的营销人员。 这门课的价值不在于"讲了一个新工具"，而在于它把零基础用户会遇到的问题都拆成模块了。比如： * 如何创建账号、认识界面； * 怎么从 prompt 开始项目； * 怎么 remix 现有项目； * 怎么从 Figma、草图甚至克隆网站开始； * 怎样理解 Chat Mode 和 Agent Mode 的区别； * 怎样加认证、数据库、支付并最终上线。 如果目标是把第一个产品原型做出来，又不想一上来就被环境和终端吓退，`lovable-for-beginners` 放在前半段很合适。 ### gpt-codex：专门给国内开发者准备的 Codex 教程 清单里特别要求保留这一句：[`xianyu110/gpt-codex`](https://github.com/xianyu110/gpt-codex) **这是一个关于 OpenAI Codex 的完整教程网站，专为国内开发者打造。** 这句话已经把项目定位说得很清楚。 项目内容也确实按"国内开发者教程站"的方式展开： * 解释 Codex 是什么； * 讲和 ChatGPT、Claude Code 的区别； * 讲获取方式、安装、客户端入口； * 补 GPT-5.5 之类与 Codex 相关的模型信息； * 往工具接入、使用方式和项目实践延伸。 这份教程放在"开始认真学某个 AI 编程工具"这一段更顺，不建议拿它做第一站。原因很简单：Codex 好不好用，取决于你是不是已经知道项目大概怎么拆。否则你很容易只会问"它和别的工具谁更强"，却不知道该拿它推进什么任务。 对新手来说，读它时建议特别关注三类内容： 1. Codex 的产品定位； 2. 安装和可用入口； 3. 它适合承接哪些工程任务。 这样看，会比被模型版本和套餐信息带偏更有效。 ### ai-guide：当成总导航用，不要当成第一本教材硬啃 [`liyupi/ai-guide`](https://github.com/liyupi/ai-guide) 的体量很大。官方描述也写得很满：它是鱼皮的 AI 资源大全加 Vibe Coding 零基础教程，覆盖 DeepSeek、GPT、Gemini、Claude、MCP、RAG、Claude Code、Codex、Copilot、Harness Engineering、Spring AI 等大量主题。 这种仓库的价值非常明确：**它是总导航，不适合当成第一本从头读到尾的教材。** 资料里关于 Vibe Coding 教程的部分，已经把内容范围写得很清楚： * 基础必读； * 编程工具； * 项目实战； * 经验技巧； * 产品变现； * 编程学习； * 资源宝库。 如果前面已经看过 `easy-vibe`、`vibe-vibe`、`gpt-codex` 这些更聚焦的材料，那么 `ai-guide` 可以直接当查表式入口：按需跳转到 Cursor、Claude Code、Codex、MCP、AI 项目、产品变现或 AI 工具测评，会比从第一页硬啃到最后一页省力得多。 这也是它在路线里的合理位置：放在"入门之后、专项之前"，当导航站用。 ## 项目一多，就得学会拆任务 从这一段开始，重点转到"项目怎么推进"。 ### vibe-kanban：把任务拆成卡片 [`BloopAI/vibe-kanban`](https://github.com/BloopAI/vibe-kanban) 的官方描述非常直接：**Get 10X more out of Claude Code, Codex or any coding agent**。 `vibe-kanban` 放在这里很合适，因为很多人一开始用 AI 编程，所有任务都写在一个聊天框里。这样做小 demo 还能撑住，一旦项目开始变成"注册登录、数据库、支付、部署、SEO、报错修复、样式回滚"这种多线程任务，对话就会很快失控。 `vibe-kanban` 的作用，就是把这些任务重新拆回看板： * 哪些是待做； * 哪些在进行； * 哪些需要回头验证； * 哪些只是以后再说。 它最大的价值，是把 AI 编程从"想到什么问什么"拉回到"按任务推进"。对新手来说，这一步很重要，因为很多人第一次做产品失败，问题常常出在自己一直同时推进十件事。 所以在这条路线里，`vibe-kanban` 放在工具教程之后最顺。你开始有了要上线的项目，就该有一个任务拆解面板，不必继续全靠聊天记录回忆进度。 ## 项目继续往前走，要把资料和约束写下来 到这里，项目通常已经不再是"单页 landing page"了。 你会开始遇到这些问题： * 同一个需求，换个会话 AI 就忘了； * 改了前端，后端约定又漂了； * 你明明说了不要动某个模块，它还是会动； * 功能能写出来，但一到验证就漏洞很多。 这就是为什么要进入上下文工程。 ### context-engineering-intro：把"上下文"当成一门工程来学 [`coleam00/context-engineering-intro`](https://github.com/coleam00/context-engineering-intro) 的官方描述很明确：**Context engineering is the new vibe coding**。 这个说法值得单独写出来，因为它点中了很多人的真实痛点：你觉得模型不稳定，很多时候是上下文组织得不够好。 项目文档把上下文工程解释得很具体：这里说的不是把 prompt 再润色一遍，而是把文档、规则、示例、模式和验证一起写进完整上下文，让 AI 在明确约束下工作。 最实用的部分，是它给了一个可以直接照着搭的结构： ```text context-engineering-intro/ ├── .claude/commands/ ├── PRPs/ ├── examples/ ├── CLAUDE.md ├── INITIAL.md └── README.md ``` 文档还把流程拆成： 1. 写全局规则 `CLAUDE.md`； 2. 写初始功能需求 `INITIAL.md`； 3. 生成 PRP； 4. 执行 PRP； 5. 通过验证、测试和迭代收口。 这组内容放在"项目上线"前后读，位置刚好。因为前半段资料会让你做出项目，到了这里，你才会意识到：项目能不能持续推进，取决于上下文有没有写清楚，规则有没有落盘，验证是不是可重复。 如果前面那几步让你会"跟 AI 一起做东西"，`context-engineering-intro` 负责让你会"稳定地继续做下去"。 ## 往下走，绕不过 Harness 工程 如果上下文工程解决的是"给 AI 什么上下文、怎样组织上下文"，Harness 工程解决的就是更完整的问题：**怎样给 Agent 一个可靠的工作环境**。 这一步读起来会比前面的教程更硬一些，但它决定了项目一复杂之后，你究竟是在带着 Agent 前进，还是在被 Agent 拖着返工。 ### Harness 工程书的进阶门槛 > 零基础开始 Vibe Coding 必看的书——Harness 工程书。不管是 Claude 还是 Codex 已经取代了大量基础码农的工作，也让没有任何代码基础的人可以开始 Vibe Coding。但是由于没有系统学过 Harness 工程，在使用大模型时效率很低。现在这两本书一次把 Claude 和 Codex 的 Harness 工程一次给你解释清楚，而且还有中文版，大家不容错过。 这段话的意思很明确：能开始做，不等于能稳定做；会问问题，不等于会搭环境。 ### learn-harness-engineering：从环境、状态、验证和控制机制补课 结合当前可查到的仓库资料，我这里主要参考的是 [`walkinglabs/learn-harness-engineering`](https://github.com/walkinglabs/learn-harness-engineering)。 项目对它的定义非常清楚：这是一门项目制课程，重点是构建让 AI coding agents **可靠工作** 的环境、状态管理、验证和控制机制。 它开头就把参考源摆出来了，包括： * OpenAI 的 Harness engineering； * Anthropic 关于 long-running agents 的 harness 文章； * 以及配套的 awesome harness engineering 索引。 资料里对 Harness 的解释很适合新手过渡：模型再强，如果仓库环境、状态、验证和生命周期没有搭好，照样会出现"看起来在干活，实际一团乱"的情况。 这里最值得看的几块内容包括： * harness 的五个子系统：instructions、state、verification、scope、session lifecycle； * 为什么 agent 不能只靠 prompt，而要靠 repo 内的结构化文件； * `AGENTS.md`、`CLAUDE.md`、`init.sh`、feature list、progress log 这些文件分别承担什么角色； * 为什么"测试通过"才算证据，不能只听 AI 说自己做完了。 如果你前面已经在 `context-engineering-intro` 里学会怎么写 PRP、怎么组织上下文，这里就会自然接上：Harness 工程是在更大的系统层面，把上下文、状态和验证全都固定下来。 所以它放在整条路线的后半段更合适。项目跑起来，再补长期可靠性，会更顺。 ## 文末 10 条 X 教程的放置位置 这 10 条 X 教程适合放在文末，作为补充阅读，不要拿来代替项目文档或官方文档。 如果只看标题，它们很散；按路线整理后会清楚很多。 ### 1）入门和界面上手 * `@gengdaJ`：Codex App 从 0 到 1 完整入门教程，包含界面设置、基础用法讲解、常见踩坑排查。\ 来源： 这类内容适合放在真正开始用 Codex 的第一周，解决的是"怎么打开、怎么开始、哪里容易踩坑"。 ### 2）从想法到上线 * `@ai_muzi`：0 基础 AI 应用构建 + 上线系统教程，从想法做到项目，再到域名上线全流程。\ 来源： 它刚好对应这条路线中段的过渡：从做 demo 到上线。 ### 3）浏览器和插件实战 * `@Pluvio9yte`：Chrome 插件 + 浏览器控制实战，从安装配置到 Codex 操作浏览器。\ 作者： 这类内容更适用于已经做过普通网页、准备往浏览器自动化和插件场景扩展的人。 ### 4）双模型与本地工作台配置 * `@alin_zone`：Claudian 配置教程，Claude Code + Codex 双模型实战，Obsidian 双开配置方案。\ 作者： 这类资料更偏"我的工作台怎么搭"，适合同时使用 Claude Code 和 Codex 的时候看。 ### 5）现成 Skills 收集 * `@eastweb3eth`：5 个 Codex 必装 Skill 工具，GitHub 上实用合集。\ 作者： 把它放在你已经明白 Skill 有什么用之后再回头装，会比一开始看见 Skill 就全部装一遍更合适。 ### 6）上下文调优 * `@lxfater`：Codex 深度调优 + 上下文优化四大绝招，省上下文的方法。\ 作者： 这一条正好和 `context-engineering-intro` 呼应。读系统教程，再看这类经验贴，会更容易分辨哪些是技巧，哪些是长期结构。 ### 7）设计工作流 * `@xin_pai88825`：Codex + Image2 + Figma 设计工作流，IP 出图到 Figma 落地。\ 作者： 这类内容对设计师或产品同学也有用，说明 Vibe Coding 不只有写代码，也包括图像和设计交付。 ### 8）剪辑与视频流程 * `@Saccc_c`：Codex + HyperFrames 剪辑工作流，做视频流程。\ 作者： 如果你要把 AI 工作流延伸到视频，这条适合作为补充阅读，不属于最前面的入门主线。 ### 9）VPS 与部署 * `@WEB3_furture`：用 Codex 一键部署 VPS，零基础自动搭私人 VPN。\ 作者： 这一条放在"项目上线"之后看更合适，因为它偏部署和环境，不适合最前面看。 ### 10）订阅与省钱避坑 * `@Lonely__MH`：5 折订阅 ChatGPT Plus 全流程实测，土区省钱方法。\ 作者： 订阅成本相关内容作为补充参考，不作为主线内容。 ## 可以按这个顺序读 如果你现在是从零开始，我会建议按这个顺序读： 1. 读 `easy-vibe`，建立学习地图； 2. 再读 `vibe-vibe`，补齐系统教程； 3. 用 `lovable-for-beginners` 或 `gpt-codex` 选一条工具线开始动手； 4. 把 `ai-guide` 当导航站，缺什么再查什么； 5. 一旦项目开始变多，就把任务丢进 `vibe-kanban`； 6. 准备认真做项目时，补 `context-engineering-intro`； 7. 想让 Agent 在真实仓库里长期稳定工作，再去看 Harness 工程书和 `learn-harness-engineering`。 ## 资料来源 * `easy-vibe`： * `vibe-vibe`： * `vibe-coding-cn`： * `lovable-for-beginners`： * `gpt-codex`： * `ai-guide`： * `vibe-kanban`： * `context-engineering-intro`： * Harness 工程课程： * Claude 官方 Claude Code 教程播放列表：