不懂代码的我,竟然5分钟做出了第一个网页
- 2026-09-26 08:24:35
今天的学习围绕四个维度展开，每一个都颠覆了我对编程的固有认知：
1. 资源选择：找到好的引路人在B站看了程序员鱼皮的Vibe Coding基础讲解，最大的收获不是技术细节，而是思维转换：把"我要学Python/Java"变成"我要做一个飞书转小红书的工具"。前者是漫无目的的输入，后者是目标明确的输出。当目标具体时，AI才能真正帮到你。
2. 工具选择：国产AI完全够用我选择了DeepSeek和Kimi作为国内主力。它们免费，稳定，不用折腾网络配置。PS.最近Kimi 免费用户看运气了。。。
3. 核心技巧：Prompt工程比语法更重要今天最大的顿悟是"分步描述需求，不要一次性太复杂"。以前我以为给AI的指令越详细越好，结果经常得到一团乱码。现在我学会了结构化表达：
先说明身份（"你是一个前端专家"） 再描述场景（"我需要把飞书笔记转成小红书文案"） 最后给出约束（"单HTML文件、紫色主题、手机适配"）
这种"分而治之"的策略，让AI生成的代码可用性提高了80%。
4. 项目驱动：用需求倒逼学习没有从"Hello World"开始，而是直接立项：飞书转小红书文本生成器。这是我真实的需求——每天要把飞书的学习笔记分发到各个平台，手动排版太费时间。带着痛点学习，每一行代码都有意义。
从0到1的过程比想象中顺畅得多：
打开DeepSeek对话框，我小心翼翼地输入了准备已久的Prompt："请你帮我做一个飞书笔记转小红书文案的网页工具..." 详细描述了左右分栏布局、紫色主题、Markdown解析需求。
30秒后，屏幕上出现了一大段HTML代码。我忐忑地复制到VS Code，保存为`converter.html`，双击打开。
浏览器跳出来的那一刻，我愣住了。
左侧是飞书风格的输入框，中间是转换按钮，右侧是带emoji的预览区——这和我描述的几乎一模一样！我迫不及待地粘贴进去Day1的飞书笔记，点击"生成"，看着右侧自动跳出带💡✅🎯的小红书格式文案，那种成就感比写完一篇10w+的爆文还要强烈。
几个关键细节：
整个过程耗时5分钟，0报错 没有配置Node.js环境，没有安装npm包，就是一个单纯的HTML文件 手机打开也能完美显示，响应式布局自动适配
这让我意识到，Vibe Coding最大的魅力不是"不用学代码"，而是即时反馈。传统编程需要配置环境、安装依赖、调试端口，而AI直接把"最后一公里"都铺好了，你只需要关注"我要什么"，而不是"我怎么实现"。
未来一周：构建个人内容生产线
Day1的成功给了我信心，也让我看清了Vibe Coding的学习路径。这不是零散的教程学习，而是用一周时间搭建一套"自媒体内容自动化中台"。
这套学习计划遵循"工具即内容，内容即学习"的闭环：每天学Vibe Coding的技巧，同时做出解决实际问题的工具，再用这些工具生成当天的学习笔记发布到自媒体。一周后，我不仅掌握了AI编程，还拥有了一套专属的内容生产SaaS。
给同样小白的你
如果你也在犹豫要不要开始，我的建议是：不要先学HTML/CSS，不要先配置环境，直接打开DeepSeek，描述你想要的东西。
Vibe Coding时代，"完成"比"完美"重要，"动手"比"听课"重要。Day1的我连HTML标签都不认识，但我已经做出了能用的工具。这种"先上车后补票"的学习方式，或许正是普通人拥抱AI时代的最佳路径。
明天开始Day2，我要挑战做封面生成器了。如果你也想围观这个"从零搭建内容工厂"的过程，欢迎关注我的学习日记。
今日金句：代码不是敲出来的，是说出来的。
结语：
以上就是今天的全部分享，希望对你有所启发。如果你也在学习Vibe Coding，欢迎在评论区交流心得。
🚀关于作者，正在用AI重构学习方式的探索者，记录从0到1的Vibe Coding实战历程。
关注公众号，回复"工具"获取文中提到的自动化工具
