Datawhale easy-vibe课程打卡笔记Task01
课程学习地址：Easy-Vibe
课程介绍：
一、人群分类
1.第一阶段：零基础入门（学习地图～完整项目实战）
2.第二阶段：初中级开发工程师（前端部分＋后端开发部分）
3.第三阶段：高级开发工程师（claude code核心技能＋多平台开发）
4.拓展：helloclaw
二、教学资源
1.附录：业务思维（产品和方案）、技术方案（报错、编程工具对比、编程agent）、AI能力
2.附录9大知识库、AI能力词典(需求→能力→模型或产品)
3.本地启用课件(AI IDE或者旧方案)
三、零基础入门
（一）学习地图
1.截图沟通需要AI 具备多模态能力（即能够理解和分析图片）。目前支持图片输入的 AI 包括：Claude (Anthropic)、GPT-4V/GPT-4o (OpenAI)、Gemini (Google)、以及部分国产大模型如通义千问、文心一言等。
2.“请先用 5 句话讲清楚这个概念，再给几个问题提问我验证我理解对了没。” ”请你详细解释一下这个报错信息，我不理解为什么会报错。”
（二）初级一：AI时代，会说话就会编程
1.时长：4h。产出：ai原生贪吃蛇＋自创小游戏
2.当前大模型的能力理解为：可以胜任简单的内部小工具、数据可视化看板，以及一些轻量级小游戏的开发。仍需人工在流程设计、细节打磨上持续优化。
3.60秒做贪吃蛇
(1)平台：z.ai（智谱ai）3月20日才能用
(2)步骤：点击全栈开发（前端、后端、数据库、运维）；输入提示词。
《7款ai编程工具对比》
1.Vibe Coding 的核心思想，是从 “以代码为中心（code-first）” 转变为 “以意图为中心（intent-first）”。不断在“描述 → 生成 → 运行 → 反馈”的循环中迭代，直到应用达到满意的状态。
2.Vibe Coding 在线平台 (Web-based)
代表工具：Lovable, Replit, Z.ai, v0
量级应用： 做个简单的工具网页、小游戏或者个人展示页。
3.AI IDE (本地开发环境)
代表工具：Cursor, Trae, VS Code + AI 插件
可以直接访问你所有的本地文件，利用你电脑的算力。适合大型项目，可以自由安装各种插件，连接本地数据库，进行复杂的调试。
拓展：GUI图形用户界面(豆包～点击打字就行)CLI命令行界面(终端写自然语言生成代码)
4.ai agent
AI Agent 是一种软件系统，它能够感知环境、做出决策，并自主采取行动来实现特定目标。可以调用外部工具，它可以浏览网页、运行代码、查询数据库、发送邮件等，是一个会“调度工具”的大脑。
5.把工作拆成小步骤、按阶段迭代，效果往往会更好，也更不容易陷入“改不动”的死胡同。“1. 先做一个贪吃蛇游戏的前端”，“2. 再实现一个记录分数的后端”，“3. 最后把前后端连起来”。
6.工具介绍（vibe coding+uiux）
(1)AI AGENT:Lovable，Cursor，Z.ai，Replit，Minimax，Trae，V0
(2)AI UIUX:Mastergo，Flgma
7.实战教程
（1）输入前端和后端指令
请构建一个带前端和后端的简单贪吃蛇（Snake）网页应用。
前端
页面1：游戏页面
使用键盘控制蛇的移动。
蛇吃掉的不是食物，而是英文单词。
页面侧边栏展示已收集单词及其数量。
游戏结束后，已收集的单词仍然保留，并在新一局中延续。
页面2：写诗页面（Make Poem）
展示与游戏页面相同的单词列表（数据一致）。
提供一个按钮，将当前收集的单词发送给后端生成一首诗。
生成诗歌后，将被使用到的单词从列表中移除或递减计数。
添加简单的导航，在Game 和 Make Poem 两个页面之间切换。
确保收集到的单词在两个页面中都能看到。
后端
提供一个后端接口，接收收集到的单词并返回一首诗。
使用DeepSeek API 生成诗歌。
将API Key 存放在 .env 文件中，并在.gitignore 中忽略该文件。
（2）输入你的DeepSeek API Key。（可以在 Deepseek API获取）
（i）LLM 的 API Key 用于在你自己的项目中调用大模型。由于这是敏感信息，不能公开，因此需要单独写在配置文件里。
（ii）为什么要用.env 文件，并且不要把它上传到 GitHub？
.env 文件专门用来存放 密钥或密码（例如 DeepSeek API Key）。如果这个文件被上传到 GitHub，全世界的人都能看到你的密钥并盗用它。为了安全起见，我们需要在 .gitignore 文件中声明忽略 .env，让 Git 不跟踪它。这样一来，你的项目仍然可以在本机正常使用这些密钥，但不会在仓库中泄露。
（3）查看生成结果后，如果发现错误或有需要修改的地方，可以直接在聊天窗口中输入你的修改请求。
（4）如果你对页面设计不满意，也可以选择在Figma 或 Mastergo 中重新设计界面，再把设计思路反馈给 Agent。
8.对比
Trae(IDE集成开发环境)PC适合长期进行项目
4.动手：你的第一个ai原生应用
创造游戏中的困难：python无法下载，后端运行失败，只能先拆解提示词，让Trae先生成原始版贪吃蛇的前端网页。
没下载Python的情况下，调整提示词数量，让Trae修改前端代码，添加一个模拟的诗歌生成功能，这样即使没有后端服务器，游戏也能正常运行。
藏头诗生成器
附录1我们需要前端开发知识吗
1.前端三件套：HTML(页面元素)、CCS(元素样子)、Javascript(点击运动)→浏览器按照这个顺序处理三种代码
2.现代前端框架：HTML/CSS/JS(操作页面元素)、jQuery(简化DOM改变元素，动态更新)、React/Vue(组建化可复用模块，状态驱动自动更新)
→拓展：web基础附录＋前端进化史附录？
3.后端：用户分数存储、登录账号验证、关卡内容分配
附录2到底什么是vibe coding
1.上下文长度限制、指令遵循能力不强
2.训练集数据风格导致其有回答偏向
附录3模型上下文
1.上下文长度（context window）用token来衡量为32k-128k之间。
2.外部知识库当成长期记忆
附录4指令遵循能力
稳定而准确地执行命令，便于系统集成，提高可复现性。
