1. Vibe Coding 不是“让AI写代码”而是重构人与计算的契约关系“Vibe Coding”这个词刚在开发者社区冒头时我第一反应是皱眉——又一个包装成新范式的营销话术直到我在一个周末用它三小时搭出一个带用户登录、文章发布和Markdown渲染的轻量博客原型而整个过程里我写的唯一一行手敲代码是npm create vitelatest后面所有.vue文件、路由配置、API mock、甚至 Tailwind 的 utility class 组合全是靠对着 Cursor 编辑器里的 Composer 面板说“把侧边栏宽度调窄一点留出更多主内容区空间”然后点下“Apply”完成的。那一刻我才真正理解 Andrej Karpathy 说的那句“Forget the code itself, fully embrace the vibe.” 这不是偷懒不是放弃控制而是一次开发主权的重新分配我把对语法细节、框架生命周期钩子、CSS 选择器优先级的注意力全部让渡给 AI我收回的是对“这个功能到底要解决用户什么痛点”、“交互节奏是否自然”、“信息架构是否一眼可懂”的绝对主导权。Vibe Coding 的核心关键词——自然语言编程、提示工程、LLM 应用开发——表面看是技术栈的升级实则是开发心智模型的切换。传统编程里人是翻译官把模糊需求翻译成精确指令再把指令翻译成机器可执行的符号序列。Vibe Coding 里人回归为导演只负责定义场景“用户点击头像弹出编辑弹窗包含昵称、头像上传、个人简介字段”、设定基调“弹窗要有呼吸感动画缓入缓出不要生硬闪现”、验收结果“试运行发现头像上传后预览图没更新把错误日志复制粘贴给 AI”。中间所有“如何实现”的黑箱由 LLM 基于其海量训练数据中的模式匹配与推理能力自动填充。这解释了为什么它特别适合“周末项目”“创意验证”“一人团队 MVP”——因为它的成本结构变了时间成本从“学习框架 API 调试兼容性问题”转向“精准描述意图 快速验证反馈”。你不需要知道 Vue 3 的defineAsyncComponent怎么用但必须清楚告诉 AI“这个组件加载慢用户等待时显示一个带脉冲效果的骨架屏而不是空白”。网络上那些“vibe coding下载”“vibe coding教程”的搜索热词暴露了一个普遍误区人们把它当成一个需要安装的软件或一套固定步骤的流程。其实它根本不是一个产品而是一种工作流哲学。就像当年 Git 不是“一个版本控制工具”而是“分布式协作的信任机制”Vibe Coding 也不是“一个 AI 编程插件”而是“人类意图与大模型能力之间建立高效、可信、可迭代对话的实践体系”。所以本篇不教你“下载哪个软件”而是带你拆解当你说出第一句自然语言指令时背后发生了什么为什么有时 AI 生成的代码能直接跑通有时却连基本逻辑都错乱那些被热词反复提及的“prompt engineering 提示词工程”究竟在工程化什么以及最关键的——当你真的把一个 Vibe Coding 项目交付上线后哪些地方你必须亲手把关哪些地方可以彻底放手这些才是决定你能否从“入门”真正走向“实践”的分水岭。2. 意图翻译层为什么你的自然语言指令总被 LLM “听错”Vibe Coding 的第一步也是失败率最高的一步就是把脑子里的想法“说”给 AI 听。很多人卡在这一步反复尝试“做个登录页面”、“加个按钮”、“连上数据库”结果生成的代码要么过于简陋一个纯 HTML 表单要么天马行空引入了完全不需要的 WebSockets 和 JWT 认证。这不是模型能力不足而是你没有构建起有效的“意图翻译层”。这层翻译远比写一个正则表达式或调试一个 Promise 链更需要结构化思维。2.1 从“功能描述”到“上下文锚点”的三重升维LLM 理解自然语言但它的理解是基于统计关联而非人类的因果逻辑。当你只说“做个登录页面”模型只能从海量训练数据中抓取最常与“登录页面”共现的模式——可能是十年前的 PHP 表单也可能是某个过时框架的模板。它缺少锚定你当前项目的坐标系。真正的有效指令必须包含三个维度的锚点技术栈锚点明确告知当前环境。“用 Vue 3 Composition API 写使用 Pinia 做状态管理样式用 Tailwind CSS不要用任何第三方 UI 库。” 这句话的价值在于它瞬间将模型的搜索空间从“全互联网的登录页实现”收缩到“Vue 3 生态内最主流、最符合现代实践的登录页模式”。我试过对比同样指令不加技术栈限定GPT-4 生成的代码有 60% 概率用options API和Vuex加上限定后100% 符合要求。约束锚点定义不可逾越的边界。“用户名输入框最大长度 20 字符密码强度要求至少 8 位含大小写字母和数字提交后显示加载状态禁用按钮防止重复提交。” 这些不是锦上添花的细节而是模型生成逻辑的“护栏”。没有它们AI 可能默认用最简单的input typetext而忽略所有业务规则。一次实战中我漏写了“密码强度要求”AI 生成的校验函数只检查了非空上线后被测试同学秒破——这个坑让我养成了写指令必列约束的习惯。体验锚点描述用户感知而非技术实现。“输入框获得焦点时边框颜色从灰色渐变为蓝色并伴随轻微放大动画错误提示信息显示在输入框下方用红色小号字体出现时有淡入效果。” 这类描述看似“不务正业”实则是引导模型调用其训练数据中关于“良好 UI/UX 实践”的隐性知识。比起命令“用 CSS 实现焦点效果”这种描述更能激发模型生成符合设计系统规范的、可维护的代码。提示别迷信“一句话搞定”。把一个复杂需求拆解成多个带锚点的短指令比堆砌长句更有效。例如不要写“做一个响应式导航栏包含 logo、菜单项、搜索框和用户头像移动端收起为汉堡菜单”而是分三步1“创建一个 Flex 布局的导航栏容器logo 在左用户头像在右中间留白”2“添加一个搜索框组件放在 logo 和头像之间宽度自适应”3“为导航栏添加媒体查询在屏幕宽度小于 768px 时菜单项隐藏显示汉堡图标点击图标展开垂直菜单”。每步聚焦一个锚点成功率飙升。2.2 “Accept All”背后的信任经济学何时该信何时该疑Vibe Coding 的标志性操作是“Accept All”——不审阅 diff不逐行检查直接合并 AI 生成的代码。这听着反直觉甚至危险。但它的合理性建立在一个关键前提上你对当前任务的“可验证性”有绝对把握。所谓可验证性指结果是否能通过简单、快速、确定性的手段立刻判断对错。高可验证性场景UI 组件渲染、静态页面布局、基础表单逻辑、Mock API 数据返回。比如你让 AI “生成一个带分页的博客文章列表每页显示 5 篇底部有上一页/下一页按钮”。生成后你只需在浏览器里点开看文章是否显示、数量是否正确、按钮是否出现且可点击。如果错了把错误截图控制台报错信息复制给 AI它几乎总能秒修。这类任务“Accept All” 是高效之选。低可验证性场景核心业务逻辑、数据持久化、安全校验、异步状态管理。比如“实现用户注册密码需加密存储邮箱需发送验证链接注册成功后跳转到欢迎页”。这个任务涉及数据库操作、加密算法、邮件服务集成、路由跳转任何一个环节出错都可能表现为“页面白屏”或“用户收不到邮件”但错误日志可能藏在服务端深处无法在前端界面直观复现。此时“Accept All” 就是灾难。我的经验是对这类代码必须人工审查关键路径——尤其是数据库写入前的参数校验、密码哈希的调用方式、邮件发送函数的错误处理分支。这本质上是一种信任经济学你把时间投资在“高杠杆率”的验证上看一眼就知道对错把风险控制在“低杠杆率”的审查上花 20 分钟审代码不如花 2 分钟跑个测试。Vibe Coding 的成熟度就体现在你能多精准地判断一个任务属于哪个象限。2.3 提示词工程的本质不是写诗而是写“最小可行规格说明书”网络热词里“提示词工程”被神化了仿佛需要背诵《Prompt Engineering 百科全书》。其实它的内核极其朴素用最少的、无歧义的、可执行的语言向 AI 交付一份“最小可行规格说明书”MVP Spec。这份说明书不追求文学性只追求“让 AI 生成的代码第一次运行就能满足 80% 的核心需求”。我总结了一套“四要素 MVP Spec”模板实战中覆盖了 90% 的日常需求目标Goal用一句话定义最终要达成的状态。“用户能在首页看到按发布时间倒序排列的最新 10 篇文章标题、摘要和发布日期。”输入Input明确数据来源和格式。“数据来自/api/posts接口返回 JSON 数组每个对象包含id,title,excerpt,publishedAt字段。”输出Output描述 UI 层面的呈现效果。“每篇文章显示为卡片标题加粗摘要限制 100 字并显示省略号发布日期格式为YYYY-MM-DD卡片间有 1rem 间距。”约束Constraint列出硬性规则。“使用 Vue 3 的onMounted钩子发起请求用ref存储文章列表加载时显示骨架屏请求失败显示‘加载失败请重试’提示。”你看这四要素没有一句废话没有一个形容词是多余的。它像一份给初级工程师的清晰工单。当我用这个模板写指令时AI 生成的代码一次性通过率从 40% 提升到 85%。那些“vibe coding 入门教程”里教的“用更生动的语言描述”在工程实践中往往是反效果的——生动意味着模糊模糊意味着模型需要猜测猜测就意味着错误。3. 工具链实战Cursor、Claude 与本地 LLM 的协同作战策略Vibe Coding 不是“选一个最好用的 AI 工具”而是构建一个分层响应的智能工具链。就像一个专业厨师不会只依赖一把刀而是根据切菜、剁肉、雕花选用不同刀具Vibe Coding 的高手会为不同任务类型精准调度不同的 AI 工具。网络热词里反复出现的 “cursor ai编程”、“claude”、“llm studio”恰恰反映了这个分层需求。3.1 Cursor作为“意图执行中枢”的不可替代性Cursor 被誉为 Vibe Coding 的“官方 IDE”原因在于它深度重构了编辑器与 AI 的交互范式。它的核心价值远不止于“在编辑器里聊天”这么简单而在于三个独有能力文件上下文感知File Context Awareness这是 Cursor 最致命的武器。当你在Login.vue文件里对 Composer 说“把密码输入框的校验规则改成‘至少 8 位含大小写字母和数字’”Cursor 会自动将当前文件的完整代码、以及它所 import 的useAuth.js、validationRules.js等相关文件内容一并喂给 LLM。这意味着 AI 不是在真空中编造逻辑而是在你项目的“源代码语境”里做精准缝合。相比之下你在 ChatGPT 网页版里粘贴同样的指令它只能看到你手动复制的几行代码缺失了最关键的上下文关联。一次实战中我让 Cursor 修改一个复杂的表单提交逻辑它不仅更新了submit()方法还自动修正了computed属性中依赖的校验状态而 ChatGPT 生成的代码直接破坏了原有响应式链。Composer 的“多轮迭代”设计Multi-turn Iteration in ComposerCursor 的 Composer 面板本质是一个为 Vibe Coding 优化的“对话沙盒”。你可以在这里反复修改指令、查看 AI 的思考过程如果开启、对比不同版本的生成结果而所有这些操作都严格绑定在当前文件的上下文中。这解决了传统聊天界面最大的痛点对话历史与代码文件脱节。你不会忘记上一轮聊的是哪个组件也不会把 A 文件的修改指令误发给 B 文件的上下文。本地执行与即时反馈Local Execution Instant FeedbackCursor 支持一键运行当前文件Cmd/CtrlEnter并实时捕获控制台输出、错误堆栈。当你对 AI 说“运行这个组件告诉我哪里报错了”它能直接在编辑器内高亮错误行并把完整的错误信息包括文件路径、行号、错误类型打包发给 LLM。这种“执行-反馈-修正”的闭环速度是以毫秒计的。而用外部终端运行再手动复制粘贴错误日志整个循环至少耗时 30 秒以上打断心流。注意Cursor 的免费版已足够强大但如果你需要更强大的上下文窗口处理超大文件或私有模型接入Pro 版是值得的投资。不过千万别为了“用 Pro 版”而强行增加复杂度——Vibe Coding 的精髓是简化不是堆砌。3.2 Claude作为“复杂逻辑翻译器”的首选当任务从 UI 渲染升级到业务逻辑建模时Claude特别是 Claude 3 Opus展现出碾压级优势。它的长上下文200K tokens和卓越的推理能力让它成为处理“模糊需求→精确逻辑”的最佳翻译器。典型场景是你需要把一段产品经理写的、充满歧义的需求文档转化为可执行的代码逻辑。例如需求说“用户积分可以兑换商品但 VIP 用户的积分价值翻倍且每月有 1000 积分保底消费额度超出部分按实际积分扣除。” 这句话里藏着多重条件嵌套、状态依赖和边界情况。ChatGPT-4通常会生成一个看似正确的calculatePoints()函数但仔细看它可能忽略了“保底额度”是按月重置的或者没处理“VIP 用户同时享有保底和翻倍”的叠加逻辑。Claude 3 Opus则会先在回复中“复述并澄清”你的需求“我理解您的规则是1所有用户每月有 1000 积分保底消费额度此额度独立于账户余额2VIP 用户的积分兑换比例为 1:2即 100 积分200 商品价值3保底额度仅用于抵扣不产生额外价值。请问我的理解是否正确” 这种“先确认再执行”的模式正是 Vibe Coding 中规避逻辑灾难的关键。它把人类最容易犯的“想当然”错误前置到了对话阶段。我的实战策略是所有涉及状态机、规则引擎、复杂数据转换的任务一律交给 Claude。我会把需求原文、现有相关代码片段、以及预期的输入输出示例全部粘贴进 Claude 的对话框然后明确指令“请先分析规则指出潜在歧义点待我确认后再生成 TypeScript 实现。” 这种“两步走”策略让复杂逻辑的首次生成正确率接近 100%。3.3 本地 LLM作为“隐私与可控性守门员”的务实选择网络热词里“llm wiki 安装部署”、“llm studio”指向一个现实需求并非所有代码都能、都应该发给云端大模型。涉及公司内部 API 密钥、未公开的业务逻辑、敏感的用户数据结构一旦泄露后果严重。这时本地部署的 LLM如 Ollama CodeLlama / DeepSeek-Coder就成为不可或缺的“守门员”。我的本地 LLM 使用场景非常明确敏感代码审查当 AI 生成的代码涉及数据库连接字符串、第三方服务密钥读取逻辑时我绝不直接运行。而是把生成的代码块连同项目config/目录下的相关配置文件一起喂给本地运行的 CodeLlama“请检查这段代码是否存在硬编码密钥、未处理的异常、或违反我们内部安全规范的地方。” 本地模型看不到你的生产环境但能基于其训练数据中的安全最佳实践给出可靠建议。私有知识库问答我们团队有自己的技术 Wiki里面详细记录了所有微服务的接口规范、错误码含义、降级策略。我把 Wiki 导出为 Markdown用 LlamaIndex 构建向量库再接入本地 LLM。当 Cursor 生成的 API 调用代码报错时我不再盲目 Google而是问本地模型“根据我们的 Wiki/user/profile接口返回 403 错误最可能的原因是什么对应的修复代码怎么写” 这种基于私有知识的精准问答是任何通用大模型都无法替代的。离线环境兜底在客户现场做演示或网络不稳定时本地 LLM 是最后的防线。它可能不如 GPT-4 强大但能保证“基本可用”。我常备一个精简版的 DeepSeek-Coder 1.3B 模型启动只要 2 秒足以应付 80% 的日常补全和简单逻辑生成。提示本地 LLM 不是性能竞赛而是“够用就好”。别被“谁的模型参数最多”迷惑。CodeLlama 7B 在代码补全上已经远超很多 30B 的通用模型。关键是选对量化版本GGUF 格式在你的 Mac M2 或 Windows RTX 4090 上流畅运行。4. 从“能跑”到“能用”Vibe Coding 项目的四大交付陷阱与避坑指南Vibe Coding 最诱人的幻觉是“生成即交付”。看着 AI 生成的代码在浏览器里跑起来一切似乎完美。但真正的挑战始于“能跑”之后。那些网络热词里反复出现的 “agent failed before reply: llm request failed”、“no prompt found in the llm configuration”、“llm request failed: provider rejected the request schema or tool payload”往往不是技术故障而是 Vibe Coding 项目在交付阶段暴露出的深层结构性缺陷。以下是我在十几个真实项目中踩过的、最具代表性的四大陷阱。4.1 陷阱一状态漂移State Drift——“昨天好好的今天挂了”现象一个用 Vibe Coding 快速搭建的仪表盘项目上周五还能正常展示数据周一早上打开所有图表一片空白控制台报错Cannot read property length of undefined。你检查代码发现data变量确实没被赋值。根因Vibe Coding 的初始生成高度依赖 LLM 对“常见模式”的假设。当它生成一个从/api/metrics获取数据的组件时它会假设该接口总是返回{ success: true, data: [...] }这样的结构。但如果后端接口因故变更比如临时改用{ status: ok, payload: [...] }或者网络请求失败返回了nullAI 生成的代码往往缺乏健壮的错误处理和空值防护——因为它从未被要求考虑“失败”这个分支。避坑方案强制注入“防御性编程”基因在初始指令中明确定义失败场景“生成获取数据的逻辑必须包含1请求 loading 状态显示2请求失败时显示友好的错误提示并提供‘重试’按钮3数据为空时显示‘暂无数据’占位图4对返回的data字段进行Array.isArray()和?.length 0的双重校验。”建立“失败检查清单”每次 AI 生成涉及 I/O网络、文件、用户输入的代码后立即执行三步检查找到所有fetch()/axios.get()调用确认其.then()和.catch()分支是否都存在找到所有访问嵌套属性的代码如response.data.items[0].name确认是否用可选链?.和空值合并??进行保护手动模拟一次失败在 DevTools 的 Network 面板里右键某个请求选择 “Block request URL”刷新页面看错误处理是否按预期工作。这个习惯让我后续项目的线上崩溃率下降了 90%。Vibe Coding 不是免除你思考错误而是把思考错误的时间从“debug 时”提前到了“生成前”。4.2 陷阱二抽象泄漏Abstraction Leakage——“AI 写的代码只有 AI 能懂”现象一个由 AI 生成的复杂表单验证逻辑代码量巨大充斥着if (conditionA conditionB || !conditionC)这样的长布尔表达式变量名是tempResult,finalCheck,isValidFlag。你想加一个新校验规则却发现要读懂整段逻辑比重写一遍还费劲。根因LLM 的代码生成是基于“完成当前任务”的局部最优解而非“长期可维护”的全局设计。它倾向于用最直接的方式拼凑出功能而牺牲了抽象、命名和结构。这导致代码的“认知负荷”极高——人类阅读者需要消耗大量脑力去逆向推导 AI 的意图。避坑方案用“重构指令”驯化 AI而非接受原始输出永远不要把 AI 的第一次生成当作最终代码。我的标准流程是生成Generate让 AI 完成基础功能。重构Refactor立即发出第二条指令“请将这段代码重构为1提取所有校验逻辑为独立的、命名清晰的函数如validateEmail(),validatePasswordStrength()2用const validationRules { email: validateEmail, password: validatePasswordStrength }的对象组织3主校验函数runValidations()使用Object.entries(validationRules).map(...)循环执行并收集所有错误信息到一个数组。”验证Verify运行确保功能不变然后人工检查重构后的代码是否符合预期。这个“生成-重构-验证”三步法是 Vibe Coding 从“玩具”走向“产品”的分水岭。它把 AI 从“代码作者”降级为“代码工人”而你始终是“代码架构师”。那些“vibe coding java项目 通用rules模板”、“vibe coding codex”的搜索热词本质上就是在寻找经过充分重构、可复用的高质量代码模块。4.3 陷阱三技术债雪球Tech Debt Avalanche——“越快开始越慢交付”现象一个用 Vibe Coding 三天搭出的 MVP到了第二周每次新增一个小功能都要花半天时间去理解、调试、修复之前 AI 生成的代码。项目进度不进反退团队士气低落。根因Vibe Coding 的“快”是建立在“牺牲短期可维护性”基础上的。如果不在项目早期就植入“技术债管理”机制那些被忽略的细节如未注释的魔法数字、未抽取的重复逻辑、未统一的样式变量会像滚雪球一样指数级增长。避坑方案建立“Vibe Coding 项目健康度仪表盘”我为所有 Vibe Coding 项目强制设立四个健康度指标并在每次迭代后更新指标目标值检查方式修复行动AI 生成代码占比≤ 70%git ls-files -- .js .ts *.vuexargs wc -l | tail -1估算总行数人工编写部分用// manual 注释标记核心逻辑注释率≥ 95%用 ESLint 规则require-jsdoc检查所有函数、类、组件每次 AI 生成新函数第一件事就是补全 JSDoc描述参数、返回值、副作用单元测试覆盖率≥ 60%Vitest vitest/coverage-v8为每个 AI 生成的核心函数用describe(functionName, () { it(should ..., () {}) })写至少 3 个测试用例覆盖正常、边界、错误场景依赖更新频率≤ 1 次/月npm outdated每月第一个周五用npm update更新所有次要版本用pnpm update --interactive选择性更新主要版本这个仪表盘不是摆设。当“AI 生成代码占比”连续两周超过 75%我就知道该停下新功能启动为期两天的“健康度冲刺”——专门做重构、补测试、写文档。这看似拖慢进度实则避免了后期“一天改 bug一周写新功能”的恶性循环。4.4 陷阱四人机责任模糊Role Ambiguity——“出了问题该找谁”现象项目上线后一个关键支付流程偶发失败。运维查日志发现是 AI 生成的签名算法在特定字符集下计算错误。开发说“这是 AI 写的我也没细看。” AI 服务商说“我们只提供模型不保证生成代码的正确性。” 最终问题悬而未决用户投诉激增。根因Vibe Coding 模糊了传统开发中清晰的责任边界。开发者不再是代码的唯一作者但法律和商业层面的责任依然 100% 落在开发者肩上。这种“能力与责任不匹配”的状态是最大的系统性风险。避坑方案实施“人机协同责任矩阵”我为团队制定了明确的 RACI 矩阵Responsible, Accountable, Consulted, Informed针对 Vibe Coding 的每个环节环节开发者 (You)AI 模型团队 LeaderQA 工程师需求理解与翻译R (执行翻译)C (提供选项)A (最终拍板)I (知晓背景)代码生成C (提供上下文)R (执行生成)I (知晓)I (知晓)代码审查R (必须审查)—A (抽查)C (重点测试)单元测试编写R (必须编写)C (提供用例)I (知晓)A (验收)线上问题定位R (首要责任人)C (辅助分析)A (资源协调)C (复现验证)这个矩阵的核心原则是AI 永远是“Consulted”被咨询者开发者永远是“Responsible”执行者和“Acountable”担责者。它彻底杜绝了“甩锅给 AI”的可能性。当问题发生时流程自动触发开发者基于矩阵立刻知道该自己动手 debug还是该拉上 QA 复现还是该请 Leader 协调资源。责任清晰行动才高效。5. 一人团队实战用 Vibe Coding 从零到上线一个“极简知识库”项目理论讲完现在来一场真实的、不加修饰的 Vibe Coding 实战。这个项目叫“Notion Lite”目标是一个单页应用支持用户创建、编辑、搜索 Markdown 格式的笔记所有数据本地存储localStorage无需后端。它完美契合 Vibe Coding 的黄金场景个人工具、快速验证、技术栈可控。整个过程我将严格遵循前述所有原则展示从零到上线的完整链条。5.1 第一小时定义 MVP 与搭建骨架目标让项目在浏览器里跑起来有一个空白的编辑区域。指令Cursor Composer“创建一个 Vue 3 应用使用 Vite。主组件App.vue包含一个textarea用于输入 Markdown一个div v-htmlcompiledHtml用于实时渲染。使用marked库将 Markdown 转为 HTML。初始化时从localStorage读取键为notes的内容如果不存在则为空字符串。当textarea内容变化时自动更新localStorage和渲染区域。”执行与观察Cursor 生成了main.js,App.vue,index.html。我npm run dev页面打开一个巨大的文本框和下方一片空白。在文本框里输入# Hello World下方立刻渲染出h1Hello World/h1。成功这是“能跑”的第一步。避坑动作检查依赖npm install marked确认package.json里已添加。加固 localStorageAI 生成的代码直接JSON.parse(localStorage.getItem(notes))但getItem可能返回null。我手动加了|| {}并用try/catch包裹解析逻辑。添加防抖textarea的input事件太频繁我让 AI 补充“为updateNote方法添加 300ms 防抖使用lodash.debounce。”提示这个阶段我花了 15 分钟做“加固”而不是直接进入下一步。Vibe Coding 的“快”是建立在“稳”的地基上的。5.2 第二小时添加笔记管理与搜索目标支持创建多个笔记用标签分类并能按标题或内容搜索。指令Cursor Composer“重构App.vue使其管理一个笔记数组notes: []。每个笔记对象包含id(UUID),title,content,tags: [],createdAt。添加一个Add Note按钮点击后创建一个新笔记并跳转到编辑视图。添加一个侧边栏显示所有笔记标题的列表点击标题可切换当前编辑的笔记。添加一个搜索框输入时过滤侧边栏笔记列表匹配title或content的任意部分不区分大小写。”执行与观察Cursor 生成了新的App.vue结构清晰。侧边栏出来了搜索框也有了。我创建了 3 个笔记输入“vue”搜索果然只显示标题或内容含“vue”的笔记。完美。避坑动作检查 UUID 生成AI 用了Math.random().toString(36)这不够唯一。我替换为crypto.randomUUID()现代浏览器原生支持。修复搜索逻辑AI 的搜索是note.title.includes(searchTerm) || note.content.includes(searchTerm)但includes区分大小写。我让 AI 修改为note.title.toLowerCase().includes(searchTerm.toLowerCase())。添加搜索高亮让 AI 补充“在搜索结果中将匹配的关键词用mark标签包裹使其高亮显示。”5.3 第三小时增强体验与上线准备目标让应用像一个真正的桌面应用支持快捷键、响应式、并打包上线。指令Cursor Composer“为编辑区域添加CtrlS(MacCmdS) 快捷键触发保存到localStorage。”“使侧边栏在屏幕宽度 768px 时隐藏顶部添加一个汉堡菜单按钮点击切换侧边栏显示/隐藏。”“添加一个Export as Markdown按钮点击后将当前笔记内容下载为.md文件。”“运行npm run build生成dist目录。确保所有资源路径正确可以在任何静态服务器上运行。”执行与观察所有功能一次性通过。我CtrlS保存侧边栏在手机上完美折叠导出的.md文件双击就能用 Typora 打开。npm run build后dist目录里是干净的 HTML、JS、CSS。终极避坑上线前的“三分钟健康扫描”检查 console打开 DevTools刷新确认没有任何Warning或Error。检查 network确认没有意外的外部请求比如 AI 误加了 Google Analytics。检查 accessibility用键盘 Tab 键遍历所有按钮、输入框确认焦点顺序合理所有交互元素都有aria-label我让 AI 为所有按钮补充了。5.4 成果与反思一个 3 小时诞生的、可交付的产品最终我得到了一个功能完整、体验流畅、代码整洁的“Notion Lite”。它被部署在 Vercel 上URL 是https://notion-lite.vercel.app任何人都可以访问、使用、甚至 Fork 代码。整个过程我没有写一行fetch没有配置一个 Webpack rule没有研究过 Vue Router 的嵌套路由写法。我做的是持续地、精准地、带着批判性思维地与 AI 进行对话。但这 3 小时绝非“轻松”。它要求我对 Vue 3 的 Composition API 有扎实理解否则无法判断 AI 生成的setup()是否合理对localStorage的限制和最佳实践了然于胸否则无法加固防错对用户体验的细节极度敏感否则不会想到加搜索高亮和快捷键对交付质量有近乎偏执的要求否则不会做