很多人对 AI 编程的误会在于：以为装个插件、问几个问题，效率就会自动翻倍。实际用起来才发现，同样一个需求，有人让 ChatGPT 一次给出能跑的代码，有人来回追问十轮还在改缩进。差距不在工具，而在你知不知道让 AI 接管哪一段活、自己守住哪一段活。这门课围绕的正是这个缺口——它不是讲 AI 原理，而是把 ChatGPT、Copilot 放进一个真实的前端项目里，从零把功能一块块搭出来，让你看清"一个人干三个人的活"到底发生在哪些环节、怎么发生。
这门课到底补的是哪块能力
日常开发里最耗时的往往不是难算法，而是重复劳动：写一个表单、接一个列表接口、处理分页、拼一个卡片组件、把 markdown 渲染出来、写增删改查的接口。这些活技术含量不高，但一件件堆起来就把一天吃掉了。这门课要解决的就是：把这类"结构清晰、边界明确、能描述清楚"的编码任务交给 AI，自己只做判断、拼接和调试。它不承诺让 AI 替你做架构决策，而是教你把任务拆到 AI 能准确接住的颗粒度。
另一块缺口是"指令能力"。很多人写提示词像在许愿，说"帮我写个登录页"，得到的东西自然不能用。课程里反复出现的是"清晰的指令即得准确代码"，也就是怎么把需求拆成组件职责、数据来源、交互路径、样式约束几个部分讲清楚，让生成的代码基本贴合项目上下文，而不是每次都要大改。这种把模糊需求翻译成结构化描述的能力，才是用 AI 写代码真正的门槛。
适合什么基础的人来看
如果你完全没碰过前端，直接上这门课会比较吃力。它默认你能看懂 JavaScript 的语法、知道组件是什么、理解接口请求的基本流程，也对路由、状态管理有模糊印象。项目用的是 Vue3 技术栈，所以对 Vue 的模板语法、组合式写法有一点接触会顺很多。不要求你熟练，但至少看到 ref、组件注册、路由跳转这些概念时不会完全陌生，否则你分不清是自己写错还是 AI 生成得有问题。
比较适合的是这几类人：写了几年业务代码、想提效但一直用不好 AI 工具的中级开发者；刚转岗到前端、想快速补齐实战经验的人；以及独立做小项目、没人配合、什么都得自己写的开发者。如果你已经在用 ChatGPT 但生成的代码总要用很久才能跑通，这门课会直接指出你卡在哪一步——大概率是任务切分和上下文交代不到位，而不是模型不行。
建议先看哪几块，顺序怎么排
前面认识常用 AI 工具的部分别跳过，尤其是用 ChatGPT 设计 TodoList 组件和生成前端简历那两段。前者让你建立"先让 AI 出结构、再让它填实现"的习惯，后者能看出同一个工具在信息整理类任务上的边界。这两段是后面大项目的地基，很多人急着做项目，结果一上手就发现指令说不清楚，又得回来补。
进入项目部分后，建议按"ChatGPT 一段、Copilot 一段"的节奏跟着走，而不是随机挑功能看。前半段以 ChatGPT 为主，导航栏、搜索组件、注册表单、登录页、分页功能这些，重点看它怎么把指令拆开、怎么在生成结果上做调整优化。后半段以 Copilot 为主，博客列表、点赞收藏、评论增删、markdown 转换，重点看行内补全和批量生成的差别——哪些活适合让它一次补出来，哪些必须你自己先写好骨架。中间穿插的状态管理和 API 接口代码部分也要认真看，因为那是把散落功能串成完整应用的关键。
学完之后能独立做什么
最直接的产出是：你能独立用 AI 辅助搭出一个带用户体系的中小型前端应用。登录注册、用户信息展示与注销、列表与详情、分页、点赞收藏、评论的增删、内容的创建与编辑、markdown 渲染、状态在组件间的同步——这些常见模块你都能在较少的人工干预下跑通，并且知道哪一步该让 AI 生成、哪一步必须自己盯着改。你不再是从空白文件开始一格一格敲，而是先定结构、再用指令把实现填满。
更值钱的是判断力。学完之后，你拿到一个需求能快速评估：这段逻辑适不适合交给 AI，提示词要交代哪些上下文，生成的结果要重点检查哪里。你会形成自己的指令模板和工作流，而不是每次从零组织语言。同事看你交付速度变快，真正的原因不是你打字快了，而是你把一部分认知负担外包出去，自己专注在真正需要人判断的地方。
资料怎么配合练习用
这套资料是按项目推进顺序组织的，最好的用法是"看一段、自己写一段、再对照"。不要一口气把整个项目看完再动手，那样你只是在看别人用 AI，自己上手机仍然卡壳。建议每看完一个功能模块，就在自己的编辑器里复现一遍，用的指令先自己写，再回看课程里是怎么表述的，对比差距在哪里。你会发现大部分时候问题出在你给的信息不够具体，而不是模型理解不了。
练习时给自己加一点难度：把课程里的功能换成你熟悉或需要的小项目场景，比如把博客换成读书笔记、把评论换成打卡记录。换场景的过程会逼你重新组织指令，这才是把方法真正吃进去的方式。遇到 AI 生成的代码跑不通，先别急着换问法，先定位是描述缺了约束，还是自己漏了依赖和上下文。带着这个问题意识去用，这套资料才不只是"看过了"，而是变成你日常开发里能反复调用的能力。
课程目录
📁 第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] [5.9]--5-9-使用Copilot展示博客内容，并转换markdown-.mp4 [44.7 MB] [5.3]--5-3-使用ChatGPT生成博客卡片组件的代码-.mp4 [46.7 MB] 📁 第2章 认识常用 AI 工具，入门到实战 [2.7]--2-8-ChatGPT实战-设计TodoList项目的组件，它-【优质资源‖关注：cunWorkNotes 解锁】.mp4 [39.5 MB] [2.4]--2-5-ChatGPT实战-写一个前端简历，快速且全面-【整理不易‖记得关注：CunWorKNotes】.mp4 [65.8 MB] [2.6]--2-7-ChatGPT实战-写TodoList项目需求，它想的-.mp4 [24.7 MB] [2.14]--2-15-国内AI工具介绍-.mp4 [7.9 MB] [2.13]--2-14-AI和搜索引擎的区别-两者是完全不一样的-.mp4 [10.3 MB] [2.11]--2-12-介绍Cursor-智能代码编辑器，集成了GPT4-.mp4 [35.5 MB] [2.3]--2-4-关于ChatGPTPlus和GPT4.0-我暂不-.mp4 [16.0 MB] [2.12]--2-13-Prompt优化-全面精准的提问，可以让AI更好的理-.mp4 [10.8 MB] [2.2]--2-3-注册ChatGPT，如不成功可使用第三方整合网站-.mp4 [26.8 MB] [2.5]--2-6-ChatGPT实战-润色简历文案，看起来更正式-.mp4 [15.1 MB] [2.9]--2-10-介绍GithubCopilot-最流行的AI编-.mp4 [13.4 MB] [2.1]--2-2-ChatGPT为何能一夜走红？-.mp4 [11.4 MB] [2.8]--2-9-介绍微软NewBing-时效性好，但回答的太简洁-.mp4 [36.4 MB] [2.10]--2-11-GithubCopilot实战-通过注释智能生成代-.mp4 [21.5 MB] 📁 第7章 AIGC 做副业，成本低 效率高 [7.7]--7-8-使用一帧秒创，通过文本生成视频-.mp4 [29.2 MB] [7.2]--7-3-使用ChatGPT，五分钟写出一篇三千字的文章-.mp4 [58.3 MB] [7.1]--7-2-AIGC介绍，它很适合我们做副业-.mp4 [16.1 MB] [7.5]--7-6-使用Midjourney生成图片-.mp4 [17.7 MB] [7.6]--7-7-使用Stable-Diffusion生成图片-.mp4 [25.6 MB] [7.4]--7-5-NotionAI实战，快速写出一篇文章-.mp4 [29.7 MB] [7.3]--7-4-NotionAI介绍，内嵌到富文本编辑器中的AI工具-.mp4 [26.9 MB] [7.8]--7-9-使用腾讯智影，通过文本生成视频-.mp4 [20.0 MB] 📁 第8章 AI 的风险和问题 [8.3]--8-4-AI诈骗问题-.mp4 [6.9 MB] [8.1]--8-2-AI的版权问题-.mp4 [6.9 MB] [8.2]--8-3-AI信息泄漏问题-.mp4 [8.9 MB] 📁 第6章 使用 ChatGPT 做项目优化和测试 [6.3]--6-4-使用ChatGPT优化BlogDetailView代码-.mp4 [97.5 MB] [6.7]--6-8-性能优化-配置路由懒加载，抽离公共代码-.mp4 [59.2 MB] [6.4]--6-5-使用ChatGPT优化MyBlogsView代码，有几-【不易整理‖请关注：CunWorkNoteS】.mp4 [72.4 MB] [6.1]--6-2-使用ChatGPT优化SearchInput组件代码，-.mp4 [32.5 MB] [6.2]--6-3-使用ChatGPT优化LoginView代码，简化表单-.mp4 [102.9 MB] [6.6]--6-7-向ChatGPT咨询性能优化的建议，它能结合上下文给出-.mp4 [34.1 MB] [6.8]--6-9-使用ChatGPT生成详细的测试用例，用于功能测试-.mp4 [20.5 MB] [6.5]--6-6-使用ChatGPT优化CreateEditBlogVi-.mp4 [83.4 MB] 📁 第1章 课程简介 & 正确看待 AI [1.2]--1-2-理性认识AI-它是一个工具，它需要主人-【不易整理‖请关注：CunWorkNoteS】.mp4 [18.3 MB] [1.1]--1-1-导学-.mp4 [11.6 MB] 📁 第3章 使用 ChatGPT 写项目需求，设计技术方案 [3.7]--3-8-使用ChatGPT生成路由配置，并用Copilot快速-.mp4 [47.9 MB] [3.2]--3-3-使用ChatGPT写项目需求大纲-它考虑的非常全面-【公重号：CunWorkNotes】.mp4 [27.7 MB] [3.9]--3-10-使用ChatGPT快速生成axios配置和API代码-【优质资源‖关注：cunWorkNotes 解锁】.mp4 [64.8 MB] [3.8]--3-9-使用ChatGPT根据需求设计API接口-【持续更新‖免费提供：CunworknoteS】.mp4 [12.3 MB] [3.6]--3-7-使用ChatGPT做技术方案设计-先切换它的角色为前端-.mp4 [25.0 MB] [3.10]--3-11-使用Copilot快速生成API接口代码-part1-.mp4 [34.3 MB] [3.4]--3-5-使用ChatGPT根据需求，分析需要多少页面-.mp4 [29.9 MB] [3.1]--3-2-本课程对于讲师和学员都具有挑战性-.mp4 [3.7 MB] [3.5]--3-6-搭建Vue3开发环境-.mp4 [27.4 MB] [3.3]--3-4-根据ChatGPT的生成结果，提取核心功能-.mp4 [32.4 MB] 课件.7z [601.2 KB]
