最近不少读者问我完全没写过代码能不能用 AI 做出一个完整的小工具我的答案是能但前提是你得掌握一套新的干活方式它叫Vibe Coding。这篇文章我从概念、工具选型、环境准备讲到两个完整实战项目全程保姆级操作0 基础也能跟下来。你会实际做出一个能保存书签的网页工具再做一个能把 Markdown 转成 Word 的 Coze 工作流顺便把 Codex、Claude Code、Cursor、扣子 Coze 这几个主流工具都摸一遍。1. 什么是 Vibe Coding1.1 Vibe Coding 是什么Vibe Coding 可以直译成“随性编程”或者“顺着感觉编程”。它指的是让人用自然语言描述需求由 AI 生成代码、修复错误、调整功能人主要负责确认方向、检查结果和不断提出修改意见。传统编程里每一行代码都要自己写程序跑不起来要自己查日志、找 bug、改语法。Vibe Coding 条件下这些工作大部分交给了 AI 代码助手你告诉它“我要一个能添加书签的网页”它直接就把前端页面、后端接口和数据存储都给你搭好。但这不意味着人完全不用动脑。Vibe Coding 更强调设计能力和审美判断你要能把需求说清楚能判断 AI 写的代码是不是符合预期还要会在 AI 跑偏时把它拉回来。1.2 为什么 Vibe Coding 会流行起来核心原因是 AI 编程工具的代码生成能力已经足够强强到可以处理“小项目级别的完整任务”。过去我们做一个小工具要经历安装环境、初始化工程、写接口、设计页面、调试功能这一整套流程。现在这些步骤变成了一段自然语言需求。尤其对于非程序员出身的开发者、产品、运营和独立开发者来说Vibe Coding 把“实现一个想法”的门槛拉低了很多。同时Google 官方也推出了面向 0 基础用户的 Vibe Coding 学习资源国内外的 AI 编程社区也在大量分享相关教程Vibe Coding 已经不只是技术圈的自嗨而是普通人也能用 AI 解决实际问题的通用能力。1.3 Vibe Coding 和 Spec-Driven 开发有什么区别很多读者会问Vibe Coding 和 Spec-Driven规范驱动开发到底有什么不同简单理解Vibe Coding需求很开放比如“帮我做一个好看的书签管理器”一边做一边调整过程中可能会冒出很多新想法。Spec-Driven先把需求梳理成一份完整、可验收的规格文档再让 AI 严格按规格实现适合对稳定性和一致性要求高的项目。两者不是对立的实际项目里我更建议结合使用用 Vibe Coding 快速做原型用 Spec-Driven 的思路沉淀核心需求再进入正式开发。这也是后面实战部分会采用的思路。2. 四个核心工具速览与选型2.1 Cursor —— AI 编辑器Cursor 是目前最主流的 AI 代码编辑器之一可以理解成“内置了 AI 助手的 VSCode”。你可以直接在编辑器里跟 AI 对话选中代码让 AI 修改或者让它根据你的需求新建整个文件。它对零基础用户比较友好界面和 VSCode 几乎一样有图形界面、有终端、有插件市场不需要面对黑色命令行窗口。2.2 Claude Code —— 终端里的 AI 编程助手Claude Code 是 Anthropic 推出的命令行编程工具直接在终端里通过自然语言与 AI 协作完成编程任务。它可以读取项目代码、定位问题、批量修改文件、运行测试并修复错误。刚开始用的时候会不太习惯——毕竟所有操作都发生在终端里没有可视化界面。但用过一段时间后你会发现它在处理“整个项目层面”的任务时效率很高非常适合和 Cursor 搭配使用。2.3 OpenAI Codex —— 云端自动化智能体Codex 是 OpenAI 推出的编程智能体工具定位和 Claude Code 类似但更强调云端自动执行能力。你可以把任务丢给它让它在云端环境里完成编码、运行、提交等操作。很多团队还会把 Codex 接入不同的模型服务使用比如社区里讨论较多的“Codex 接入 DeepSeek”方案本质就是让 Codex 客户端连接 OpenAI 兼容接口的其他模型。2.4 扣子 Coze —— 智能体与工作流平台Coze扣子是字节跳动推出的 AI 智能体开发平台非常适合做“不需要写前端页面”的自动化流程。你可以在 Coze 里创建智能体、搭建知识库、设计工作流甚至发布到飞书、微信等渠道。Coze 的工作流是一个图形化拖拽界面很像画流程图把输入、代码、逻辑分支、输出这些节点拖到画布上连起来就能拼出一个完整的自动化流程。2.5 它们的分工我用一个表格总结这四类工具的定位差异工具使用场景适合谁Cursor写前端页面、改代码结构、做日常编码零基础、前端开发者、全栈开发者Claude Code命令行里完成整个项目级任务习惯用终端、需要批量操作的开发者Codex云端智能体、自动审查、自动修 bug中高级开发者、AI 编程重度用户Coze搭建智能体、知识库、自动化工作流产品、运营、非程序员用户3. 环境准备与工具安装3.1 安装 Cursor 并设置中文Cursor 支持 Windows、macOS、Linux建议直接从官网下载安装包。安装完成后默认界面是英文的对新手不太友好。好在 Cursor 基于 VSCode 内核可以直接安装 VSCode 的中文语言包。操作步骤如下打开 Cursor点击左侧扩展图标或按CtrlShiftX。搜索关键词Chinese。找到 “Chinese (Simplified) Language Pack” 后点击安装。安装完成后按CtrlShiftP输入Configure Display Language。选择zh-cn然后重启 Cursor。如果重启后界面还是英文检查语言包是否安装成功并确认语言设置里选了zh-cn。不同版本菜单名称略有差异但整体流程是通用的。3.2 安装 Claude CodeClaude Code 通过 npm 安装所以需要先确保本机有 Node.js 环境。建议安装当前 LTS 版本的 Node.js避免版本过老导致兼容问题。打开终端执行npm install -g anthropic-ai/claude-code安装完成后在项目目录里输入claude首次启动会引导登录。你可以使用 Claude 账号订阅也可以通过 API Key 方式接入。具体登录方式以官方提示为准。在 VSCode 里使用 Claude Code 也很方便直接在 VSCode 终端中打开你的项目目录然后运行claude即可。Claude Code 可以读取当前项目中的所有文件因此在项目根目录启动非常重要。3.3 安装并登录 OpenAI CodexCodex 官方推荐的方式也是 npm 安装npm install -g openai/codex安装完成后在命令行执行codex login登录成功后输入codex即可进入交互式编程界面。如果遇到codex命令打不开或者无响应的情况先检查安装是否成功codex --version能输出版本号说明安装没问题此时大概率是登录态或官方服务状态问题可以重新执行codex login或者查看官方状态页面。3.4 注册扣子 Coze 并创建第一个智能体打开扣子官网按照引导注册并登录。国内与海外版本的账号体系不同根据你实际使用的地区和服务选择合适的平台。注册完成后点击“创建智能体”。输入智能体名称和功能介绍例如“文档格式转换小助手”。进入编辑页面后你会看到人设、技能、知识库、工作流等功能模块。本文的第二个实战会用到 Coze 工作流所以这里只需要完成账号注册和智能体创建即可。4. Vibe Coding 实战从一句话需求到可运行项目这个实战项目我们做一个个人书签管理器。它要能完成三件事添加书签标题、网址、分类、展示书签列表、删除书签。数据直接保存在本地 JSON 文件里不需要安装数据库。4.1 需求描述怎么写Vibe Coding 的第一个关键技能是写清楚需求。给 AI 的需求越具体生成结果越接近预期。我给 Cursor 和 Claude Code 的需求是这样写的帮我在项目里做一个个人书签管理器。 技术栈Node.js Express 原生 HTML/CSS/JS。 功能需求 1. 可以添加书签书签需要包含标题、网址、分类三个信息。 2. 页面展示所有书签列表每条书签可以删除。 3. 数据保存到项目目录下的 data.json 文件中不能使用数据库。 4. 页面要简洁美观适合日常个人使用。 约束不需要用户登录系统不考虑部署上线本地运行即可。这段需求包含了技术栈、功能、数据存储、页面风格和约束条件AI 基于它可以直接生成相对完整的代码。4.2 用 Cursor 生成前端页面在 Cursor 中新建一个项目文件夹比如bookmark-manager然后在项目里创建public/index.html。你可以新建文件后把上一步的需求发给 Cursor 的对话窗口让它生成前端代码。下面是完整可运行的前端文件核心代码较长但结构并不复杂!-- 文件路径bookmark-manager/public/index.html -- !DOCTYPE html html langzh-CN head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / title个人书签管理器/title style * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: system-ui, -apple-system, Segoe UI, Roboto, PingFang SC, Microsoft YaHei, sans-serif; background: #f5f7fb; color: #1f2937; max-width: 720px; margin: 0 auto; padding: 32px 16px; } h1 { font-size: 24px; margin-bottom: 8px; } .subtitle { color: #6b7280; margin-bottom: 24px; } .card { background: #fff; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); padding: 20px; margin-bottom: 24px; } .form-row { display: flex; gap: 8px; flex-wrap: wrap; } input { flex: 1; min-width: 120px; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; } button { padding: 10px 16px; border: none; border-radius: 8px; background: #2563eb; color: #fff; font-size: 14px; cursor: pointer; } button:hover { background: #1d4ed8; } .bookmark-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #eef1f5; } .bookmark-item:last-child { border-bottom: none; } .bookmark-info a { color: #2563eb; text-decoration: none; font-weight: 500; } .bookmark-info .tag { display: inline-block; margin-left: 8px; font-size: 12px; color: #6b7280; background: #f3f4f6; padding: 2px 8px; border-radius: 999px; } .delete-btn { background: #ef4444; padding: 6px 12px; font-size: 13px; } .delete-btn:hover { background: #dc2626; } .empty { text-align: center; color: #9ca3af; padding: 32px 0; } /style /head body h1个人书签管理器/h1 p classsubtitle保存你日常逛到的优质链接/p div classcard div classform-row input idtitle typetext placeholder标题例如AI 入门教程 / input idurl typeurl placeholder网址例如https://example.com / input idtag typetext placeholder分类例如教程 / button onclickaddBookmark()添加/button /div /div div classcard div idlist/div /div script async function loadBookmarks() { const res await fetch(/api/bookmarks); const bookmarks await res.json(); const list document.getElementById(list); if (bookmarks.length 0) { list.innerHTML div classempty暂时还没有书签先添加一条吧/div; return; } list.innerHTML bookmarks.map(item div classbookmark-item div classbookmark-info a href${item.url} target_blank relnoopener noreferrer${item.title}/a span classtag${item.tag}/span /div button classdelete-btn onclickdeleteBookmark(${item.id})删除/button /div ).join(); } async function addBookmark() { const title document.getElementById(title).value.trim(); const url document.getElementById(url).value.trim(); const tag document.getElementById(tag).value.trim(); if (!title || !url) { alert(标题和网址都是必填项); return; } const res await fetch(/api/bookmarks, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ title, url, tag }) }); if (res.ok) { document.getElementById(title).value ; document.getElementById(url).value ; document.getElementById(tag).value ; loadBookmarks(); } } async function deleteBookmark(id) { await fetch(/api/bookmarks/${id}, { method: DELETE }); loadBookmarks(); } loadBookmarks(); /script /body /html页面主要分成两部分上面是添加书签的表单下面是书签列表。JS 部分通过fetch调用后端接口实现页面的动态增删和展示。4.3 用 Claude Code 生成后端接口前端写完以后打开终端进入bookmark-manager项目目录运行claude然后把一开始那段完整需求发给 Claude Code让它补齐 Node.js 后端部分。后端代码的核心是 Express 服务负责提供接口和对data.json文件的读写。完整代码如下// 文件路径bookmark-manager/server.js const express require(express); const fs require(fs); const path require(path); const app express(); const PORT 3000; const DATA_FILE path.join(__dirname, data.json); app.use(express.json()); app.use(express.static(public)); function readData() { if (!fs.existsSync(DATA_FILE)) { return { bookmarks: [] }; } try { const raw fs.readFileSync(DATA_FILE, utf-8); return JSON.parse(raw); } catch (err) { console.error(读取数据文件失败已重置为空数据, err); return { bookmarks: [] }; } } function writeData(data) { fs.writeFileSync(DATA_FILE, JSON.stringify(data, null, 2), utf-8); } app.get(/api/bookmarks, (req, res) { res.json(readData().bookmarks); }); app.post(/api/bookmarks, (req, res) { const { title, url, tag } req.body || {}; if (!title || !url) { return res.status(400).json({ error: title 和 url 不能为空 }); } const data readData(); const bookmark { id: Date.now(), title, url, tag: tag || 未分类, createdAt: new Date().toISOString() }; data.bookmarks.push(bookmark); writeData(data); res.status(201).json(bookmark); }); app.delete(/api/bookmarks/:id, (req, res) { const data readData(); const id Number(req.params.id); data.bookmarks data.bookmarks.filter(item item.id ! id); writeData(data); res.json({ success: true }); }); app.listen(PORT, () { console.log(书签管理器已启动http://localhost:${PORT}); });代码逻辑其实就三块查询接口GET /api/bookmarks读取data.json并返回列表。添加接口POST /api/bookmarks接收 JSON 数据做非空校验后写入文件。删除接口DELETE /api/bookmarks/:id按 id 过滤掉对应书签。还需要一个package.json来管理依赖。你可以在项目目录下手动创建也可以让 Claude Code 帮你生成{ name: bookmark-manager, version: 1.0.0, description: 一个基于 Vibe Coding 生成的书签管理器, main: server.js, scripts: { start: node server.js }, dependencies: { express: ^4.19.2 } }4.4 用 Codex 做代码审查与修复项目能跑起来之后下一步是让 Codex 帮你审查代码。这是 Vibe Coding 里一个非常推荐的做法让一个 AI 写代码让另一个 AI 审查代码。在项目根目录执行codex然后输入请审查当前项目的代码重点检查 1. 前端 JS 是否存在 XSS 风险。 2. 后端接口是否缺少参数校验。 3. 数据文件读写是否健壮。 4. id 是否可能重复。 5. URL 是否应该校验格式。假设 Codex 返回了下面这类审查建议审查点问题改进建议前端渲染直接拼接item.title到 HTML 中特殊字符可能破坏页面结构对标题、标签做 HTML 转义输入校验只校验了空值没有校验 URL 格式前后端同时增加 URL 合法性校验id 冲突Date.now()在极端情况下可能重复使用crypto.randomUUID()异常处理JSON.parse可能因为文件损坏抛异常增加 try/catch你可以根据审查结果让 Codex 继续修复也可以手动修改。比如把 id 生成方式改成const crypto require(crypto); const bookmark { id: crypto.randomUUID(), // ... };这样 id 冲突的风险基本消除。4.5 运行与验证在项目根目录执行以下命令npm install npm start终端输出书签管理器已启动http://localhost:3000浏览器访问http://localhost:3000你应该能看到书签管理器的页面。试着添加几条书签然后刷新页面看数据是否保留。添加成功后项目目录下会自动生成data.json文件内容类似{ bookmarks: [ { id: f5a3f3f3-9d14-4b1d-9b5e-123456789012, title: AI 入门教程, url: https://example.com, tag: 教程, createdAt: 2025-06-01T10:00:00.000Z } ] }到这里你已经用 Vibe Coding 完成了一个全栈项目前端由 Cursor 辅助生成后端由 Claude Code 生成Codex 参与代码审查。5. Coze 实战搭建一个 Markdown 转 Word 工作流5.1 为什么要用 Coze 工作流日常工作中经常会遇到格式转换需求比如把 Markdown 笔记转成 Word 文档。这类重复性任务如果每次手动复制粘贴效率很低。把它封装成一个 Coze 工作流以后你只需要输入 Markdown 文本工作流会自动输出一个 Word 文件。Coze 工作流非常适合这类场景它不需要服务器不需要写前端页面用图形化节点拼接起来就能发布使用。5.2 设计工作流节点进入 Coze 智能体编辑页面后点击“工作流”并新建一个工作流。这个工作流只需要三个节点节点类型作用开始节点输入接收用户输入的 Markdown 文本代码节点Python把 Markdown 转换成 Word 文件字节结束节点输出返回生成的 Word 文件流程很简单用户输入 MarkdownPython 代码将它包装成最小可用的 docx 文件然后输出。5.3 关键节点代码在代码节点中我们需要实现一个不依赖第三方库的 Markdown 转 Word 逻辑。docx 文件本质上是一个 zip 压缩包里面包含[Content_Types].xml、_rels/.rels和word/document.xml等文件。我们可以用 Python 标准库zipfile直接构造一个最简单的 Word 文档。import zipfile import io from xml.sax.saxutils import escape def md_to_docx(markdown_text): paragraphs [] for line in markdown_text.splitlines(): line line.strip() if not line: continue if line.startswith(#): level len(line) - len(line.lstrip(#)) text line.lstrip(# ).strip() style fw:pStyle w:valHeading{min(level, 3)}/ else: text line style paragraphs.append( fw:p{style}w:rw:t{escape(text)}/w:t/w:r/w:p ) document_xml f?xml version1.0 encodingUTF-8 standaloneyes? w:document xmlns:whttp://schemas.openxmlformats.org/wordprocessingml/2006/main w:body{.join(paragraphs)}/w:body /w:document content_types ?xml version1.0 encodingUTF-8 standaloneyes? Types xmlnshttp://schemas.openxmlformats.org/package/2006/content-types Default Extensionrels ContentTypeapplication/vnd.openxmlformats-package.relationshipsxml/ Default Extensionxml ContentTypeapplication/xml/ Override PartName/word/document.xml ContentTypeapplication/vnd.openxmlformats-officedocument.wordprocessingml.document.mainxml/ /Types rels ?xml version1.0 encodingUTF-8 standaloneyes? Relationships xmlnshttp://schemas.openxmlformats.org/package/2006/relationships Relationship IdrId1 Typehttp://schemas.openxmlformats.org/officeDocument/2006/relationships/officeDocument Targetword/document.xml/ /Relationships buf io.BytesIO() with zipfile.ZipFile(buf, w, zipfile.ZIP_DEFLATED) as zf: zf.writestr([Content_Types].xml, content_types) zf.writestr(_rels/.rels, rels) zf.writestr(word/document.xml, document_xml) return buf.getvalue() # Coze 工作流中通常用 params 接收输入字段 markdown_text params.get(markdown_text, ) # 生成 docx 文件字节 docx_bytes md_to_docx(markdown_text) # 以二进制输出Coze 结束节点会识别为文件 output { docx_base64: base64.b64encode(docx_bytes).decode(utf-8) }代码实现思路如下遍历 Markdown 的每一行。对以#开头的行根据#的数量映射成 Word 的 Heading 1、Heading 2、Heading 3 样式。普通文本作为正文段落。用zipfile把这些 XML 内容压缩成符合 docx 规范的最小文件。因为 Coze 代码节点最终返回的是文本或键值对所以我们会把 docx 文件转成 Base64 字符串输出再配合“结束节点”把输出声明为文件类型用户就可以直接下载生成的 Word 文档了。5.4 发布与测试保存工作流后先在编辑页面里点击“试运行”输入一段 Markdown 测试# 会议纪要 ## 项目进度 - 已完成前端页面开发 - 后端接口进入联调阶段 ## 下一步计划 1. 完成接口测试 2. 准备上线评审运行成功后工作流会返回一个 docx 文件下载后用 Word 或 WPS 打开可以看到标题层级和正文都被正确转换了。测试没问题后你可以把工作流发布到智能体也可以把智能体连接到飞书等渠道。这样以后我只需要在对话框里粘贴 Markdown机器人就会返回一个 Word 文档非常适合日常办公场景。6. 常见问题与排查6.1 Codex 打不开问题现象常见原因解决思路codex命令无法识别安装失败或 Node.js 版本过低重新执行 npm 安装确认 Node.js 版本已登录但无法启动登录态过期执行codex login重新登录官方服务异常平台侧维护去官方状态页确认稍后重试启动后无响应本地 CLI 版本故障执行codex --version排查升级到最新版本6.2 CC Switch 本地代理报错很多使用 Claude Code CC Switch 管理模型供应商的朋友会碰到类似报错cc switch local proxy failed while handling codex endpoint /responses.这个报错的核心原因是CC Switch 在本地启动了一个请求转发服务把 Codex 的/responses请求转发到你配置的第三方模型地址。当这个地址无法正确处理/responses路由时本地转发服务就会报错。排查顺序如下打开 CC Switch 的供应商配置确认 base URL 是否为有效的 OpenAI 兼容接口地址并且以/结尾。确认你选择的模型名在该服务中真实存在。确认该服务支持/responses路由。Codex 使用的可能是 OpenAI Responses API不是所有第三方服务都原生支持。用 curl 直接测试本地转发服务的端点地址定位是配置问题还是服务端问题。如果配置无误更新 CC Switch 到最新版本再重新设置供应商。6.3 Claude Code 安装失败使用npm install -g anthropic-ai/claude-code时如果报权限错误Windows 用户可以尝试以管理员身份运行终端macOS/Linux 用户可以加sudo或者使用 nvm 管理 Node.js 环境。如果安装成功但运行claude无响应重点检查是否在项目根目录运行以及 API 配置是否正确。6.4 Cursor 中文化失败Cursor 设置中文失败大概率是中文语言包没装好或者设置后没有重启。可以按下面的顺序排查确认扩展搜索的是 “Chinese (Simplified) Language Pack” 而不是其他同名扩展。安装后按CtrlShiftP输入 “Configure Display Language”。选择zh-cn后彻底退出 Cursor 再重新打开。如果页面里Configure Display Language找不到可以手动点击右下角语言图标切换。6.5 API Key 安全提醒无论使用 Claude Code、Codex 还是其他 AI 编程工具都不要把 API Key 写进代码里。正确做法是放到环境变量或本地配置文件中并确保配置文件被.gitignore忽略。export ANTHROPIC_API_KEYsk-你的密钥 export OPENAI_API_KEYsk-你的密钥如果你用 Codex 接入 DeepSeek 等第三方兼容接口同样不要把密钥写死在代码仓库中export OPENAI_BASE_URLhttps://api.deepseek.com/v1 export OPENAI_API_KEYsk-你的密钥这里需要特别注意Codex 走的是/responses路由不是所有服务商都原生支持实际接入时要以官方文档和供应商支持为准。7. 最佳实践与工程建议7.1 怎么描述需求才高效Vibe Coding 的效率一半取决于 AI 能力另一半取决于你的描述能力。推荐使用这种结构一句话说明项目目标。明确技术栈。列出功能清单。说明数据怎么存储。给出界面风格要求。补充约束条件比如“不需要登录”“本地运行即可”。需求越具体AI 第一次写出来的代码可用度越高后面需要返工的地方越少。7.2 先提交代码再让 AI 修改强烈建议在每次让 AI 修改代码之前先提交一次 Git。这样即使 AI 把项目改坏了你也可以轻松回滚到上一个可用版本。每次提交信息要写清楚当前完成的功能点例如git add . git commit -m 完成书签新增与列表展示当多个 AI 工具轮流修改同一个项目时这一步尤其重要。7.3 让代码互相审查一个很实用的组合是Cursor 写前端、Claude Code 处理后端、Codex 做最终审查。不同模型的关注点不同交叉审查能发现不少单工具遗漏的问题。审查时不要只说“看一下代码”要给出具体的检查范围比如输入校验、XSS 风险、错误处理、并发问题。7.4 安全边界与使用场景限制Vibe Coding 适合快速原型、内部工具、个人项目但并不是所有场景都适合。涉及支付、大规模并发、复杂权限系统、敏感数据合规等场景时仍然需要专业工程师参与架构设计与代码评审。另外AI 生成的代码不一定理解你的真实业务上下文。任何代码进入生产环境之前都应该经过人工 review、测试环境验证和数据备份检查。8. 总结与学习路线到这里你已经完成了两个完整的 Vibe Coding 实战项目一个基于 Node.js Express 的网页书签管理器一个基于 Coze 工作流的 Markdown 转 Word 工具。过程中你掌握了 Cursor 生成前端、Claude Code 生成后端、Codex 审查代码、Coze 搭建自动化工作流这四个关键技能。接下来可以继续往两个方向深入一是学习更系统的需求描述方法比如 Spec-Driven 开发把 AI 编程从“随性创作”升级成“工程化交付”二是补一些最基础的编程概念比如接口是什么、JSON 结构怎么读、Git 如何提交代码。这些基础不会束缚你用好 AI反而能让 AI 生成的代码在你手里更可控。最后想说的是Vibe Coding 不是让你彻底不学编程而是让你用更低的门槛去验证想法。工具会不断更新换代但“先把问题描述清楚再借助 AI 快速迭代”的做事方式会持续有效。你可以照着本文把两个项目都跑起来然后试着改一改需求让 AI 帮你加一个新功能。多玩几次你就知道哪些需求描述好用哪些坑需要绕开了。