|
import{VibeCoding}from'AI-Programming'; // 来自推特爆文，2小时破50万阅读 "AI编程不是魔法，是纪律。你需要的不是更好的提示词，而是更好的理解。" |
> Step_01.你不是失败在AI，而是失败在自己
让我们开门见山。
你听说可以用AI写代码，于是兴冲冲打开Cursor或者Claude Code，用一句话描述了你的app想法，然后期待奇迹发生。
结果呢？代码一堆bug，UI颜色乱七八糟，页面跳转不工作，整个应用"好像能跑"但其实根本不能用。
然后你开始抱怨：AI太垃圾了。
这就是典型的甩锅行为。
真相是：AI不会凭空胡编乱造，它只是因为你没给它任何可以抓住的东西。没有结构，没有清晰的指令，没有基础的规范。
AI编程（Vibe Coding）确实有效，但前提是你必须理解自己在构建什么，并且给AI一个完整的系统框架来工作。
PRO TIP: 核心原则 如果你读完这篇文章还是做不出来，那问题就不是信息不够，而是你根本不愿意付出努力。 |
> Step_02.第一个致命错误：跳过了基础知识
你失败的根本原因是：你根本不知道自己在说什么。
你不知道什么是组件。你不知道状态是什么意思。你不理解为什么按钮点击后什么都没发生。你不明白为什么网站在笔记本上看起来正常，在手机上就乱套了。
因为你不懂这些，所以你无法向AI描述清楚。
AI是个翻译器。它把你的意图转换成代码。但如果你的意图本身就是垃圾，代码也必然是垃圾。
解决方案不是"写更好的提示词"，而是先建立更好的理解。
> Step_03.第二个致命错误：没有文档就开始写代码
这是所有人犯的最大错误。
你打开Cursor，开个聊天窗口，开始描述你的app，然后让AI立刻开始编码。没有计划，没有参考文档，没有任何真相来源（source of truth）。
这就是为什么你的项目在写了几个文件后就崩溃了。
正确的系统是：先写文档，再写代码。永远如此。
> Step_04.你需要的8个核心文档
在碰任何代码之前，先写好这些文档。
六个规范文档（你的知识库）
1. PRD.md（产品需求文档）
完整的规格说明。你在构建什么，给谁用，有哪些功能。这是你的合同。AI读完这个文档后，会准确知道什么叫"完成"。
2. APP_FLOW.md（应用流程文档）
每个页面、每条用户路径。什么触发每个流程，决策点在哪里，成功和错误时发生什么。这防止AI瞎猜用户如何导航。
3. TECH_STACK.md（技术栈文档）
每个包、依赖、API、工具，锁定到确切的版本号。这份文档消除了胡编依赖和随机技术选择。
4. FRONTEND_GUIDELINES.md（前端规范文档）
完整设计系统。字体、配色方案（精确到十六进制代码）、间距比例、布局规则、响应式断点。每个视觉决策都锁定。
5. BACKEND_STRUCTURE.md（后端结构文档）
数据库架构，包括每张表、每个字段、类型和关系。认证逻辑、API端点契约、存储规则。
6. IMPLEMENTATION_PLAN.md（实施计划文档）
逐步的构建序列。步骤越详细，AI猜测越少。AI猜测越少，胡编越少。
两个会话文件（你的持久化层）
7. CLAUDE.md
AI每次会话首先读取的文件，自动的。包含规则、约束、模式。把它想象成AI的操作手册。
8. progress.txt
所有人都会漏掉的文件！跟踪什么已完成、什么正在进行、下一步是什么。没有它，每个新会话都从零开始。
> Step_05.在写文档之前，先让AI拷问你的想法
这是改变一切的提示词：
"在写任何代码之前，只在规划模式下无休止地质疑我的想法。
不要假设任何事情。问问题，直到没有任何假设为止。" |
AI在你的清晰度结束的地方开始胡编。所以如果你扩展你的清晰度，你就能迫使AI在它开始在破碎的基础上构建之前找到你思维中的漏洞。
一旦质疑完成，你有了清晰的答案，用这个第二提示词：
"基于我们的对话，生成我的规范文档文件：
PRD.md, APP_FLOW.md, TECH_STACK.md,
FRONTEND_GUIDELINES.md, BACKEND_STRUCTURE.md,
IMPLEMENTATION_PLAN.md。
用我们对话中的答案作为素材。要具体、详尽，不要含糊。" |
PRO TIP: 正确的顺序 质疑 → 文档 → 代码。永远不要跳过。 |
> Step_06.前端基础概念速成课
让我用最简单的语言解释这些术语，这样你才能跟AI有效沟通。
组件（Component）
可重用的界面片段。想象乐高积木，每块积木是一个组件。按钮是组件，导航栏是组件，卡片是组件。
状态（State）
会变化的数据。点击按钮，状态改变了。在表单打字，状态改变了。状态让你的app感觉活着。
布局（Layout）
东西在页面上的位置。每个网站都是盒子里套盒子。掌握这个概念，你就理解了90%的网页设计。
响应式（Responsive）
网站在所有屏幕尺寸上都能工作。大屏显示更多列，小屏垂直堆叠。永远先考虑移动端。
路由（Routes）
页面就是用户看到的，路由就是显示那个页面的URL。yoursite.com/ 显示主页，yoursite.com/about 显示关于页面。
前端 vs 后端
前端是用户看到和交互的界面。后端是幕后的数据库、用户账户、处理逻辑。简单网站可能不需要后端。
> Step_07.设计风格速查
当你在FRONTEND_GUIDELINES.md或提示词中引用这些术语，它们会解锁特定的、可识别的美学。
玻璃态（Glassmorphism）
磨砂玻璃效果。半透明元素，背景模糊，悬浮在彩色背景上。想想苹果的macOS、Windows 11。
新野兽派（Neobrutalism）
粗糙、大胆、故意不精致。高对比色彩、粗黑边框、平面阴影。想想Gumroad。
本托网格（Bento Grid）
模块化布局，内容排列在不同大小的方块中，像日本便当盒。苹果推广了这个。
暗黑模式（Dark Mode）
不只是偏好切换，它是设计系统。深色背景配浅色文字，仔细的对比度比例，柔和的强调色。
微交互（Micro-interactions）
响应用户操作的小动画。悬停时按钮微微放大。这些细节把精致产品和业余产品区分开。
不要说"让它看起来现代"。说"玻璃态卡片，本托网格布局，暗黑模式，悬停状态有微交互。"这是具体的、可构建的方向。
> Step_08.最后的建议：用截图作为参考
大多数人不知道的技巧：用截图作为参考。
找一个你喜欢的app或网站（也许在Framer或Dribbble上），截图，直接喂给Claude Code或Cursor。
提示："匹配这个布局"、"精确复现这个UI"、"用这个UI作为灵感"。
AI可以分析图像，从截图中提取设计模式、间距、配色方案、排版、组件结构。
这比用文字描述设计要好无数倍。
> Step_09.总结：成功的完整路径
如果你按照这个系统走，你会成功：
1. 让AI质疑你的想法
在规划模式下，问到没有假设为止
2. 生成8个核心文档
6个规范文档 + 2个会话文件
3. 锁定设计决策
在FRONTEND_GUIDELINES.md中定义颜色、间距、组件
4. 学习基础概念
理解组件、状态、布局、路由
5. 用截图作参考
视觉示例胜过千言万语
6. 文档优先，代码其次
永远如此
FINAL WORD: vibe coding不是魔法。它是纪律。 AI不会读心术。它需要清晰度、结构、约束。给它这些，你会构建出难以置信的东西。不给？你会继续抱怨AI不行。现在你知道该怎么做了。剩下的就看你愿不愿意付出努力。 |
10个月宝宝每天需要喝多少奶粉？
