#Vibe Coding · AI 短帖与讨论

AI写代码早就不稀奇了，真正卡脖子的是UI丑得没法看。一个4.8万star的仓库，直接解决这个问题。 Google Stitch搞了个DESIGN.md概念，就是一个纯Markdown文件，丢进项目根目录，AI就能读懂你UI该长什么样。这个仓库把66个知名网站的配置全扒好了，苹果、特斯拉、Stripe都有。 使用方法很简单：复制一个md文件，告诉AI"照这个风格做"，出来直接是品牌级质感。以前找设计师肝到天亮才能做出来的东西，现在复制粘贴就完事了。 这个思路的核心在于：与其让AI自己猜你喜欢什么风格，不如直接告诉它。一个DESIGN.md文件就相当于给AI画了一个明确的设计规范，它会按照你指定的颜色、字体、间距、组件样式来生成UI。对于Vibe Coding来说，这解决了最大的痛点——代码能跑但界面没法看。66个知名网站的设计规范直接拿来用，相当于免费请了一堆顶级设计师当你的UI顾问。

Vibe Coding盛行的今天，模块划分依然是保证代码质量的关键。有人分享了一个很实用的原则：模块按"什么会变"来分，不是按"先做什么后做什么"来分。 新手容易犯的错误是按照流程来划分模块。比如电商网站的购物流程：用户下单→算钱→扣款→存库→发邮件。如果你把每个步骤拆成一个模块，后续维护会很痛苦。想给订单加一个"预计送达时间"，四个步骤都会受影响，改一个漏一个就会出问题。 好的做法是：先列出将来最可能变的东西，然后把每一个会变的东西放到一个模块里。电商网站里会变的东西有：支付渠道（支付宝→微信→Stripe）、优惠规则（运营隔三差五改）、通知方式（邮件/短信/App推送）、数据存储（MySQL换PostgreSQL）。这样分下来，每个模块的变化都只影响自己，不会波及其他地方。 判断标准很简单：一个需求改动来了，你需要动几个模块？理想情况是一个。如果运营改个优惠规则要同时动好几个文件，说明模块分错了。这种按"什么会变"的方式拆分模块对AI来说也是最友好的，因为AI受限于上下文窗口，一个变更如果能在单个模块内部解决，需要的上下文会少很多。

Vibe Coding零基础入门教程免费开源了。上千张图、几十万字，从零基础入门到10分钟做出第一个项目，再到学会各种AI编程工具、实战各类AI项目、掌握AI编程核心技巧、跑通产品变现全流程。 这套教程的核心思路是：哪怕你完全不懂代码，也能用AI开发上线自己的产品并盈利。从零基础入门到做出第一个项目只需要10分钟，然后逐步学习Cursor、Claude Code等主流AI编程工具的使用，再到实战各种真实项目。 教程还包含AI编程学习资源、AI知识百科、常见问题解决手册，基本覆盖了Vibe Coding从入门到变现的所有环节。 对想用AI编程但不知道从哪开始的人来说，这套教程的价值在于它是一个完整的路径：不只是教你用工具，而是帮你从零跑到能赚钱。教程是作者一人爆肝完成的，持续优化完善中。 建议收藏慢慢看，从第一个10分钟项目开始动手，比看一百篇教程有用。