尧图建网站 尧图建网站 YAOTU WEB BUILD 免费咨询
ARTICLE DETAIL

资讯详情

深耕网站建设与建站编程的一线实战洞察。

零基础AI编程入门:Claude Code与Codex实战指南

零基础AI编程入门:Claude Code与Codex实战指南 如果你最近刷技术社区一定绕不开这几个词AI 编程、Vibe Coding、Claude Code、Codex、Superpowers。很多人一开始是懵的——这些工具到底有什么区别我完全没写过代码能靠 AI 写项目吗所谓 Vibe Coding 是不是就是“偷懒式开发”Superpowers 又是什么新概念这篇文章不聊玄学围绕零基础如何上手 Claude Code 和 Codex 展开先讲清楚概念再给出一套可以直接照着操作的环境搭建步骤接着用一个真实的小项目演示“怎么用 AI 从零写出一个可运行的 Web 应用”最后整理高频报错和工程建议。无论你是学生、前端、后端还是测试运维只要会打开终端就能跟着走一遍。文章中所有命令都是示例性质Claude Code、Codex、Superpowers 这类工具迭代速度非常快具体参数以你的实际版本和官方文档为准。我会在关键位置提醒“为什么这么做”方便你以后自己排错。1. AI 编程与 Vibe Coding先搞清楚在学什么1.1 什么是 AI 编程AI 编程并不是一个新的编程语言也不是某个 IDE 插件而是“借助大语言模型自动生成、补全、解释、重构代码”的整套工作方式。传统开发流程里需求分析、设计、编码、测试都需要人来完成有了 AI 编程工具后你可以用自然语言描述需求让模型直接产出代码、SQL、配置文件、单元测试甚至项目文档。目前主流的 AI 编程工具大致分三类IDE 插件型例如 GitHub Copilot、Cursor、通义灵码、Trae它们嵌入 VS Code、JetBrains 或自带编辑器在你写代码时做补全和对话。终端 Agent 型例如 Claude Code、OpenAI Codex、Gemini CLI它们跑在命令行里能读取你本地文件、执行命令、运行测试像一个“替你操作电脑的编程助手”。平台型例如 Vercel 的 AI 平台、各种云 IDE 的 AI 功能主要解决项目托管和自动部署。本文重点讲终端 Agent 型中的 Claude Code 和 Codex。原因是它们的操作逻辑一致通过对话让 AI 自己读取项目、修改文件、执行命令非常适合从零开始搭建项目、跑通全流程。1.2 什么是 Vibe CodingVibe Coding 是最近两年非常火的概念来自英文社区的一个玩笑式说法你不必逐行写出代码只需要“顺着感觉”描述需求让 AI 把代码写出来你再运行、观察、反馈不断迭代。它背后的核心变化是开发者的角色从“代码书写者”变成“产品负责人 代码审核者”。你关注的是需求是否描述清楚。AI 生成的代码是否符合预期。程序跑起来之后对不对。报错之后如何继续让 AI 修复。Vibe Coding 不代表不用学编程。恰恰相反如果你想让它稳定地产出高质量项目你需要懂一点项目结构、命令行、Git 和调试思路否则连“哪里错了”都描述不清楚。零基础可以起步但目标是“会用 会审”而不是“完全当甩手掌柜”。1.3 Claude Code 与 Codex 的定位区别Claude Code 是 Anthropic 推出的终端 AI 编程工具基础模型是 Claude 系列大模型。它的特点是比较擅长长上下文理解、代码重构和多文件改动能在一个会话里连续完成“分析项目结构 → 写代码 → 执行测试 → 修复问题”的闭环所以很多人在做完整小项目时喜欢用它。Codex 早期叫 OpenAI Codex是一个能理解自然语言并把描述转成代码的模型名后来 OpenAI 把终端编程工具也命名为 Codex。现在我们常说的 “Codex 命令行工具” 指的是codex这个终端应用它能读取本地仓库、执行 shell 命令、处理多步骤开发任务和 Claude Code 是同类产品。选择建议如果你已订阅 Claude 服务或者公司内部提供 Claude 模型网关优先用 Claude Code。如果你买了 OpenAI/ChatGPT 相关服务或者团队统一用 Codex优先用 Codex。两者可以安装在同一台电脑上互不影响。实际项目中也可以“Claude Code 生成主项目Codex 做代码审查或扩展功能”这并不冲突。1.4 Superpowers 是什么Superpowers直译是“超级能力”在 AI 编程语境里指的是一套为 Claude Code、Codex 等终端 Agent 准备的技能Skill集合。普通对话模式下AI 是“你问一句它答一句”但编写一个完整项目时AI 会面临上下文丢失、任务步骤混乱、缺少规范约束等问题。Superpowers 的解决思路是把工程方法论固化成语料包或技能包例如“需求拆分技能”“项目脚手架技能”“测试驱动开发技能”“代码审查技能”。当你在对话中唤起某个技能时AI 会按照预设的步骤行动而不是凭感觉乱写。这个概念之所以和 Claude Code、Codex 经常一起出现是因为终端 Agent 工具支持加载外部技能和自定义指令。你可以在项目目录里创建.claude/skills或.codex/skills之类的目录把下载好的技能放进去也可以配合 OpenSpec 这类“需求规格文档规范”让 AI 先写需求、再写方案、最后写代码。这样生成的项目质量会明显稳定很多。需要提醒的是Superpowers 本身迭代很快仓库结构、安装方式、兼容工具版本经常变化。所以本文只讲它的核心思想和用法不建议你死记某一套命令而是理解“给 AI 定义流程比 AI 自由发挥更可控”这个原则。2. 环境准备零基础也能搭好的基础环境在安装 Claude Code 和 Codex 之前先把电脑基础环境准备好。这一节是零基础读者最需要耐心看的部分。2.1 需要准备什么你需要准备以下三样东西一个终端。Windows 推荐 PowerShell 或 Windows Terminal。macOS 推荐系统自带的 Terminal也可以安装 iTerm2。Linux 自带终端即可。Node.js 运行环境。Claude Code 和 Codex 官方发布的安装方式主要都是通过 npm 全局安装所以 Node.js 是必备依赖。Git 版本管理工具。用于拉取代码仓库、保存项目版本。后面写实际项目时非常有用。如果你的电脑上已经装过 Node.js、npm、Git可以跳过安装步骤直接运行node -v和git --version验证版本。2.2 安装 Node.js 与 npm在 macOS 或 Linux 上我推荐先用 Node 版本管理工具nvm安装 Node.js这样以后切换版本方便而且不需要 sudo 权限。安装 nvm 的官方命令一般长这样curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash安装完成后重新打开终端或执行source ~/.bashrc或source ~/.zshrc然后运行nvm install --lts node -v npm -vWindows 用户可以直接去 Node.js 官网下载 LTS长期支持版本安装包一路下一步即可。安装完打开 PowerShell 运行node -v npm -v如果能看到类似v20.x.x、v22.x.x的版本号说明 Node.js 环境就绪。2.3 准备终端与 GitGit 安装方式如下macOS已经自带或者用brew install git。Windows推荐安装 Git for Windows安装完成后可以在开始菜单找到 “Git Bash”。Linuxsudo apt install gitDebian/Ubuntu或sudo yum install gitCentOS。安装完成后运行git --version能看到版本号说明 Git 正常。到这里你已经具备了运行终端 AI 编程工具的基本条件。接下来安装核心工具Claude Code 和 Codex。3. Claude Code 安装、登录与第一个项目3.1 安装 Claude CodeClaude Code 官方推荐通过 npm 全局安装命令如下npm install -g anthropic-ai/claude-code安装过程可能需要几分钟。装完后运行claude --version如果出现版本号说明安装成功。如果提示command not found通常是 npm 全局安装目录没有加入 PATH可以先执行npm bin -g再把输出路径加到系统环境变量里。不同操作系统配置 PATH 的方式不一样Windows 在“系统属性 → 环境变量”里修改macOS/Linux 则在.bashrc或.zshrc里加一行export PATH路径:$PATH。3.2 登录与授权在终端里直接输入claude第一次运行会引导你完成登录授权。不同版本的流程不同大致是打开一个浏览器页面登录 Anthropic 账号允许 Claude Code 访问服务然后回到终端继续。如果你的公司或团队使用自建模型网关也可以通过环境变量指定 API 地址和令牌常见环境变量类似export ANTHROPIC_BASE_URLhttps://your-gateway.example.com export ANTHROPIC_AUTH_TOKENyour-token export ANTHROPIC_MODELyour-model-name这里要注意ANTHROPIC_MODEL指定的模型名称必须确实是你的网关支持且 Claude Code 当前版本能识别的模型。热词里提到的deepseek-v4-pro is not a model this version of claude code recognizes就是典型的“模型名对不上当前版本支持列表”的问题后面常见问题会单独讲。3.3 第一个 Claude Code 编程会话安装完成之后我们先不急着写大项目先用一个最简单的例子验证能不能干活。创建一个临时目录并进入mkdir claude-demo cd claude-demo然后运行claude 帮我创建一个 hello.py功能是打印 Hello, AI ProgrammingClaude Code 会读取当前目录生成hello.py然后询问你是否运行。你可以回复“运行看看”它会直接执行python3 hello.py看到输出Hello, AI Programming说明 Claude Code 已经能完成“听懂需求 → 生成文件 → 执行命令 → 返回结果”的完整闭环。这就是后面搭建完整项目的核心基础。3.4 Claude Code 常用命令与配置Claude Code 提供一些常用命令和配置方式这里列几个最常见的# 进入交互式对话 claude # 直接让 Claude 执行一个任务执行完退出 claude 说明当前目录结构 # 查看帮助和所有参数 claude --help # 查看当前配置 claude config list常见配置项包括模型选择通过claude config set model 模型名设置。权限控制可以设置哪些命令需要人工确认避免 AI 乱执行危险命令。自定义技能目录可以指定额外的 skill 或 prompt 目录这也是后面接入 Superpowers 的基础。配置命令的具体参数因版本而异稳定起见先以claude --help和claude config list输出为准。4. Codex 安装、登录与命令行使用4.1 安装 CodexCodex 官方同样提供 npm 全局安装方式npm install -g openai/codex安装完成后运行codex --version如果能显示版本号说明安装成功。如果电脑上已经有其他版本的 Codex比如通过 Homebrew 安装的建议先卸载旧版本再统一用 npm 版本避免冲突。4.2 登录 OpenAI 账号安装完成后运行codex login终端会打开浏览器让你登录 OpenAI 账号并授权。登录成功后Codex 会保存本地的认证信息。如果你是团队使用企业版或通过网关访问登录方式和权限会有所不同以官方文档为准。如果网络环境或者服务区域无法直接访问你需要自行确认网络连通性。这里不做绕过限制的任何讨论只提醒一句在合规的前提下使用服务。4.3 Codex 编程会话示例进入一个测试目录mkdir codex-demo cd codex-demo然后运行
返回列表