如果你已经在用 ChatGPT 写代码，但大多停留在「帮我写个函数」「这段报错什么意思」，那这门课要解决的问题很具体：把 AI 从聊天窗口里的问答工具，变成嵌进日常开发流程里的生产力。它不教你怎么训练模型，也不讲 Transformer 原理，讲的是前端项目里怎么让 ChatGPT 和 Copilot 真正接手一部分活儿——从搭页面、抽组件，到状态管理、登录注销这类有上下文关联的完整功能。

先确认自己缺的是哪一块

这门课适合的人，通常有下面几种情况之一：

会用 Vue 或类似框架写业务，但一遇到重复性的组件、样板代码就觉得烦，想知道哪些能交给 AI 生成、哪些必须自己盯。
试过 Copilot，但只在写单行代码时用，没试过让它按注释补出整段逻辑，也没试过用 ChatGPT 先出方案再落地。
听说过「提示词工程」，但不确定写业务代码时该怎么描述需求，才能让模型给出能直接用的结果而不是一堆伪代码。
团队里开始推 AI 辅助开发，自己想先摸清楚边界：哪些环节提效明显，哪些环节 AI 反而添乱。

如果你连前端项目的基本结构都不熟，这门课会有点吃力；它的前提是你已经能独立写一个中等规模的页面，只是想把效率再往上抬一档。

课程围绕一个真实项目推进

内容不是按「ChatGPT 功能介绍 → Copilot 功能介绍 → 综合练习」这种工具说明书的路子走，而是拿一个前端项目当主线。你会看到 AI 参与的具体环节：生成页面结构、抽离登录和用户信息组件、用 Copilot 快速产出 Pinia 的状态管理代码、在导航栏接入用户信息并实现注销。这些不是孤立的小 demo，而是有前后依赖的功能链——上一个环节的产出会变成下一个环节的输入，这恰恰是检验 AI 辅助是否靠谱的地方。

换句话说，它想让你体验的是：当你把需求拆解清楚、把上下文喂给模型之后，一次能推进多少工作量。标题里「一人顶三人」说的不是让你同时干三个人的活，而是把那些机械、重复、查文档就能解决的编码时间压缩掉，腾出来做更需要判断的部分。

配套练习该怎么用

看这类课最容易犯的毛病是「看的时候都懂，关掉视频就忘」。建议按这个顺序用资料：

先自己按项目需求写一遍，卡住了再去看对应章节，对比 AI 给出的方案和你原本思路的差异。
同一个功能，分别用 ChatGPT 和 Copilot 试一次，记录哪种场景下谁更顺手——比如 Copilot 适合在编辑器里顺着上下文补全，ChatGPT 适合先讨论方案再动手。
把课里用到的提示词改写成你自己项目的版本，重点观察：需求描述精确到什么程度，输出才不用大改。
对 AI 生成的代码做一次人工审查，标出哪些地方你改了、为什么改，这份记录比课程本身更值钱。

看完应该能回答的问题

用这几个问题自测，能答上来说明这门课没白看：

面对一个中等复杂度的前端功能，你会怎么拆分任务，哪些交给 AI、哪些自己写？
让 ChatGPT 生成组件代码时，需要提供哪些上下文，才能避免它凭空造出项目里不存在的依赖？
Copilot 在什么情况下补全质量明显下降，这时候该换成什么做法？
组件抽离、状态管理、登录注销这类有状态流转的功能，AI 生成的代码通常会在哪里出问题？
你怎么判断一段 AI 生成的代码是可以直接合并，还是必须重写？

如果其中有两三个问题你答得含糊，那正好是这门课要补的缺口。带着具体项目问题去看，比从头到尾刷一遍效率高得多。

mksz684-程序员的 AI 启蒙课：ChatGPT 让你 1 人顶 3 人【8章】

ChatGPT与Copilot助力高效编程

编辑点评

课程以实际项目开发为背景，深入浅出地展示了ChatGPT和Copilot在编程中的应用，适合对AI编程助手感兴趣的开发者。

⭐ 编辑推荐

探索AI编程助手ChatGPT和Copilot的强大功能，提升编程效率，一人顶三人。

课程亮点

• ChatGPT与Copilot实战应用

• 项目驱动学习

• 提升编程效率

课程目录

📁 第4章 项目开发 part1（以 ChatGPT 为主）
    [4.6]--4-7-抽离登录和用户信息组件-.mp4  [8.1 MB]
    [4.14]--4-15-在导航栏显示用户信息，并实现注销功能-.mp4  [62.3 MB]
    [4.12]--4-13-使用Copilot快速生成Pinia代码，存储和管理-.mp4  [8.6 MB]
    [4.7]--4-8-使用ChatGPT生成注册表单代码，并调整优化-.mp4  [33.7 MB]
    [4.4]--4-5-使用ChatGPT生成导航菜单，并能根据url参数实时-.mp4  [34.5 MB]
    [4.2]--4-3-使用ChatGPT生成模板主体的代码-.mp4  [32.2 MB]
    [4.5]--4-6-使用ChatGPT生成搜索组件代码，清晰的指令即得准确-.mp4  [24.9 MB]
    [4.13]--4-14-使用Copilot生成代码，获取用户信息-.mp4  [37.4 MB]
    [4.10]--4-11-使用Copilot快速写出登录功能和API接口代码-.mp4  [54.0 MB]
    [4.3]--4-4-使用ChatGPT生成usePageTitle函数，修-.mp4  [27.0 MB]
    [4.9]--4-10-使用ChatGPT生成登录页的代码，并调整优化-.mp4  [40.6 MB]
    [4.1]--4-2-使用ChatGPT尝试生成导航栏代码-效果非常好-.mp4  [24.2 MB]
    [4.11]--4-12-介绍Vue3状态管理，Pinia代码演示-.mp4  [41.2 MB]
    [4.8]--4-9-使用Copilot快速写出注册逻辑和API接口代码-.mp4  [38.4 MB]
📁 第5章 项目开发 part2（以 Copilot 为主）
    [5.9]--5-9-使用Copilot展示博客内容，并转换markdown.mp4  [31.2 MB]
    [5.8]--5-8-使用Copilot获取博客内容，并修改网页标题-.mp4  [42.3 MB]
    [5.12]--5-12-使用Copilot自动生成评论列表的代码，包括模板和-.mp4  [61.0 MB]
    [5.7]--5-7-使用Copilot快速生成博客API接口代码-【不易整理‖请关注：CunWorkNoteS】.mp4  [42.0 MB]
    [5.16]--5-16-使用Copilot快速生成博客表格，以及其他附加功能-.mp4  [89.6 MB]
    [5.13]--5-13-使用Copilot快速开发删除评论的功能，自动执行A-.mp4  [49.3 MB]
    [5.11]--5-11-使用ChatGPT快速生成评论数据，并写出API接口-.mp4  [21.8 MB]
    [5.18]--5-18-创建和编辑博客，通过判断id来修改标题-.mp4  [16.0 MB]
    [5.18]--5-18-创建和编辑博客，通过判断id来修改标题.mp4  [39.6 MB]
    [5.4]--5-4-使用ChatGPT继续提问，优化博客卡片组件的样式-.mp4  [30.5 MB]
    [5.1]--5-1-开发首页-使用ChatGPT快速生成博客列表API数据-.mp4  [31.8 MB]
    [5.5]--5-5-使用Copilot一分钟生成一个formatDate时.mp4  [21.9 MB]
    [5.6]--5-6-使用ChatGPT快速开发博客列表的分页功能-.mp4  [48.1 MB]
    [5.17]--5-17-使用Copilot快速开发删除博客功能，并自动重载数-.mp4  [43.2 MB]
    [5.10]--5-10-使用Copilot快速开发点赞和收藏功能，包括UI和-.mp4  [57.9 MB]
    [5.2]--5-2-使用Copilot快速获取博客数据，并渲染博客列表-.mp4  [33.2 MB]
    [5.5]--5-5-使用Copilot一分钟生成一个formatDate时-.mp4  [20.6 MB]
    [5.14]--5-14-使用Copilot快速开发创建评论功能，CSS样式和-.mp4  [41.3 MB]
    [5.15]--5-15-开发我的博客页面，修改标题和判断登录状态-.mp4  [37.2 MB]
    …（已达 35 条上限，后续省略）
…（已达 35 条上限，后续省略）