企业官网建设流程全解析

最近 AI 编程圈讨论最热的词，已经从 Cursor 转移到了 Vibe Coding。很多零基础的同学被“编程靠感觉写”这句话吸引，真正打开工具后却发现：脑子里的想法和屏幕上的代码之间，依然隔着一道坎。这道坎不是“不会语法”，而是“不知道如何把自己的需求准确地交给 AI，也不知道 AI 生成的东西到底能不能跑”。

这篇文章想解决的就是这个问题。我会围绕 Claude Code、Codex、Superpowers 三个关键词，把一套适合零基础入门的 AI 编程全流程拆开讲一遍：它到底是什么、解决什么问题、怎么安装配置、怎么跑通一个真实小项目、遇到常见报错怎么排查。适合完全没写过代码的人，也适合刚接触 AI 编程、被各种概念绕晕的新手。

先说一个明确判断：零基础学 AI 编程，真正值钱的能力不是“背语法”，而是掌握“自然语言描述需求 → AI 生成代码 → 人工验证反馈 → 循环迭代”这一套工作方式。工具会不断更新，但这个循环不会变。本文所有内容都围绕这个循环展开，希望你读完能直接照着操作一遍。

1. 零基础学编程，先搞懂 Vibe Coding 解决什么问题

1.1 Vibe Coding 是什么

Vibe Coding 可以通俗理解成“靠感觉编程”。它最早描述的是这样一种开发状态：你不用逐行手敲代码，而是用自然语言描述你想要的程序，让 AI 生成代码，你负责检查、运行、提出修改意见。整个过程很像和一个非常耐心但偶尔走神的同事结对编程：你把需求说清楚，他写出初版代码，你跑一跑发现问题，再反馈给他修改。

从技术角度看，Vibe Coding 背后是当前大模型对代码的理解和生成能力已经足够强，能在多轮对话中维护上下文，并根据用户的反馈不断调整生成结果。它解决的第一个问题，是降低了编程入门时“语法出错”带来的挫败感。传统学习路径中，一个分号、一个缩进错误就可能让新手卡住半小时；在 Vibe Coding 中，这类问题通常会由 AI 自动修复。

它解决的第二个问题，是把学到的东西从“知识”变成“反馈信号”。过去初学者要等学完很多章节才能做一个小项目，而 Vibe Coding 能让你第一天就做出一个可交互的网页或小工具。这种即时反馈对学习动机的正面影响，比背十遍语法都明显。

不过这里要特别提醒一个误区：Vibe Coding 不等于“什么基础都不用学”。你仍然需要理解“程序是怎么运行的”“数据存到哪里了”“页面是怎么渲染的”这类基础概念，否则你无法判断 AI 生成的代码是否正确，也难以提出有效的修改请求。AI 可以帮你写代码，但无法代替你建立对代码的判断力。

1.2 Vibe Coding 和传统学习方式对比

这个对比不是要否定传统学习。恰恰相反，Vibe Coding 入门后的下一步，往往就是回到传统学习路径去补“数据结构”“算法”“软件工程”等知识。区别在于，你是在做过真实项目之后带着问题去补，而不是在完全没见过项目的情况下死记硬背。

对于零基础读者，我建议把 Vibe Coding 当成“第一桶金”：先用它快速做出一个能运行的程序，建立信心和全局认知，再决定要不要深入底层知识。这就是为什么这类玩法比单纯“啃书”效率高得多的核心原因。

2. Superpowers 与 Skill：让 AI 不只“写代码”，还能“走流程”

2.1 从普通 Prompt 到 Skill

先用 Claude Code 举个例子。在 Claude Code 里，你可以直接输入一个 prompt，比如“帮我做一个待办事项网页”，AI 会生成代码。但真实项目远没有这么简单：一个完整功能可能需要先拆需求、再定技术方案、然后写代码、做测试、修 bug、补文档。如果每一个环节都要你用一段长 prompt 重新描述一遍，效率会非常低。

Skill 这个概念解决的就是这个问题。它是一个“可复用的技能包”，里面通常包含针对某类任务的提示词、执行步骤、文件操作规范和输出格式。当你调用一个 Skill 时，AI 不再只收到一句话，而是收到一套经过设计的工作流程，它会按照步骤执行，而不是漫无目的地发挥。

用生活化的方式理解：普通 Prompt 像你临时找人帮忙，“帮我把房间收拾一下”，对方可能只把衣服叠起来；Skill 则像你给家政人员一份标准作业单，包含“先扫地、再擦桌、最后拖地、所有物品放回原位”。在 AI 编程中，Skill 的价值就是把散落在无数 prompt 里的经验，固化成可重复执行的标准化流程。

2.2 Superpowers 项目大致包含什么

从社区公开讨论和项目结构来看，Superpowers 是一个以 Claude Code 为主要运行环境的 Skill 集合项目。它把一些相对高频的开发任务封装成 Skill，使用者把项目下载到本地后，通过配置加载到 Claude Code 的 skills 目录里，就可以在对话中直接调用。

这类 Skill 通常覆盖这些方向：

• 需求分析与任务拆解：把一个模糊的想法拆成可执行的开发任务；
• 代码生成与代码审查：按约定规范生成代码，并在完成后检查逻辑遗漏；
• 测试与调试：生成测试用例，定位运行时异常；
• 文档与提交信息：自动生成 README、CHANGELOG、commit message；
• 特定框架或场景的模板：比如构建某个前端项目时，一次性给出目录结构和基础配置。

需要注意，不同版本、不同仓库里的 Superpowers 内容可能差别很大，而且这类项目更新速度非常快。本文不会依赖某个具体版本的内部细节，而是教你通用接入方式。这样做的好处是：即使项目仓库换了地址、Skill 名称变了，你仍然知道整个机制是怎么运作的。

2.3 为什么 Skill 对零基础很重要

零基础用户最容易出现的问题，是面对 AI 时“不知道该说什么”。有了 Skill 之后，你不再需要自己设计一套复杂的提示词，只需要告诉 AI“用哪个 Skill 来处理当前任务”。AI 会按 Skill 内部定义的步骤执行，并在关键节点向你提问。这相当于把“资深开发者怎么驱动 AI”的经验，直接借给了新手。

这也是我在标题里把 Superpowers 和 Vibe Coding 放在一起的原因。Vibe Coding 解决的是“用自然语言编程”的整体思路，Superpowers 解决的是“怎么让这种编程方式更规范、更可复用”的方法问题。两者结合，零基础用户才真正具备独立完成一个小项目的能力。

3. 环境准备：安装 Claude Code 与 Codex

3.1 前置条件

本文后面的实战演示会同时用到 Claude Code 和 Codex，所以先统一准备环境。以下内容不依赖特定操作系统，但命令示例以 macOS 和 Linux 为主，Windows 用户建议在 PowerShell 中执行并注意命令差异。

需要准备的工具：

• Node.js：Claude Code 和 Codex 都通过 npm 安装，所以先确认 Node.js 可用。具体版本要求以官方文档为准，常见要求是 Node.js 18 或更高版本。
• Git：用于下载 Superpowers 等代码仓库，也是日常管理项目代码的工具。
• 终端工具：macOS 用 Terminal，Windows 可以用 PowerShell 或 Windows Terminal。
• 一个用于 AI 服务登录的账号：不同工具阵营不一样，Claude Code 通常需要 Anthropic 账号或企业托管平台的访问权限；Codex 通常需要 OpenAI 账号权限。实际以工具启动后的登录提示为准。

检查 Node.js 和 npm 是否安装：

node -v npm -v

如果提示command not found，说明需要先安装 Node.js。安装方式有很多种，建议去 Node.js 官网下载 LTS 版本，或者使用系统对应的包管理工具。版本确认后再继续安装 AI 编程工具。

3.2 安装 Claude Code

在终端里执行全局安装命令：

npm install -g @anthropic-ai/claude-code

安装完成后，检查版本：

claude --version

如果能看到类似x.x.x的版本信息，说明安装成功。此时可以先运行一次登录流程：

claude

第一次启动通常会提示登录或授权，按照官方引导完成账号绑定即可。过程可能因为不同版本而变化，核心是看到类似“登录成功”的反馈。

这里有一个容易踩坑的地方：如果你之前装过旧版 Claude Code，升级到新版本后，部分配置和模型名可能不兼容。旧版不认识新模型是很常见的问题，后面的常见问题章节会专门讲。

3.3 安装 Codex

这里的 Codex 指的是 OpenAI 推出的命令行编程工具 Codex CLI，它和历史上的“Codex 模型”不是同一个东西。安装命令：

npm install -g @openai/codex

然后检查版本：

codex --version

接着登录：

codex login

登录完成后，建议先切到沙箱模式跑一条最简单的指令，确认基本链路是通的：

codex "写一个 Python 脚本，打印 hello world"

如果账号权限正常，Codex 会开始生成代码并询问你是否执行。整个交互是对话式的，你会看到它对任务的思考和最终结果。如果这一步出问题，大概率是登录状态或网络环境导致的，排查思路放在常见问题章节。

3.4 登录验证与工作区准备

两个工具装好后，建议单独建一个练习目录，避免在系统目录或别人的代码仓库里让 AI 乱改文件。以待办事项项目为例：

mkdir -p ~/ai-coding-lab/todo-app cd ~/ai-coding-lab/todo-app

这个目录就是你的实验工作区。在后续实战里，Claude Code 生成的文件都会放在这里，Codex 生成的代码也会被要求放在这里。单独建目录这个习惯非常重要，尤其是对零基础用户，可以避免误改系统文件或者覆盖你之前写过的代码。

建议在练习目录里先初始化 Git：

git init git add . git commit -m "init project"

Git 是 AI 编程时代最值得先学的“传统工具”之一。原因很简单：AI 生成代码并不保证正确，每次让 AI 修改之前，先提交一个版本，改出问题还能回滚。这个安全网越早建立越好。

4. 安装与使用 Superpowers 扩展技能

4.1 获取 Superpowers 项目

Superpowers 是一个开源社区项目，获取方式一般是 git clone。由于不同仓库地址存在变动，这里不写死 URL，操作逻辑如下：

git clone <你获取到的 Superpowers 仓库地址> superpowers

把仓库下载到本地后，通常会在目录里看到skills子目录，里面就是一堆 Skill 技能包。每个 Skill 通常是一个文件夹，文件夹里包含一个SKILL.md文件，这是 Claude Code 识别 Skill 的核心文件。

需要注意，不同项目对目录结构、依赖安装有自己的说明。下载后建议先看仓库里的 README，里面通常有“Installation”或“Quick Start”章节。AI 编程工具更新快，项目维护者也会频繁调整目录结构和命令，看 README 永远比猜命令更稳妥。

4.2 把 Skill 加载到 Claude Code

Claude Code 支持两种加载 Skill 的方式：一种是用户级，放在~/.claude/skills下，对所有项目生效；一种是项目级，放在.claude/skills下，只对当前项目生效。零基础入门建议先使用用户级，这样在任意目录下都能加载已有技能。

手动创建目录并复制：

mkdir -p ~/.claude/skills cp -r superpowers/skills/* ~/.claude/skills/

复制完成后，可以在~/.claude/skills下看到类似于这样一个目录结构：

~/.claude/skills/ ├── task-analysis/ │ └── SKILL.md ├── code-review/ │ └── SKILL.md └── ...

如果你不想手动复制，也可以根据 Superpowers 项目 README 里的说明执行一键安装脚本。手动复制的优势是你能直观看到 Skill 文件的存在，方便理解原理。

4.3 验证 Skill 是否生效

回到练习目录，启动 Claude Code：

cd ~/ai-coding-lab/todo-app claude

进入交互界面后，输入一条和 Skill 相关的指令，比如尝试列出当前可用的 Skill：

请告诉我当前环境中加载了哪些 Skill，并简要说明每个 Skill 的用途。

如果 Claude Code 能识别出你复制的 Skill 列表，说明加载成功。如果它说“没有找到 Skill”，优先检查：

• 目录路径是否为~/.claude/skills；
• SKILL.md文件是否存在；
• Claude Code 版本是否支持 Skill 功能；
• 如果仍然不行，重启 Claude Code 再试。

这里要提醒一句：Skill 的目标是“让 AI 按流程执行”，但你也需要知道某个 Skill 适合解决什么问题。不要一次性加载几十个 Skill 然后在对话框里反复试错，建议先选定一个需求，比如“创建一个小项目”，找到对应的 Skill 后专注跑通它。

5. 完整零基础实战：从一句话需求到一个可运行网页

5.1 第一步：把需求写清楚

零基础用户最容易犯的错误，是丢给 AI 一句“帮我做个网站”就等结果。这句话太模糊，AI 不知道你要的是博客、电商页还是企业官网，最后只能给你一个什么都沾一点但什么都不好用的结果。

正确做法是把需求拆成可验证的具体功能点。这里以“待办事项网页”为例，写成一段结构化提示词：

请用纯 HTML + CSS + JavaScript 实现一个待办事项页面，要求： 1. 输入框可以输入新任务，点击“添加”按钮后加入列表； 2. 每个任务前面有一个复选框，勾选后任务文字显示删除线； 3. 每个任务后面有一个“删除”按钮，点击后移除任务； 4. 数据保存到浏览器的 localStorage，刷新页面后任务不丢失； 5. 页面在手机端也能基本显示，不要使用任何外部框架。 请直接生成完整的 index.html 文件。

这段提示词覆盖了功能、存储方式、页面样式、技术约束和输出形式。你会发现，AI 编程的“提示词”本质上就是需求文档，写得越具体，结果越接近预期。

5.2 第二步：使用 Claude Code 运行项目生成

在终端里启动 Claude Code：

cd ~/ai-coding-lab/todo-app claude

在交互界面中把上面的需求提示词粘贴进去，然后回车。Claude Code 会开始生成代码，并在适当位置创建文件。如果你想让它生成一个文件而不是只输出内容，可以在提示词里明确说明“请创建 index.html 文件”。

AI 生成的结果每次可能不完全相同，但整体结构会接近下面的样子：

<!-- 文件路径：~/ai-coding-lab/todo-app/index.html --> <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>我的待办事项</title> <style> body { font-family: system-ui, sans-serif; max-width: 600px; margin: 40px auto; padding: 0 16px; } #task-input { width: 70%; padding: 8px; } button { padding: 8px 12px; cursor: pointer; } li.done { text-decoration: line-through; color: #999; } </style> </head> <body> <h1>我的待办事项</h1> <div> <input id="task-input" placeholder="输入新任务" /> <button id="add-btn">添加</button> </div> <ul id="task-list"></ul> <script> const list = document.getElementById('task-list'); const input = document.getElementById('task-input'); const addBtn = document.getElementById('add-btn'); function renderTask(text, done = false) { const li = document.createElement('li'); const span = document.createElement('span'); span.textContent = text; const checkbox = document.createElement('input'); checkbox.type = 'checkbox'; checkbox.checked = done; if (done) li.classList.add('done'); const deleteBtn = document.createElement('button'); deleteBtn.textContent = '删除'; li.appendChild(checkbox); li.appendChild(span); li.appendChild(deleteBtn); list.appendChild(li); checkbox.addEventListener('change', () => { li.classList.toggle('done', checkbox.checked); saveTasks(); }); deleteBtn.addEventListener('click', () => { li.remove(); saveTasks(); }); } function saveTasks() { const items = [...list.querySelectorAll('li')].map(li => ({ text: li.querySelector('span').textContent, done: li.classList.contains('done') })); localStorage.setItem('tasks', JSON.stringify(items)); } function loadTasks() { const tasks = JSON.parse(localStorage.getItem('tasks') || '[]'); tasks.forEach(task => renderTask(task.text, task.done)); } addBtn.addEventListener('click', () => { const text = input.value.trim(); if (!text) return; renderTask(text); saveTasks(); input.value = ''; }); loadTasks(); </script> </body> </html>

这段代码的核心逻辑有四个部分：renderTask负责把一个任务渲染到页面列表；saveTasks把当前列表状态写入 localStorage；loadTasks在页面加载时恢复已保存的数据；添加按钮的事件处理函数负责把输入框内容变成一个新任务。

即使你完全没学过 JavaScript，也能从这些代码里看出一个基本套路：页面上的操作对应一个事件，事件回调函数里去修改数据，然后把数据保存起来。这个“操作 → 修改数据 → 保存状态”的概念，是所有前端项目的地基。

5.3 第三步：使用 Codex 完成类似任务

同样的需求，也可以交给 Codex。在练习目录下输入：

cd ~/ai-coding-lab/todo-app codex "请创建一个 todo.html，功能包括添加任务、标记完成、删除任务，数据保存在 localStorage"

Codex 默认会先分析你的请求，然后提出执行计划，并在生成代码后询问是否写入文件。对于零基础用户，建议始终选择让它写出完整文件，而不是只在终端里打印代码。这样你能直接打开浏览器测试。

要特别注意的是，Codex 和 Claude Code 都支持在项目目录里执行命令。AI 能在你授权的情况下运行命令、读取文件、修改代码。第一次使用时，你会看到权限确认提示，建议在练习项目里逐步放行，但不要整个文件系统无限制授权。安全边界在最后一章会展开说。

5.4 第四步：人工检查与迭代

AI 生成代码后，不一定马上能用。你需要做一次“验收”。零基础验收不需要读完整代码，可以按功能点逐项测试：

• 是否可以输入文字并添加到列表；
• 勾选复选框后是否有删除线效果；
• 点击删除后任务是否消失；
• 刷新页面后任务是否还在；
• 手机尺寸下页面是否错乱。

如果哪一项不满足，把它作为反馈发给 AI。比如：

列表项在手机上换行很乱，请优化 CSS，让手机端也保持整齐。

这就是 Vibe Coding 的核心循环：跑起来 → 发现问题 → 反馈给 AI → 再跑。你不需要一开始就懂所有实现细节，但必须成为一个合格的“验收员”。验收能力越强，AI 生成的项目质量越高。

6. 运行结果与效果验证

6.1 启动本地服务

用浏览器直接打开index.html通常也能运行，但为了模拟真实网页环境、避免本地文件协议带来的 localStorage 限制，推荐起一个本地静态服务：

cd ~/ai-coding-lab/todo-app python3 -m http.server 8080

浏览器访问：

http://localhost:8080/index.html

如果是 Windows 且没有 python3 命令，可以尝试：

python -m http.server 8080

或者使用 VS Code 的 Live Server 插件，本质上是一样的效果。

6.2 功能验收清单

打开页面后，按下面清单逐项验证：

如果所有结果都符合预期，这个最小项目就算跑通了。如果某一步失败，建议先看看浏览器控制台报错。打开方式一般是按 F12 进入开发者工具，再切到 Console 面板。控制台里的红色报错信息，就是给 AI 的最好反馈材料。

6.3 把验收结论反馈给 AI

明确告诉 AI“现在成功了几项、失败了几项”，比单纯说“有 bug”高效得多。比如：

刷新后任务丢失了，我发现 localStorage 好像没有生效，请检查保存和加载逻辑。

AI 会根据你的描述定位问题，并给出修改后的代码。修改完成后，重新刷新页面再测一遍。这个“测试 → 反馈 → 修改 → 再测试”的循环，本质上就是真实软件开发流程的缩略版。

7. 常见报错与排查思路

AI 编程工具看起来很简单，但安装和运行阶段依然有一批高频报错。下面把目前社区讨论最多的几个问题整理成一个排查表，并补充具体处理建议。

针对几个重点问题，再展开说明一下。

7.1 unable to locate the codex cli binary

这个报错常见于桌面端应用或编辑器插件试图调用 Codex CLI，但实际找不到可执行文件。排查的第一步是确认命令行里能不能正常用 codex：

codex --version

如果提示找不到命令，说明 Codex CLI 没装好。装好之后，再回到集成工具里检查是否需要在设置中指定可执行文件路径。不同工具对这一项的叫法不同，有的是 “Codex CLI Path”，有的是在环境变量里设置。搜索到的材料中已经提到了一个关键环境变量，需要你把路径指向你机器上真实的 Codex CLI 可执行文件位置。这类错误通常是“配置路径”和“实际安装位置”不一致导致的。

7.2 本地转发服务启动失败

cc switch local proxy failed while handling codex endpoint /responses这个报错，核心不是模型本身不可用，而是切换工具在转发请求到 Codex endpoint 时，本地组件没有成功启动。常见原因有三个：端口被占用、相关配置文件损坏、目录权限不足。处理顺序建议是：先重启终端和工具，再检查配置文件是否有新增字段导致版本不兼容，最后确认本地监听的端口是否冲突。

这里不展开任何网络代理设置，主要是因为这类问题通常和本机服务配置有关，而不是网络通道问题。如果你执行了切换命令但没有实际使用本地转发服务，直接升级工具版本、恢复默认配置往往就能解决。

7.3 Claude Code 529 报错

529 是 Claude Code 用户经常遇到的状态码，含义通常是服务端暂时过载或当前账号触发了限流。遇到 529，先不要立刻疯狂重试，那样很容易触发更严格的限流。建议等待几秒钟到几分钟再试，同时检查账号的服务状态是否正常。如果持续出现，降低并发请求数量，或者在非高峰时段运行批量任务。

7.4 模型名称不被当前版本识别

报错信息形如：某模型名 is not a model this version of claude code recognizes。这里的关键词是 “this version”。大模型产品迭代很快，旧版本客户端往往不包含新模型名，或者模型 ID 拼写发生了变化。解决办法是升级 Claude Code，然后用claude model list这类命令查看当前版本支持的模型标识，不要自己猜名字。如果你接入了第三方兼容接口，也要先确认对应的模型 ID 是否被当前客户端版本白名单接受。

8. 零基础 AI 编程最佳实践与避坑指南

8.1 给 AI 下需求的结构化表达

同样是“写一个待办事项”，下面两种提示词效果完全不同：

• 模糊版：帮我做个待办事项
• 清晰版：请用纯 HTML + CSS + JavaScript 实现待办事项页面，支持添加、勾选完成、删除、localStorage 持久化，页面适配手机端，不依赖框架，生成 index.html

清晰版提示词包含了功能范围、技术栈、存储要求、界面要求、输出形式五个要素。写作顺序上，先写“要什么”，再写“不要什么”，最后写“输出成什么”。以后给任何 AI 编程工具下需求，都可以套这个模板。

8.2 让 AI 解释代码，而不是直接跳过

Sublime 效果最好的学习方法，是让 AI “边写边解释”。在 Claude Code 或 Codex 中，你可以追加这样一条指令：

请用通俗的语言解释你生成的 JavaScript 代码：为什么需要 localStorage？为什么用事件监听而不是 onclick 属性？

AI 会像一个耐心的老师一样解释原理。这种方式的效率远高于你对着教程逐行读代码，因为它是针对你当前项目生成的解释，上下文完全匹配。

8.3 小步提交，善用 Git 回滚

AI 修改代码后，如果功能正常，马上提交一个 Git 版本：

git add . git commit -m "完成添加和删除功能"

如果后面改坏了，可以回滚到上一版本：

git log --oneline git checkout <commit-id> -- .

对于零基础用户，Git 只需要先掌握这四个组合：git init、git add .、git commit -m "描述"、git checkout。这四步能让你在 AI 编程的“野蛮生长”中始终有一条退路。

8.4 安全边界与账号保护

在练习阶段，建议只给 AI 授权当前项目目录。不要让 AI 在没有确认的情况下删除文件、覆盖配置文件、读取系统级密钥。对于生产环境或公司项目，更要在最小权限原则下运行，涉及数据库、临时文件、外部服务时，必须先在测试环境验证。

另外，API Key、登录令牌属于敏感信息，不要直接写进提示词让 AI 帮你处理，也绝不应该提交到 Git 仓库。AI 编程工具虽然是辅助，但账号安全和数据安全仍是你自己的责任。

8.5 成本控制

Claude Code 和 Codex 这类工具通常按 token 计费。对于零基础用户，建议在练习阶段保持“小需求 + 短对话”的习惯，不要在一个对话里让 AI 同时完成“生成一万行项目代码 + 写测试 + 写文档 + 部署”这种巨型任务。每完成一个可运行的功能点，就新建一个对话。这会显著降低费用，也能让 AI 的上下文更干净、回答更精准。

8.6 什么时候应该回到基础学习

AI 编程不会完全取代学习。当你连续遇到以下情况时，说明该补基础知识了：

• AI 生成了代码，但你完全看不懂，无法判断是否危险；
• 同一个问题反复让 AI 修，但每次只是换个说法，没有真正解决；
• 想做一个 AI 见过的方案之外的东西，但不知道如何描述；
• 需要排查一个涉及数据结构或算法的问题，但完全无从下手。

这时候回到 HTML 语义、JavaScript 基础、数据库原理等传统课程，效率会比一开始死啃高很多。因为你已经见过真实问题，知道每个知识点用在哪里。

9. 总结与下一步建议

这篇文章从零基础视角出发，把 AI 编程的完整链路梳理了一遍。你需要记住的核心内容有三块：

• Vibe Coding 是一套工作方式，核心是“自然语言描述 → AI 生成 → 人工验证 → 迭代反馈”，它降低了入门门槛，但没有消灭学习需求；
• Claude Code、Codex 是两类常见的 AI 编程工具，安装配置、登录验证、模型识别、权限控制都需要逐步掌握；
• Superpowers 这类 Skill 机制，是把个人经验固化成 AI 可复用流程的方法，适合从“写 Prompt”升级到“构建自己的工作流”。

读到这里，建议你立刻动手做三件事：第一，在本地目录安装好 Node.js、Claude Code、Codex；第二，创建一个练习目录，用结构化提示词让 AI 生成一个待办事项页面；第三，跑通后把练习过程中遇到的所有报错记录下来，对照本文第 7 章的排查表逐项确认。

AI 编程工具迭代很快，几乎每个月都有新功能、新报错、新工作流出现。纠结于“最新版本怎么配置”不如掌握“遇到问题如何拆解”的能力。只要理解了整个反馈循环，未来出现再新的工具，你也能用这套方法快速上手。建议把本文收藏备用，下次安装或报错时可以随时翻出来对照。