AI 编程入门

给第一次接触 AI 编程的人

送给王圣，我们一起和AI做朋友

把 AI 当作会阅读项目、写代码和检查结果的搭档。先从一个小网站开始，逐步学会提需求、验证结果和发布作品。

从这里开始 查看发布步骤

先建立正确习惯

AI Agent 不是一键完成器

聊天 AI 主要回答问题；AI Agent 可以围绕目标阅读文件、提出方案、修改代码和运行检查。它很能干，但最终决定仍在你手里。

01

说清目标

描述要做什么、现有材料和完成标准。任务越小，越容易验证。

02

先读再改

先让 Agent 说明项目结构和计划，确认方向后再允许它改文件。

03

自己验证

打开页面、点击按钮、检查文字和手机显示。不要只看 AI 的总结。

04

再发布

确认没有密钥和隐私内容后，把可用版本上传到 Cloudflare Pages。

一个实用提示词

让 Agent 按步骤工作

复制后替换方括号中的内容。先要求它解释，再要求它实施，能显著减少意外改动。

请先阅读当前项目，不要修改文件。
说明：1. 项目结构；2. 如何运行；3. 完成[目标]的最小方案。
等我确认方案后，再实施修改。
完成后告诉我改了哪些文件，以及我该如何验证。

准备工具

先装三个工具

先完成下面三项即可开始。暂时不需要复杂的命令行配置或一堆编辑器插件。

1

VS Code

从 官网 安装。打开项目时选择“打开文件夹”，不要只打开单个文件。

编辑代码
2

Codex 插件

在 VS Code 扩展市场搜索 Codex，确认发布者是 OpenAI 后安装。初期让权限保持“每次询问”。

AI 搭档
3

CC Switch

从 官方站点 或其 GitHub Releases 下载，用来保存和切换 Codex 的服务商配置。

切换配置

额度与配置

喵喵 code 与 CC Switch

喵喵 code 是第三方 API 网关。先用小额额度测试，再决定是否长期使用。

  1. 在 喵喵 code 注册并小额购买或使用试用额度。 使用独立密码；不要提供 OpenAI 登录密码、Cookie 或验证码。
  2. 创建一个用途明确的 API Key。 例如仅用于本机学习。不要把 Key 写进项目名称、备注、聊天消息或截图。
  3. 在 CC Switch 新建 Codex Provider。 只按照服务商文档填写 Base URL、API Key 和模型名，不猜测接口地址。
  4. 点击 Enable，然后重启 Codex 或终端。 用一段没有隐私内容的简单任务测试，并到服务商控制台核对用量。

重点：免费发布网站

Cloudflare Pages 直接上传

这是最适合第一个静态网站的方式：不需要 Git，不需要服务器，也不需要安装部署工具。完成后会获得一个免费的 pages.dev 网址。

打开 Cloudflare 控制台
  1. 1
    准备网站文件夹

    最外层必须直接包含 index.html、CSS、JavaScript 和图片文件。

  2. 2
    进入 Workers & Pages

    点击 Create application，再选择 Get started 与 Drag and drop your files。

  3. 3
    填写项目名并拖入文件夹

    项目名会成为网址的一部分。上传后点击 Deploy site。

  4. 4
    打开 pages.dev 地址检查

    确认首页、图片、手机显示和所有链接都正常后，再分享网址。

已经上线的例子

看看一个 Pages 网站

下面这个页面是一个已经可以访问的 Cloudflare Pages 示例。观察它的地址结构和加载效果即可。

chip-learning.pages.dev 在新标签页打开

发布前最后检查

密钥永远不上传

  • 不要把 API Key、密码、订单、邮箱或真实姓名写入网页。
  • 不要上传 .env 文件，也不要把 Key 放在 JavaScript 中。
  • 截图前遮住余额、完整网址参数、头像和密钥。
  • 一旦泄露，立刻在服务商控制台撤销旧 Key 并重新创建。