← 返回文档
项目文档 ·

第五章：AI Coding

用 AI 辅助编程，让零基础学习者也能完成并发布可运行的作品。

5.1 为什么非程序员也要学 AI Coding

一句话解释

AI Coding 不是让你成为程序员，而是让你能"指挥" AI 帮你写代码——就像你不需要会开车也能打网约车一样。

三个理由

  1. 效率倍增：很多重复性工作，写个小程序就能自动化

  2. 创意落地：你的想法不再受限于"会不会写代码"

  3. 未来竞争力：能用 AI 写代码的人，就像会用 Office 的人一样，是基本素养

5.2 认识代码环境

你需要知道的工具

工具作用类比
编辑器（VS Code）写代码的地方Word 之于文章
终端（Terminal）运行命令的地方命令行版的"开始菜单"
浏览器查看网页效果你的"预览窗口"
Git管理代码版本代码版的云文档更改记录
WorkBuddy通过 Agent 编写代码能直接操作你电脑文件的AI助手

环境准备

  1. 安装 VS Code：VS Code 官网

  2. 安装浏览器：Chrome（推荐、同样的还有Edge）

  3. 安装 Git：Git 安装指南

  4. 准备 AI 助手：DeepSeek

5.3 第一个 AI 辅助的网页

用 AI 帮你写出一个个人介绍网页，包含：

  • 标题

  • 自我介绍

  • 兴趣爱好

  • 联系方式

  • 一些简单的样式（颜色、字体、布局）

步骤

  • 第 1 步：向 AI 描述你的需求

    请帮我写一个个人介绍网页，要求：
1. 使用 HTML 和 CSS
2. 包含标题"你好，我是[你的名字]"
3. 包含自我介绍段落、兴趣爱好列表、联系方式
4. 设计风格：苹果产品主页风格，拒绝蓝紫色渐变
5. 适配手机和电脑

  • 第 2 步：获取代码

    AI 会给你一段 HTML 代码，类似这样：

    <!DOCTYPE html>
<html>
<head>
    <title>个人介绍</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        /* 更多样式... */
    </style>
</head>
<body>
    <h1>你好，我是小明</h1>
    <p>我是一名大一新生...</p>
    <!-- 更多内容... -->
</body>
</html>

  • 第 3 步：创建文件并预览

    在桌面创建一个文件夹，命名为 my-website

    在文件夹里创建一个文件，命名为 index.html

    把 AI 生成的代码复制进去

    双击 index.html，用浏览器打开

  • 第 4 步：迭代优化

    告诉 AI 哪里需要改进：

    很好！请帮我做以下修改：
1. 标题再大一点，用渐变色
2. 加一个头像占位符
3. 兴趣爱好用图标列表的形式
4. 底部加一个"欢迎联系我"的按钮

AI Coding 中的常见问题

问题表现解决方法
代码不完整AI 输出被截断说"请继续"或"请补全"
功能不符合预期做出来的不是你想要的详细描述你想要的效果、给出示例
报错浏览器显示错误把错误信息发给 AI
样式错乱布局乱了描述问题或截图给 AI（AI得有多模态能力）

2025年 AI 编程提示词（Prompt）Top 20

阅读原文：2025 年 AI 编程提示词 Top 20

5.4 迭代：逐步优化功能

迭代的思维

不要试图一次性做出完美作品。AI Coding 的最佳实践是：

  1. 先做出最小可用版本（MVP）

  2. 逐步添加功能

  3. 每次只改一个地方

  4. 测试通过再继续

迭代示例

第 1 轮：基本的个人介绍页面
第 2 轮：添加响应式设计（适配手机）
第 3 轮：添加暗色模式切换
第 4 轮：添加动画效果
第 5 轮：添加更多页面（如作品集）

少年，AI Coding已经落伍了，现在是 Vibe Coding 的时代！！！

5.5 了解 WorkBuddy 与项目实战

本次课程使用 WorkBuddy 进行演示（没给我钱，大家想用啥用啥，功能都大差不差）

从哪开始？

WorkBuddy当中包含不少内置的专家和技能在这里我们先不去使用，你可以自行探索。

首先第一步就是在你电脑上你能找到的地方新建一个项目文件夹，推荐使用英文（为啥可以自己问问 AI）。 在新建任务时打开这个项目文件夹，这样 Agent 就会默认将文件生成在该文件夹中，你也可以很方便的找到。 另外你也可以使用vscode等编辑器打开这个文件夹，这样你就可以方便的查看内容的改动情况、git状态等（对于 vibe coder 来说看代码好像没那么重要，但还是建议大家了解一下 AI 给你写了哪些东西）。

使用 Git 管理代码版本

添加项目文件夹使用git管理代码

我们之前提到过要使用 git 来管理代码项目，在 AI 的协助下你几乎不需要任何相关知识，有不会的就直接问 AI。 新建一个代码项目的第一步就是初始化 git 方便后续跟踪相关代码修改。这边 Agent 还提出帮我配置用户信息和新建分支，如果你不知道这分别代表什么，那你就问吧！ 在这里我让它帮我新建了develop分支一般来说我们的开发会在develop分支上进行，开发过程当中遇到了 bug 不会影响到提供服务的 main 分支。当一个修改或新特性完成测试没问题以后才会通过合并的方式并入 main 分支

大胆提出你的需求（但不是许愿

在正式进行开发前，需要明确 PRD（项目需求文档），你可以提出你的要求让 AI 根据需求生成一版需求文档，在该基础上进行修改，防止 AI 跑偏或做无用功。

随着项目的不断完善，项目的需求文档也需要不断修改，这个PRD.md的文件一般都放在docs文件夹下，你可以不断的修改，随着项目的提交而被 git 跟踪。

5.6 别把 localhost 发出来“样银笑幻”

当你使用 AI Coding 工具完成一个网页或应用后，AI 往往会告诉你：

项目已启动，请访问：http://localhost:3000

很多初学者看到页面成功打开后，会非常兴奋地把这个地址发给朋友：

快来看我做的网站：http://localhost:3000

然后朋友点开链接，却什么也看不到。因为 localhost 只指向访问者自己的电脑。

什么是 Localhost？

localhost 的中文意思是“本地主机”，通常指当前正在使用的这台设备。

例如：http://localhost:3000

可以拆成三个部分：

http://       localhost         :3000
协议           主机地址           端口号

其中：

  • http:// 表示通过 HTTP 协议访问；

  • localhost 表示当前这台电脑；

  • 3000 表示应用监听的端口。

当你在自己的浏览器中打开 localhost:3000 时，浏览器会去访问你自己电脑上的 3000 端口。

但当朋友打开同一个地址时，他的浏览器访问的是他自己的电脑，而不是你的电脑。

因此，Localhost 不是一个可以发送给别人的网站地址。

为什么 AI 总是给出 Localhost？

AI Coding 工具通常是在你的本地开发环境中运行项目。

例如，当 AI 执行：npm run dev

开发服务器只是在你的电脑上启动，并没有自动把项目上传到互联网。

此时，AI 能完成的只是：

  1. 编写代码；

  2. 安装依赖；

  3. 启动本地开发服务器；

  4. 告诉你本地访问地址。

“项目成功运行”和“项目已经发布到互联网”是两件完全不同的事情。

怎么把写的网页发给别人看呢？

  • 将整个项目发给别人

    我们说过 localhost 是 本地主机,那么将整个项目发给朋友，让他在自己的电脑上npm run dev(启动开发服务)，并访问 localhost 就好了。

    但是这会遇到“环境”的问题，你在开发之前提前安装了如 python，nodejs 等开发环境，别人的电脑上没有，也没法启动你写好的项目，那怎么办呢？一个最简单的方法：

    给他也安装一个Agent ：打开项目目录以后跟 AI 说帮我打开这个项目的预览

    这看起来好像不太体面，但却是是最简单的办法（之一？）

  • 将网页部署到公网上

  1. 服务器

    因为 localhost 是本机，那么你将你写的网站放在一个有公网ip的电脑当中，大家访问这个公网ip：端口就能看到你写的网页，我们管专门干这件事的电脑叫做——服务器

  2. 域名

    为了不让大家记长长的一串ip地址，一般我们会买一个域名，比如baidu[.]com方便别人记。

    虽然在 AI 的帮助下，部署一个网页远比“前大语言模型时代”简单，但确实不适合在第0节AI课中讲这些比较复杂的内容。如果你感兴趣的话可以和 AI 聊聊，或者等等大学生的第n节AI课/AI加餐课。

5.7 除了网页还能做啥？

大部分情况下，做一个 html 小网页就能满足对“可视化/可操作”的要求，但万一你想要写一个安卓软件、微信小程序，这些程序就不再能够通过浏览器打开了。

这里我演示一下如何使用Agent开发微信小程序（如果遇到问题，为什么不问问神奇的 AI 呢）

  • 下载独属于微信小程序的“浏览器”

前往微信开发者工具下载页下载微信开发者工具。

  • 新建你的第一个微信小程序项目
微信开发者工具项目列表微信小程序项目初始化设置

进行简单的配置以后点击创建，就可以在编辑器页面当中看到编辑器给你创建的模版文件（资源管理器中能够看到）和模拟器（如果没有现实的话可以在右上角找到页面布局，然后打开它），下面你就可以打开 WorkBuddy 等 Agent 当中，将工作目录改为小程序目录。

微信开发者工具编辑器与模拟器在 WorkBuddy 中选择工作区

你或许不用完全从头开始

在 WorkBuddy 的 专家·技能·连接器 界面，你可以搜索并下载一些和“微信小程序开发”、“前端设计”相关的skill和skill包。

WorkBuddy 专家WorkBuddy Skills

测试与迭代

调用微信小程序 Skill在手机上预览

在微信开发者工具中，你可以在模拟器里查看效果，也可以点击预览在自己手机上查看相应效果，现在你可以在手机上“限时预览”和模拟器中查看，那么怎么分享给你的好朋友使用呢？

在创建小程序界面，我们跳过了注册 AppID，在了解如何借助 AI 制作一个微信小程序以后，你可以去尝试一下注册 AppID。在微信公众平台中可以添加项目成员和体验成员（该页面往下滑）；测试完成后点击上传，体验成员就可以体验你开发的小程序。

成员管理测试号不支持和他人分享