零基础AI编程变现课，用Claude Code做6个网页应用，EdgeOne Pages部署和商单实战

这套课面向完全不懂代码的人，主线是用 Claude Code 这类 AI 编程工具做出能上线的网页应用，并走一遍接单变现的流程。从装环境开始，中间做几个网页小工具练手，再学 EdgeOne Pages 免费部署，最后拿一个学生期末作业的真实商单拆需求、做交付

适合什么人

• 完全不懂代码，想入局 AI 编程的纯小白
• 想用 AI 工具接单变现的副业人群
• 需要快速做网页工具的学生、职场人
• 想用 AI 降低开发成本的创业者、自媒体人

学完能做什么

• 掌握 Claude Code 等 AI 工具的核心用法，10 分钟生成完整网页应用
• 学会 EdgeOne Pages 免费部署，让作品有全球可访问的域名
• 走通商单接洽流程，能独立完成客户需求

课程目录

一、AI 编程没你想的那么神秘

先给小白的定心丸，讲清学习核心原则：首问 AI！首问 AI！首问 AI！

二、最适合小白的路线图

环境工具安装 → 随便做个垃圾 → 不停地做出更多垃圾 → 熟能生巧

三、前置准备工作（1 天）

• 科普：命令提示符（Windows）与终端（Mac）的概念
• 视频教程：1_Windows环境安装.mp4
• 安装 Node.js，含下载链接和验证命令
• 安装 VSCode，含下载链接和注意事项
• 安装 Git，含下载和图文安装步骤
• 安装 Claude Code，含 Windows/Mac 命令和验证
• 配置模型：安装 cc-switch，含下载链接和配置教程
• 购买模型：注册智谱账号、获取 API Key、订阅套餐
• 接入模型：用 cc-switch 配置智谱模型并验证是否成功
• 第一次作业：提交 Node.js 安装与验证截图、VSCode 安装截图
• 第二次作业：提交 Claude Code 安装截图、cc-switch 配置截图、与 Claude 对话截图

四、Claude Code 怎么用（1 天）

• VSCode 插件模式：安装官方 Claude Code 插件并配置开关
• 文字交互模式：Plan mode、Bypass permissions、Ask before edits、Edit automatically 分别怎么用
• 图片交互模式：直接复制粘贴图片

五、案例实战

1. 个人简历网站，视频 2_个人简历网站2x.mp4，第三次作业提交作品截图
2. 中英文单词消消乐网页版，视频 3_中英文单词消消乐网页版_2x.mp4，第四次作业提交作品截图
3. 多国货币转换器小工具网页版，视频 4_货币转换工具.mp4，第五次作业提交作品截图
4. 番茄计时器工具网页版，视频 5_番茄钟.mp4，第六次作业提交作品截图
5. 工具集合站，把前面四个网站合并成一个导航站，视频 6_工具集合站.mp4，第七次作业提交作品截图

六、发布网站（1 天）

• 视频教程：7_部署.mp4
• EdgeOne Pages 介绍：国内站与国际站，以及主要优势
• 准备工作：项目文件结构要求
• 注册账号：微信扫码注册
• 发布步骤：登录 → 直接上传 → 创建项目 → 部署 → 预览
• 项目设置：修改名称、自定义域名
• 更新网站：新建部署、重新上传
• 第八次作业：发布任意作品上线，提交域名和网站截图

七、商单实战案例

真实案例是一个学生的期末作业，先把需求拆开，再一步步做出来

• 完整需求文档：HTML5 语义化标签、CSS 外部样式表、500 行代码、响应式布局等要求
• 实操步骤：

1. 新建项目文件夹

2. VSCode 打开文件夹

3. 把需求复制给 Claude Code

4. AI 自动生成完整网站

5. 成品展示：首页、详情页、导航、图文混排

• 商单案例成品展示

八、结语：干就完了

讲持续学习的重要性、AI 时代的机遇，还有那句鼓励：动起来就超过大部分人

课程视频和用到的素材都放在本页的付费资源区