第1节 · 环境搭建与第一次实践
本节导读
-
了解 Vibe Coding（氛围编程）的核心理念
-
完成开发环境配置
-
用基础的提示词生成你的第一个网页作品
1.Vibe Coding
（1）什么是 Vibe Coding？
Vibe Coding（氛围编程）是 ai 时代的一种全新的编程方式。
2025 年初由 AI 研究者 Andrej Karpathy 提出的新概念，还被柯林斯词典收录为年度热词。
原话：There's a new kind of coding I call "vibe coding", where you fully give in to the vibes ... and forget that the code even exists.
简单理解：
你不用逐行手写代码，不用抠语法细节；只用大白话描述你想要什么效果、什么感觉（vibe = 感觉、氛围），交给 AI 去生成、改代码、调 bug；你只看运行效果好不好，不断用自然语言迭代调整。
（2）和普通 AI 补全代码的区别
传统 AI 辅助编程：人懂代码，AI 帮写片段，人要读懂、审查每段代码。
Vibe Coding：人重点管需求、体验、效果，不深究底层代码细节，靠 "看结果 → 口头提修改" 反复迭代项目。
简单来说：
传统编程：先学习技术 → 手动编程
Vibe Coding：告诉 AI 你要要什么 → AI 生成并运行 → 直接看效果
最大的变化是：你不需要记住繁琐的代码语法，只需要专注于你的想法。
2 工具下载与安装
（1）AI 语音输入法（可选安装）
AI 编程时代，语音输入法可以大幅提升编码效率------说话速度远快于打字，配合 AI 工具使用体验极佳。
推荐工具：
闪电说，是一个沟通 Agent（国内，基础功能免费）
下载 | Typeless AI 语音听写（国际，需付费）
（2）VS Code 编辑器
如果你有其他更顺手的编辑器，可以不用下载
目前市面上几乎所有的 AI 编辑器几乎都是基于它来构建的，例如 Trae/Cursor/Antigravity 等，我们推荐从 VS Code 开始。
Visual Code 是一款免费开源的代码编辑器，界面简洁、上手简单。通过它可以查看和编辑 AI 生成的代码、管理项目文件，是 AI 编程过程中的得力工具。
下载安装地址：Visual Studio Code - The open source AI code editor | Your home for multi-agent development
（3）WorkBuddy AI 助手
腾讯出品，开箱即用的 AI 助手，不仅能辅助编程，还能处理学习和工作中的各种任务。
限时福利：4月30日前新用户注册免费送3000积分（价值 300 元），国内顶级模型 GLM 5.1、MiniMax M2.7、Kimi 2.5 均可免费使用。
如果你经常受限于各种付费工具，不妨来试试这款。
下载安装地址：WorkBuddy - AI Agent 办公新范式
3 第一个实践
需求：生成 " 电影海报墙 " 网页
步骤 1：打开 WorkBuddy
访问 WorkBuddy，注册并登录后即可开始与 AI 对话。
步骤 2：发送需求
以做一个电影海报墙为例，则输入以下提示词：
帮我做一个电影海报墙网页。
核心功能：
展示一个电影海报墙页面，包含十部电影的海报
使用 Unsplash 的占位图作为海报图片
每张海报下方显示电影名称和上映年份
生成一个单 HTML 文件即可。
步骤 3：预览效果
点击下图 "进入全屏 "。
退出全屏
查看 AI 生成的代码，了解网页的基本结构。
步骤 4：迭代修改
-
添加一部自己喜欢的电影：告诉 AI " 请把第二张海报换成《飞驰人生》"
-
添加个人署名：告诉 AI " 在页面底部添加个人署名：作者是你的姓名 "
-
添加电影详情页：告诉 AI " 让每个电影卡片可以点击，点击后进入详情页，详情页要展示电影的头图和简介 "
步骤 5：观察代码
AI 生成的代码中包含：
- HTML: 定义网页的结构（标题、段落、图片等）
- CSS: 控制网页的外观（颜色、布局、字体等）
- JavaScript: 控制网页的交互行为
4 前端页面的代码
（1）HTML/CSS/JS 简介
（2）为什么不需要深入学习语言细节？
有了 AI 工具的帮助：
- 你只需要描述你想要的效果
- AI 会自动生成对应的代码
- 但需要理解代码的作用
5 下节课预告
下节课我们将深入了解 HTML/CSS/JS 的基础知识，为后续开发打下基础。
6 本节实操任务验收标准
- 持续迭代优化提示词，生成一个各具特色的 " 电影海报墙 " 网页，比一比谁做的更好！