AI Coding

AI编程学院

从 Hello World 开始，一步一步教你用 AI 编程。零基础也能跟着做。

开始之前

你不需要任何编程基础。只需要：

  • 一台电脑（Windows / Mac / Linux 都行）
  • 能上网
  • 愿意动手试

AI 编程的核心流程：你描述需求 → AI 写代码 → 你运行 → 不满意就让 AI 改。

💬你描述需求
🤖AI写代码
▶️你运行代码
🔄有问题？告诉AI
🎉完成！

你需要什么工具？

💬
ChatGPT
最简单。打开网页就能用。适合零基础。
🤖
Codex
OpenAI的云端编程Agent。自动写代码+运行。
⚡
Cursor
最强AI编程IDE。专业开发者首选。
🆓
Trae
字节出品，免费AI IDE。国内开发者推荐。

零基础推荐：先用 ChatGPT 入门 → 再用 Codex 进阶 → 最后用 Cursor 专业开发。

Hello World：用 ChatGPT 写第一个程序

最简单的方式——打开浏览器就能写代码。

第1步：打开 ChatGPT

打开 chat.openai.com，注册/登录。

第2步：输入你的第一个 Prompt

请用 Python 写一个 Hello World 程序，并解释每一行代码。

第3步：ChatGPT 会返回

# 这是你的第一个 Python 程序
print("Hello, World!")

# 解释：
# print() 是一个函数，用来在屏幕上显示文字
# "Hello, World!" 是一个字符串（文字）
# 运行后会在屏幕上显示：Hello, World!

第4步：运行这段代码

你有两种方式运行：

方式A：在线运行（最简单）

  1. 打开 replit.com（免费在线编程环境）
  2. 点击 "Create Repl" → 选 "Python"
  3. 把代码粘贴进去
  4. 点绿色 "Run" 按钮
  5. 屏幕显示：Hello, World! 🎉

方式B：在自己电脑上运行

  1. 安装 Python：python.org 下载安装
  2. 打开终端（Windows: PowerShell，Mac: Terminal）
  3. 输入 python --version，看到版本号说明安装成功
  4. 创建文件 hello.py，把代码粘贴进去
  5. 终端输入 python hello.py
  6. 屏幕显示：Hello, World! 🎉

第5步：继续让 AI 帮你写

现在请修改程序：
1. 让它先显示 "Hello, World!"
2. 然后显示 "我正在学Python！"
3. 最后显示当前日期
💡 核心技巧

跟 ChatGPT 对话就像跟一个程序员朋友聊天。说清楚你想要什么，不满意就说"再改改"。

Hello World：用 Codex 写程序

Codex 是 OpenAI 的云端编程 Agent。你给它任务，它自动写代码、运行、调试。

第1步：打开 Codex

  1. 打开 chat.openai.com
  2. 左侧菜单找到 "Codex"（需要 ChatGPT Plus/Pro）
  3. 点击进入 Codex 界面

第2步：给 Codex 第一个任务

创建一个 Python 程序：
1. 显示 "Hello, World!"
2. 然后问用户叫什么名字
3. 显示 "你好，[名字]！欢迎学编程！"

第3步：Codex 会自动

🧠分析任务
✍️写代码
▶️运行代码
📋显示结果

第4步：查看结果

Codex 会在右侧显示运行结果。你还可以：

  • 点击 "Code" 标签看生成的代码
  • 点击 "Logs" 标签看运行日志
  • 继续对话让它修改

第5步：进阶任务

现在帮我做一个简单的计算器：
1. 用户输入两个数字
2. 用户选择运算（加/减/乘/除）
3. 显示结果
4. 问用户是否继续计算
🎯 Codex vs ChatGPT

ChatGPT：只给你代码，你自己运行。
Codex：自动写代码+运行+调试，你只看结果。更适合完全零基础。

Hello World：用 Cursor 写程序

Cursor 是最强的 AI 编程工具。它是一个代码编辑器，内置了 AI 助手。

第1步：安装 Cursor

  1. 打开 cursor.sh
  2. 下载对应你系统的版本（Windows/Mac/Linux）
  3. 安装并打开
  4. 注册账号（有免费额度）

第2步：创建项目

  1. 打开 Cursor
  2. 按 Cmd+Shift+P（Mac）或 Ctrl+Shift+P（Windows）
  3. 输入 "New File"，回车
  4. 保存为 hello.py

第3步：用 AI 写代码

在文件里按 Cmd+K（Mac）或 Ctrl+K（Windows），输入：

写一个Python程序，显示Hello World，然后问用户名字，打招呼

Cursor 会自动生成代码。按 Tab 接受。

第4步：运行代码

  1. 打开终端：按 Ctrl+`（反引号键）
  2. 输入 python hello.py
  3. 看到输出 🎉

第5步：用 AI 对话修改

按 Cmd+L（Mac）或 Ctrl+L（Windows）打开 AI 对话，输入：

请给这个程序加上颜色输出：
- "Hello, World!" 显示为绿色
- 用户名显示为蓝色
- 提示文字显示为黄色

Cursor 会修改代码。点击 "Apply" 应用修改。

Hello World：做一个网页

用 AI 做你的第一个网页，只需要几分钟。

第1步：让 AI 生成代码

在 ChatGPT / Cursor / Codex 中输入：

请帮我创建一个简单的个人网页，要求：
1. 显示我的名字 "张三"
2. 显示一段自我介绍
3. 有一个"联系我"按钮
4. 使用现代简洁的设计风格
5. 支持手机端自适应

请生成完整的 HTML 文件，包含 CSS 样式。

第2步：AI 会返回一个完整的 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>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: system-ui, sans-serif; background: #f5f5f7; }
        .container { max-width: 600px; margin: 0 auto; padding: 40px 20px; }
        h1 { font-size: 36px; margin-bottom: 10px; }
        p { color: #666; line-height: 1.6; margin-bottom: 20px; }
        .btn { background: #0071e3; color: white; padding: 12px 24px;
               border: none; border-radius: 8px; font-size: 16px;
               cursor: pointer; }
        .btn:hover { background: #0077ed; }
    </style>
</head>
<body>
    <div class="container">
        <h1>你好，我是张三 👋</h1>
        <p>我是一名前端开发者，热爱编程和设计。</p>
        <button class="btn" onclick="alert('感谢联系！')">联系我</button>
    </div>
</body>
</html>

第3步：在浏览器中查看

  1. 创建一个文件 index.html
  2. 把代码粘贴进去
  3. 双击这个文件，浏览器会自动打开
  4. 你看到了你的第一个网页！🎉

第4步：继续改进

请给这个网页添加：
1. 一个渐变色的背景
2. 头像占位圆形
3. 社交媒体链接（GitHub、Twitter）
4. 页面加载时的淡入动画

Hello World：调用 AI API

让 AI 写一个调用 OpenAI API 的程序。

第1步：获取 API Key

  1. 打开 platform.openai.com
  2. 注册/登录
  3. 点击左侧 "API Keys"
  4. 点击 "Create new secret key"
  5. 复制保存（只显示一次！）

第2步：安装 Python 库

打开终端，输入：

pip install openai

第3步：让 AI 写调用代码

在 ChatGPT 中输入：

请用 Python 写一个调用 OpenAI API 的程序：
1. 使用 gpt-4o-mini 模型
2. 问用户想问什么
3. 把问题发给 API
4. 显示 AI 的回答
5. 循环，直到用户输入 "quit"

API Key 请用变量保存，不要硬编码。

第4步：AI 返回的代码

from openai import OpenAI

# 初始化客户端（把你的API Key替换进去）
client = OpenAI(api_key="sk-你的key")

print("=== AI 聊天助手 ===")
print("输入 quit 退出\n")

while True:
    # 获取用户输入
    user_input = input("你：")

    # 检查是否退出
    if user_input.lower() == "quit":
        print("再见！")
        break

    # 调用 API
    response = client.chat.completions.create(
        model="gpt-4o-mini",
        messages=[
            {"role": "system", "content": "你是一个有帮助的助手"},
            {"role": "user", "content": user_input}
        ]
    )

    # 显示回答
    answer = response.choices[0].message.content
    print(f"AI：{answer}\n")

第5步：运行

  1. 把代码保存为 chat.py
  2. 把 sk-你的key 替换成你的真实 API Key
  3. 终端运行 python chat.py
  4. 开始和 AI 对话！
=== AI 聊天助手 ===
输入 quit 退出

你：什么是Python？
AI：Python 是一种简单易学的编程语言...

你：quit
再见！
⚠️ 安全提醒

API Key 千万不要泄露！不要提交到 GitHub。建议用环境变量保存：
export OPENAI_API_KEY="sk-你的key"
然后代码里用 os.getenv("OPENAI_API_KEY") 读取。

Hello World：把网页部署上线

让你的网页被全世界访问。

最简单方案：Vercel（免费）

📝注册 Vercel
🔗连接 GitHub
📤上传代码
🚀一键部署
🌐拿到域名！

详细步骤

  1. 注册 vercel.com（可用 GitHub 登录）
  2. 安装 Vercel CLI：npm i -g vercel
  3. 在项目目录运行 vercel
  4. 按提示操作（一路回车）
  5. 完成！你会得到一个域名如 你的项目.vercel.app

或者用 GitHub Pages（也免费）

  1. 创建 GitHub 账号
  2. 创建一个新仓库，命名为 你的用户名.github.io
  3. 把 index.html 上传到仓库
  4. Settings → Pages → Source 选 "main"
  5. 访问 https://你的用户名.github.io

实战：做一个 TODO 应用

从零做一个完整的 TODO（待办事项）应用。

第1步：让 AI 生成完整代码

请帮我创建一个 TODO 待办事项网页应用，要求：

功能：
1. 添加待办事项
2. 标记完成（划线效果）
3. 删除待办
4. 显示完成/未完成数量
5. 数据保存在 localStorage（刷新不丢失）

技术：
- 纯 HTML + CSS + JavaScript（单文件）
- 现代简洁设计（苹果风格）
- 支持手机端

请生成完整的 index.html 文件。

第2步：运行查看

  1. 保存为 index.html
  2. 双击打开浏览器
  3. 试试添加、完成、删除待办

第3步：继续改进

请给这个 TODO 应用添加：
1. 分类功能（工作/学习/生活）
2. 截止日期
3. 优先级标记（高/中/低，用颜色区分）
4. 搜索功能
5. 暗黑模式切换

实战：做一个 AI 聊天应用

做一个带界面的 AI 聊天应用。

第1步：让 AI 生成代码

请帮我创建一个 AI 聊天网页应用，要求：

功能：
1. 聊天界面（类似 ChatGPT）
2. 用户输入消息，发送给 OpenAI API
3. 流式显示 AI 回复（一个字一个字蹦出来）
4. 保存聊天历史
5. 支持新建对话

技术：
- 前端：HTML + CSS + JavaScript
- 后端：Node.js + Express
- API：OpenAI gpt-4o-mini

请生成完整代码，包含前后端。

第2步：按 AI 的指导操作

AI 会给你完整的项目结构和代码。按照它的说明一步步操作即可。

学习路线

零基础路线（纯用AI）

💬
第1周：用 ChatGPT 写代码
熟悉AI对话，了解基本概念
🤖
第2周：用 Codex 做项目
让AI自动完成完整项目
📄
第3周：学 HTML/CSS 基础
能看懂AI写的网页代码
⚡
第4周：学 JavaScript 基础
能理解基本逻辑
🚀
第2月：用 Cursor 做真实项目
边做边学，效率最高

有基础路线（用AI加速）

⚡
第1天：安装 Cursor
配置环境，熟悉快捷键
💻
第1周：用 Cursor 做项目
AI写代码，你审查和修改
⚛️
第2周：学 Next.js + Tailwind
现代前端技术栈
🔌
第3周：学 API 调用
集成 OpenAI / Claude API
🚀
第4周：部署上线
Vercel + 域名

常见问题

Q: 完全不会编程，能用 AI 写代码吗？

能！用 ChatGPT 或 Codex，用中文描述你想要什么，AI 就能生成代码。你需要做的只是运行它。先从最简单的开始，慢慢就懂了。

Q: AI 写的代码有问题怎么办？

把错误信息发给 AI，说"这段代码报错了，请修复"。AI 会帮你改。这是最正常的过程——编程就是不断出错、不断修。

Q: 学 Python 还是 JavaScript？

🐍Python
  • ●语法简单，像说英语
  • ●AI/数据首选
  • ●后端开发
  • ●适合：AI应用、数据分析、自动化
⚡JavaScript
  • ●网页唯一语言
  • ●前端+后端都能做
  • ●生态最大
  • ●适合：网站、Web应用、全栈

Q: Codex 和 Cursor 有什么区别？

🤖Codex
  • ●OpenAI 出品
  • ●云端运行，不需要装软件
  • ●自动运行代码
  • ●适合：零基础、快速实验
⚡Cursor
  • ●本地IDE，功能最强
  • ●需要安装软件
  • ●支持多种模型
  • ●适合：专业开发、长期使用

Q: 编程难吗？

以前难。现在有了 AI，编程的门槛降到了历史最低。你不需要记住语法，只需要知道你想要什么。AI 就是你的翻译器——把你的想法翻译成代码。

← 上一节
API学院
下一节 →
建站基础

推荐阅读

🔌API学院🏗️建站基础🛠️编程工具