课程来源：Datawhale Easy-Vibe 教程

一、新手入门

什么是 Vibe Coding（氛围式编码） ？

这是 AI 时代编程的新范式。你不需要关心底层技术细节，只需要清楚地告诉 AI 你想要什么，它就能帮你把想法变成可运行的程序。简单来说，就是“用说话来编程”。

通过这个完整的学习路径，你将获得：（其实这也是AI时代超级个体应具备的能力！）

• Vibe Coding开发能力： 熟练使用 vibecoding 思维和 AI 编码工具，将开发效率提升数倍。不再需要死记硬背语法，而是学会如何引导 AI 生成高质量代码。
• 全栈开发技能： 从 UI 设计到前端实现，从数据库设计到 API 开发，从本地开发到云端部署，掌握现代 Web 应用的完整技术栈。
• AI 能力集成： 学会调用各类多模态 AI API，将文本、图像、语音等 AI 能力无缝集成到你的应用中，并通过 RAG 等技术构建智能化产品。
• 产品思维与运营能力： 从用户研究到需求拆解，从 MVP 设计到产品迭代，从支付集成到用户管理，形成完整的产品开发与运营闭环。

二、对话编程能做什么不能做什么

1. 更擅长“小而清晰”的应用

• 范围清晰：一页网页、一个简单内部工具、一个小玩法
• 结果可见：你能立即在浏览器中验证是否按预期工作
• 纠错直接：发现问题后，可以在后续对话中点明具体现象并要求修正（通过复制错误直接粘贴，或者截图粘贴的形式让 AI 进行修改）

2. 大型项目需要“流程视角”

需要先梳理出清晰的整体流程：关键步骤是什么、每一步的输入输出和状态变化是什么、哪些节点对性能和安全最敏感。再基于这张流程图，把相对独立的环节拆分出来，交给对话式 AI 生成接口、模块、脚本和测试。

3. 一个可参考的经验

⚠️ 适用场景指南：

• 原型 / Demo / 内部自用工具：非常适合先交给 AI 打第一版，再由你迭代细节。
• 面向真实用户的大型产品：通常需要工程师在架构、抽象、性能和维护上长期投入。
• 强安全 / 强合规系统（如支付、风控、医疗等）：在当前阶段，不宜“生成完就直接上线”，必须引入严格的审查与测试流程。

三、动手：你的第一个 AI 原生应用

1. 自己写或者要求 LLM生成提示词

一个好的提示词，通常包含这 3 个关键要素：

• 要做什么：任务边界（写/改/总结/抽取/生成）。
• 做到什么程度：长度、要点数、口吻、必须包含/必须避免。
• 怎么交付：输出格式（JSON/表格/代码块）。

具体步骤：

• 第一步：把“随口一句”变成“可执行任务”
• 第二步：用“输出格式”让结果可直接使用
• 第三步：把“风格”说清楚（角色 + 受众）
• 第四步：用“示例”锁定风格（Few-shot）
• 第五步：复杂任务先“列计划/检查点”，再输出

Role

你是一位拥有10年经验的高级前端游戏开发专家，精通 HTML5 Canvas、CSS3 动画与现代 JavaScript 架构。你擅长编写高性能、代码整洁且视觉效果惊艳的网页小游戏。

Goal

请编写一个完整的“贪吃蛇”网页游戏，要求包含 HTML、CSS 和 JavaScript，并整合在单个 HTML 文件中以便运行。

Core Features (必须实现)

1. 基本逻辑：

   • 蛇可以移动（使用键盘方向键控制）。

   • 吃到“食物”后，蛇身长度增加，分数提高，食物随机刷新。

   • 撞墙（边界检测）或撞到自己（自身碰撞检测）时游戏结束。

   • 游戏结束后显示“Game Over”界面和最终得分，并提供“重新开始”按钮。

Advanced Requirements (令人印象深刻的关键)

请务必实现以下几点，使游戏具有“大作感”：

1. 视觉风格：

   • 请放弃简陋的方框样式，采用 “赛博朋克”或“霓虹风格” 。

   • 使用深色背景（如 #0f0f1a）。

   • 蛇身应具有发光效果，颜色采用渐变色（例如从头部青色过渡到尾部紫色）。

   • 食物应有呼吸闪烁或旋转的动画效果。

2. 手感与体验：

   • 平滑移动：请确保蛇的移动是流畅的，而不是生硬的瞬移。建议使用 requestAnimationFrame 配合适当的速度控制逻辑，而非简单的 setInterval。

   • 开局引导：游戏加载后，不要直接开始，应显示一个“Press Space to Start”或“点击开始”的引导界面。

   • 反馈动画：吃到食物时，屏幕应有微弱的闪烁或分数跳动的动画反馈。

3. 代码质量：

   • 请使用 ES6+ 语法（如 class 类或清晰的函数模块）。

   • 关键代码请添加注释，以便我后续修改。

   • 尺寸设置：Canvas 画布建议设置为 400x400 或 600x600，网格大小建议为 20px。

Output Format

请直接输出完整的 HTML 代码块，不需要过多的文字解释，让我可以直接复制保存为 .html 文件并运行。

2. 制作AI 原生贪吃蛇 游戏