“干中学”的第一步，先去“干”！！

今年《漂白》中一句“干中学”一直很火，火到这部剧我都没看，嘴边都经常念叨。很多时候做一些项目、小东西，其实就是需要二话不说就去干，“做”本身能让学习从抽象的“知道”变成指尖的“体会”。

DeepMind 研究员 Stefania Druga 面对大语言模型对编程的冲击的时候，并没有唱衰编程，相反，她提醒教育者「别再把教学停留在解释语法，而要把 AI 当作共同创作伙伴，把‘会做一个项目’当作学习的最低限」。

在她看来，ChatGPT 这类工具把“做中学”的门槛压到历史新低，却也倒逼课堂必须过渡到以项目为核心的设计——换言之，把“写代码”换成“写一段能跑起来的故事”。

同样关注教学演进的还有 The Chronicle of Higher Education。一篇作者 Chad Raymond 的专栏把 1970 年代计算器之于数学课堂的冲击，与今天生成式 AI 之于人文学科做了并置：当工具足以完成「结果」，教师就要把时间腾出来讨论「为什么」。

他提倡让学生在开放式项目里不断试错，让 AI 成为即时反馈的“第二视觉”。这本质上也是在为“干中学”提供制度层面的护航。

用 AI“大干快上”式的探索，把脑海里的点子变成一个个玩具，真的很爽。它帮我拆分任务、生成初版前端脚手架，还用几句清晰的 Shell 命令告诉我如何初始化仓库。

第一次看到远程分支在 GitHub 上亮起绿勾，我才真正明白 push、fetch、rebase 的差异——文字解释从未给过我这种“好像肌肉长出新记忆”的触感。

“玩具”项目的乐趣与收获

这么几天，我就建好了我的个人网站（yrzhe.top），全程的费用只有域名，当然还有时间精力，但是得到的正反馈是难以评估的。一上线个人网站，我就和 AI 一起去优化界面、填充骨肉，慢慢的网站变得简洁漂亮，添加了问卷模块还有 demo 模块，在 demo 模块里面我和 AI 一起写了很多个 demo 玩具网页。

比如说我最近做了很多个网站，我觉得比较有用的。首先是“Markdown to Image”的，然后还有“SEO Agent”，当然这两个都还属于玩具类型，但是当我完成他的时候就是很爽。我觉得在这个过程当中，给我帮助最多的工具是 Gemini 2.5 Pro，因为它的超长上下文，以及它能够直接上传我的代码文件夹。

这个网站可以在这里输入 Markdown 格式的文本，然后它右边就会生成一个图片预览。你可以选择是否按照分隔线去拆分图片，还可以上传自己的字体，也有不同的背景。

SEO Agent就是你可以输入网址或者HTML内容以及Markdown格式的文本，然后你可以选择AI模型的提供商、具体的模型以及密钥。你可以在这里面自由使用，然后去生成SEO以及审核你的内容。这个网页完全都是用AI进行构建的，所以它Agent的工作流也是由AI自主完成的，所以可能SEO的效果没有那么好。但是我们可以在跟它不断的交互的时候去进行调试。

一般来说，你用 AI 模型可能会完成你的功能，但是对于界面的美观度可能还会有所欠缺。这里我用到一个叫做 Yourware 的工具，它号称是vibe Coder 的 Instagram，你可以把那些前端的网页界面分享出来，所以你可以在上面看到很多好看的小项目，他这个网站有个功能叫做"Boost Your Design"，可以帮你优化你的界面。

就比如我这里有一个“母亲节”相关的网站（功能有所欠缺，这里讲的是界面🤣），我让他优化一下，他会用推理模型进行思考然后进行修改，修改后的效果如下所示：

我也用 yourware 把我的 SEO Agent 这个网页的界面进行了优化，然后发现它的一些元素更好看了。如果你有进一步的想法，你可以点击我分享出来的这个网页右下角的remix，就可以在这个基础上进行一些创作。

工具组合拳：让想法落地的流程

不可能一个工具完成你想要的所有内容，因为它们都会有各自的特点和缺点，所以我们就需要把不同的工具组合在一起用。

像 Gemini 的好处就是长上下文，我们直接把整个代码文件上传，然后让Gemini了解每一个细节，这样它才能够根据全局的状况找到正确具体的位置。Yourware 的好处就是它有很好的审美，然后还有 v0 能够构建一些复杂性、交互性强的，可以一步一步去进行构建的功能，像 Gemini 就是一步到位的那种工具。我们可以在 v0 里面去自由编辑我们的代码，所以如果你有一些代码基础，那可以让它的实力得到更进一步的发挥。

然后最近我又发现一个比较好用的AI agent工具——scout，我最近在重度使用它去为我做一些研究，收集数据并进行分析。现在的工作流是使用它去收集数据做分析，然后让它生成一个网站。我会先打开这个demo网站去看有什么东西需要补充或修复，然后再把整个代码文件夹给Gemini，并把需求讲出来。Gemini会告诉我具体哪个位置需要怎么更改，我再去进行相应的修改。等这个demo做好之后，我再用 yourware 去进行页面处理，让它优化一下。

v0 就可以去做一些更复杂的事情，比如说我做了一个去抓取新闻然后更新新闻的网站。在v0里面，它有 preview 和 code以及左边的一个聊天框，你可以在聊天框里面让它给你生成一个demo，然后你再去 preview 这个 demo 看有没有具体的问题。对于一些细节，你可以在code里面去进行更改。所以它相当于是把一个IDE、部署以及vibe coding都给你集成在一起了。

最近我建立博客网站的工具的会员到期了，一年几百上千的费用让我萌生了自己建一个博客页面的想法，正好把所有的内容都放在一个域名下面。这个过程我先用 v0 根据主页面的风格生成一个博客页面。

踩坑与突破：遇到难题怎么办

在这个过程当中，我遇到的最大一个问题就是v0使用的网站构建框架跟我的博客主网站框架是不一样的。它要加入到主网站中，但我的主网站主要是用HTML来写，而它是用 tsx 这个后缀的文件来构建。所以我遇到了这个问题，我就直接询问ChatGPT。

我先给出我的context，首先是 v0 生成的一些文件的架构是什么样子的，我要把它放到我的主网站的文件夹的哪个位置。然后把我主网站的文件夹的框架给它看，让它告诉我要如何把我的文件部署构建在 GitHub 和 Netlify 上面。

AI把写代码变得容易，但是它不能保证拼得起来。一般真正阻碍我们的是把不同的部分组装起来，常常会出现框架兼容、依赖冲突、部署细节这些琐碎的问题。

一般情况下有几个解决思路：

第一个就是去明确差异，指的就是面对两种方案或者两个解决方法的时候，直接去问AI他们的差异在哪，然后有什么共同点，有什么优劣势。

第二个就是组装问题的上下文，就是你要去把问题的上下文给AI，比如说报错的状态，然后文件的结构以及相应的代码的结构等等。

第三个就是分块提问，有时候我们一步到位可能会出现一些冗余或者矛盾的地方，所以我们可以把它拆成一些子问题。我们可以去定位到相应的片段，然后相应的片段去不断地提问，去细化那个问题所在的地方。

有时候我把那个问题一直给大语言模型去让它帮我解决，但是有时候语言模型它也会陷入一个死循环，它由于上下文的问题会一直在循环那个问题，或者说变着花样地去重复一些问题。我这里插入讲一下，我一般遇到死循环怎么办：我简单直接就是换一个窗口，在Gemini里面就直接重新上传代码文件夹，换一种问法。

我觉得在不断的交互以及不断的修改的过程当中，最重要的就一定要去留痕，去保证我们的项目可追溯、可回滚。这样子，一旦我们哪一步做错了，我们可以跳转到上一步没有做错的情况，去保证我们的项目不会因此而报废或者说出现一些问题。

SPAR：让项目真正跑起来

“先动手，后求证” 的魔力，在 AI 时代被放大了两层。

其一，工具门槛骤降：过去要拉同事帮忙或啃厚文档，现在只需把想法翻译成自然语言，模型便能给出可运行的雏形；其二，反馈回路前所未有地短：错误提示、修复建议、原理解释几乎在一次对话里打包送达，认知与操作的距离缩成了一次回车。

自从有了 AI 之后，vibe coding 就越来越火，也诞生出了很多编程工具，比如说 v0、Loveble、Bolt 这些工具。我们可以通过几个小时就能够做出过去几天的量。很多人总结他们用AI写网站的历程，就是从“复制-粘贴”到“拆步骤-写子模块”。AI会逼迫学习者把问题写得越来越具体，把抽象的知识转变成可以验证的代码。

经过了一些时间的 vibe coding 的过程，可以总结出一个“S-P-A-R”的工作流。

1. Sketch（勾勒）—— 完善项目需求。
2. Prototype（小步实现）—— 先做出一个 demo 再说。
3. Ask（深挖为什么）—— 针对某个部分不断的规划。
4. Refine（重构&反思）—— 优化细节。

我这一次进行小组项目要去设计一个关于求职招聘的网站。我首先跟GPT O3去不断地聊天，去发现一些设计上的问题，然后可以去怎么做一些创新，怎么做一些设计，以及功能上的一些交流。最后我让他整理出一份详细的设计文档。

然后把这个文档直接全文复制给 v0，这样 v0 就知道我想要做什么东西，然后要帮我生成一个网站，这样他就可以把一个demo给生成出来。然后我们在网站不断地去交互点击，不断地把错误修复，最后一个完整的demo就生成出来了。

后面就是去进行某个部分的不断规划，比如说像这个简历的解构跟重构部分怎么去优化，一些UI设计怎么去优化，一些动画针对这个部分去跟这个工具去进行交流，然后去一点一点地优化，最后组装在一起。最后就是对于一个整体进行反思，比如说哪个部分的布局它要放在哪里，哪一个部分和哪一个部分是否有一些嵌套的关系，以及一些交互的逻辑。

还有一点比较重要的就是，你要知道AI帮你修改代码的前后更新后的代码差异在哪里。你要知道这些差异它们代表了什么意思，是否能够帮助到你的需求，能够符合你修改的需求。这样你才能保证在尽量精简的情况下去完成你的需求。

反思与方法论：从“复制-粘贴”到“理解-优化”

在我构建项目这些时间当中，我首先最开始的时候就是从复制到粘贴，但是在这个过程当中会遇到一些根本无法理解的问题。

这个时候我就意识到，去了解代码底层逻辑的重要性，以及看懂代码的重要性。所以我就开始从HTML、CSS以及JavaScript开始学。我并不是说要把每个细节都要去学透，而是我先要了解他们之间的关系。对于一个网站来说，这三个分别充当了什么角色，然后他们之间又是怎么相互联系的。你清楚了这些之后，你以后才能对症下药，去根据具体问题去改哪个文件里的哪些东西。

Reddit 上“Using ChatGPT to learn any programming language”的长帖，汇聚了新手与老手的提问和反驳——有人把 ChatGPT 当万能剪贴板，有人提醒「用它提问概念，而不是偷懒写整段代码」，讨论在火花四溅中把“干中学”拆解成无数微小场景。

从这个讨论里面可以提炼出四条共识：

1. 问概念不要整块粘贴代码；
2. 先自己写再请GPT点评；
3. 全盘代写等于跳过必经的思维步骤；
4. 记得阅读和理解每一行。

当然，我觉得对于我们这种普通人可能没有耐心去自己全部写，像第二点说的。所以我的策略就是让AI写出来之后，我们去监督、去修改。对于它先写出的 demo，我可以运行没问题就接受，然后接受之后我们再根据某些细节进行修改。对于修改的某个细节，我们需要自己去审视它的每一句话是否都和我们的目的相关。

这个过程我用的方法就是diff追踪。如果你是在像 v0 这种编辑器里面，你可以让它去进行一些注释，或者是回答你它改了哪些地方。如果你是在 VS Code 这种 IDE 编辑器里面，我用的是 Git 操作，在原文件上更改后它会给我显示有哪些地方做了操作。

总结来说，我的这种方法是“AI-先行、人工-收尾” 的迭代流程——先把原型丢给 AI 生成，再由人工来跑通、审查、按需细化。

demo 跑通之后，你就要把“能跑”拆成 3 级验收，这个过程需要你能理解看懂程序。

验收层级	目的
功能走通	确认 Demo 不报错、输出对
可读可改	确认你能解释每行
可拓展	思考后续需求怎么插槽

在第一个层级，我就是去把所有的功能、所有的页面一个个去点击，看能不能正常打开，能不能正常显示。用手机看、用电脑看，去模拟各种情况。然后其实只要你的demo对了，第二步你基本上可以直接跳过。第二步是在你demo出错了或者是你需要去更改的时候需要你去理解。

那我直接跳到第三步，比如我需要在我的页面每次新写了一个网页，我要去插入到我的主页面的 demo 展示区。

那我就写了一个Python文件，每次一有HTML文件更新，我就用Python文件去更新首页架构。这样我就不用重新去写页面代码，而是直接只用把相关的文字介绍补充进去就可以了。包括我对于AI写的每个HTML文件，我都要加入一个返回主界面的按钮，我也会用Python文件去批量地加入。

迈出第一步，收获正反馈

回头看这一连串的尝试，我发现真正的门槛其实不是工具本身，而是你敢不敢先动手。AI 让试错变得低成本，反馈变得即时，可是如果总想着等准备好才开始，永远也等不到那个“合适的时机”。

在 AI 时代，做出一些玩具项目其实比以往都要容易。你只要迈出那一步，后面的正反馈会接踵而来。工具越来越强大，功能越来越丰富，你得到的成就感也会越来越多。最难的永远是第一步，但一旦你动手，随着自己的技能增长，再加上工具的助力，正反馈其实比你想象的还要容易获得。

最难的，其实是迈出第一步，哪怕做出来的只是个半成品，也比什么都不做强。所以我现在更相信，学习的起点不是“知道”，而是“去做”。只有在做的过程中，知识才会变成自己的。工具会换，方法会变，但动手的勇气和不断试错的习惯，才是最值得留下的。

也许这就是“干中学”的全部意义。

《第一步·破晓》：胆怯与未知仍在脚下，但脚踩发光台阶的那一刻，整个世界都在向前铺展开去。