浅色/深色
Web 前端微项目
项目总览
| # | 项目名称 | 核心知识域 | 难度 | 平台支持 |
|---|---|---|---|---|
| 1 | 🌦️ 天气卡片 | CSS 布局与样式 | ⭐⭐ | ✅ 完全支持 |
| 2 | 🍕 点餐菜单 | DOM 交互与数据渲染 | ⭐⭐⭐ | ✅ 完全支持 |
| 3 | 🎵 音乐播放器 | CSS 动画与状态管理 | ⭐⭐⭐ | ✅ 完全支持 |
| 4 | 🎨 渐变配色生成器 | CSS 实时交互 | ⭐⭐ | ✅ 完全支持 |
| 5 | 🃏 个人作品集名片 | 响应式与高级动效 | ⭐⭐⭐ | ✅ 完全支持 |
| 6 | 🛒 商品详情页 | 组件交互与动画 | ⭐⭐⭐⭐ | ✅ 完全支持 |
| 7 | 🎰 抽奖转盘 | Canvas 绘图与动画 | ⭐⭐⭐⭐ | ✅ 完全支持 |
| 8 | 🗓️ 倒计时活动页 | 定时器与 CSS 动画 | ⭐⭐⭐ | ✅ 完全支持 |
| 9 | ⌨️ 打字速度测试 | 字符逻辑与计时 | ⭐⭐⭐ | ✅ 完全支持 |
| 10 | 🎮 贪吃蛇 | Canvas 与游戏逻辑 | ⭐⭐⭐⭐⭐ | ✅ 完全支持 |
Prompt Chain 三阶进化说明
| 阶段 | 特征 | 学生认知状态 |
|---|---|---|
| 🟡 初级 | 描述结果，无细节 | 只知道想要什么，不知道怎么描述。生成结果往往布局混乱、样式单一。 |
| 🔵 中级 | 描述视觉元素与结构 | 能列出页面的主要模块，开始关注布局和配色，但缺乏交互细节。 |
| 🟢 高级 | 描述实现细节与联动逻辑 | 能精确描述动画参数、交互行为、数据联动和边界情况，生成结果接近生产级页面。 |
项目 01 · 🌦️ 天气卡片
难度： ⭐⭐ 入门级
📌 教学重点： 纯 CSS 样式驱动，零 JS 逻辑压力，适合作为第一个项目。学生在配色、布局、图标引入上快速获得成就感。
Prompt Chain 三阶进化
| 阶段 | 提示词关键词 | Prompt 示例 |
|---|---|---|
| 🟡 初级 | 描述结果，无细节 | 帮我生成一个天气页面 |
| 🔵 中级 | 描述视觉元素 | 帮我生成一个天气卡片，显示温度、湿度和天气图标，用渐变蓝色背景 |
| 🟢 高级 | 描述具体实现细节 | 在上一版基础上，把温度字体改大到72px，加一个5天预报横向滚动条，夜间模式切换按钮放右上角，动画用 fade-in 0.3s |
知识与技能点
| 知识点类别 | 具体内容 |
|---|---|
| CSS 渐变 | linear-gradient、radial-gradient 背景设置 |
| Flexbox 布局 | 居中对齐、横纵排列、间距控制 |
| CSS 变量 | --color-primary 等统一管理配色方案 |
| 过渡动画 | transition 实现 fade-in、hover 效果 |
| 图标引入 | Font Awesome 等图标字体的 CDN 引入与使用 |
| 滚动容器 | overflow-x: scroll 实现横向滚动预报栏 |
项目 02 · 🍕 点餐菜单
难度： ⭐⭐⭐ 初中级
📌 教学重点： 数据驱动视图的基础思维训练。学生需要将菜品数据数组渲染为列表，并处理购物车的实时计算逻辑。
Prompt Chain 三阶进化
| 阶段 | 提示词关键词 | Prompt 示例 |
|---|---|---|
| 🟡 初级 | 描述结果，无细节 | 做一个餐厅点餐页面 |
| 🔵 中级 | 描述视觉与结构 | 做一个中餐外卖菜单页面，有图片、菜名、价格，底部有购物车栏 |
| 🟢 高级 | 描述交互逻辑细节 | 在菜品卡片上加+/-数量按钮，购物车栏实时显示总价，点击结算弹出确认弹窗，菜品按热菜/凉菜/主食分类 Tab 切换 |
知识与技能点
| 知识点类别 | 具体内容 |
|---|---|
| DOM 动态渲染 | 数组数据 → innerHTML / createElement 动态生成列表 |
| 事件委托 | 父元素统一监听子元素点击，提升性能 |
| classList 操作 | Tab 切换时添加/移除 active 类名 |
| 数量逻辑 | 变量计算与 DOM 更新联动（加减按钮） |
| 实时计算 | 购物车总价的动态汇总与显示 |
| 弹窗交互 | 结算确认弹窗的显示与隐藏控制 |
项目 03 · 🎵 音乐播放器
难度： ⭐⭐⭐ 初中级
📌 教学重点： 状态变化驱动多处 UI 同步更新。一个播放状态变量需要同步影响按钮图标、封面旋转、进度条等多个元素。
Prompt Chain 三阶进化
| 阶段 | 提示词关键词 | Prompt 示例 |
|---|---|---|
| 🟡 初级 | 描述功能结果 | 帮我做一个音乐播放器界面 |
| 🔵 中级 | 描述视觉组件 | 做一个音乐播放器，有专辑封面、歌名、进度条、上一首/播放/下一首按钮，深色背景 |
| 🟢 高级 | 描述动态联动细节 | 专辑封面旋转动画在播放时启动，进度条可拖拽，背景颜色根据专辑封面主色调自动变化，歌词区域逐行高亮滚动 |
知识与技能点
| 知识点类别 | 具体内容 |
|---|---|
| @keyframes 动画 | 封面旋转、淡入等关键帧动画定义 |
| animation-play-state | 通过 JS 控制动画暂停与继续 |
| 状态管理 | JS 维护播放状态变量，驱动多个 UI 元素联动 |
| input[type=range] | 自定义进度条样式与拖拽交互 |
| Audio API | HTMLAudioElement 的播放、暂停、进度控制 |
| 歌词滚动 | 定时器驱动歌词数组逐行高亮与滚动定位 |
项目 04 · 🎨 渐变配色生成器
难度： ⭐⭐ 入门级
📌 教学重点： CSS 属性与 JS 实时联动的直观训练。用户操作 → JS 读取值 → 更新 CSS 属性，反馈即时，学生成就感强。
Prompt Chain 三阶进化
| 阶段 | 提示词关键词 | Prompt 示例 |
|---|---|---|
| 🟡 初级 | 描述功能结果 | 做一个渐变色背景的页面 |
| 🔵 中级 | 描述核心交互 | 做一个渐变配色生成器，有两个颜色选择器，实时预览渐变效果，可以切换线性/径向渐变 |
| 🟢 高级 | 描述功能细节 | 加角度滑块控制渐变方向，支持添加多个颜色节点，一键复制CSS代码，随机生成按钮带过渡动画 |
知识与技能点
| 知识点类别 | 具体内容 |
|---|---|
| input[type=color] | 颜色选择器的值读取与实时监听 |
| CSS 渐变动态生成 | 用 JS 拼接 linear-gradient / radial-gradient 字符串 |
| DOM 实时更新 | input 事件监听 → 实时修改元素 style 属性 |
| input[type=range] | 角度滑块控制渐变方向参数 |
| 剪贴板 API | navigator.clipboard.writeText() 复制 CSS 代码 |
| Math.random() | 随机生成颜色值的算法实现 |
项目 05 · 🃏 个人作品集名片
难度： ⭐⭐⭐ 初中级
📌 教学重点： 现代 CSS 高级特性综合运用。最贴近真实需求，学生可以直接做出自己的作品集页面，实用价值高。
Prompt Chain 三阶进化
| 阶段 | 提示词关键词 | Prompt 示例 |
|---|---|---|
| 🟡 初级 | 描述页面类型 | 帮我做一个个人介绍页面 |
| 🔵 中级 | 描述布局与风格 | 做一个程序员作品集主页，有头像、姓名、技能标签、项目卡片三列布局，整体科技感配色 |
| 🟢 高级 | 描述交互与动效细节 | 鼠标悬停项目卡片时有3D翻转效果，技能标签用动态进度条，页面滚动时导航栏背景从透明变毛玻璃，加打字机动画显示职位 |
知识与技能点
| 知识点类别 | 具体内容 |
|---|---|
| CSS Grid 响应式 | auto-fill + minmax 实现自适应多列布局 |
| 媒体查询 | @media 断点适配移动端 |
| CSS 3D 变换 | perspective + rotateY 实现卡片翻转效果 |
| position: sticky | 导航栏吸顶效果实现 |
| backdrop-filter | blur() 实现毛玻璃背景效果 |
| 打字机动画 | JS 逐字输出职位文字的定时器实现 |
项目 06 · 🛒 商品详情页
难度： ⭐⭐⭐⭐ 中高级
📌 教学重点： 复杂交互状态的拆解与管理。涉及多个组件之间的状态联动，是电商类业务最典型的前端场景。
Prompt Chain 三阶进化
| 阶段 | 提示词关键词 | Prompt 示例 |
|---|---|---|
| 🟡 初级 | 描述页面类型 | 做一个商品页面 |
| 🔵 中级 | 描述主要模块 | 做一个运动鞋商品详情页，有图片轮播、价格、颜色选择、尺码选择、加购按钮 |
| 🟢 高级 | 描述联动与动效 | 颜色选中后主图自动切换对应配色，尺码缺货时显示为灰色不可点击，加购按钮点击有抛物线飞入购物车动画，右侧价格区域吸顶 |
知识与技能点
| 知识点类别 | 具体内容 |
|---|---|
| 图片轮播 | 索引变量控制当前图片，缩略图点击联动主图 |
| 规格选择状态 | 选中态、禁用态的 CSS 类名切换管理 |
| SKU 数据结构 | 颜色/尺码组合对应不同库存的对象设计 |
| 动画轨迹计算 | JS 计算抛物线路径实现飞入购物车动画 |
| position: sticky | 右侧价格区域在滚动时保持可见 |
| DOM 禁用控制 | disabled 属性与对应样式的联动 |
项目 07 · 🎰 抽奖转盘
难度： ⭐⭐⭐⭐ 中高级
📌 教学重点： Canvas 原生绘图与动画。与贪吃蛇形成差异，重点考察弧度数学计算和 requestAnimationFrame 缓动控制。
Prompt Chain 三阶进化
| 阶段 | 提示词关键词 | Prompt 示例 |
|---|---|---|
| 🟡 初级 | 描述功能结果 | 做一个抽奖转盘页面 |
| 🔵 中级 | 描述视觉与交互 | 做一个可以自定义选项的抽奖转盘，点击按钮旋转，转完后弹出中奖结果，6个扇形用不同颜色 |
| 🟢 高级 | 描述动效与交互细节 | 转盘旋转用缓动函数（先快后慢），中奖扇形高亮放大，支持编辑奖项名称，加音效反馈，转动过程中禁止重复点击 |
知识与技能点
| 知识点类别 | 具体内容 |
|---|---|
| Canvas 弧度绘图 | arc()、fillStyle、strokeStyle 绘制扇形 |
| 数学计算 | Math.PI 弧度换算，扇形角度均分计算 |
| requestAnimationFrame | 逐帧旋转动画的主循环实现 |
| 缓动函数 | Ease-out 效果（先快后慢）的数学实现 |
| 数据驱动绘图 | 奖项数组 → Canvas 动态重绘转盘 |
| 交互状态锁 | 转动期间禁止重复点击的 isSpinning 标志位 |
项目 08 · 🗓️ 倒计时活动页
难度： ⭐⭐⭐ 初中级
📌 教学重点： 定时器控制与时间计算逻辑。翻牌动画是 CSS 3D 变换的经典应用场景，粒子效果训练学生对数组的操作能力。
Prompt Chain 三阶进化
| 阶段 | 提示词关键词 | Prompt 示例 |
|---|---|---|
| 🟡 初级 | 描述功能结果 | 做一个倒计时页面 |
| 🔵 中级 | 描述场景与视觉 | 做一个高考倒计时页面，显示距离高考还有多少天时分秒，蓝色激励风格 |
| 🟢 高级 | 描述动效与功能 | 数字用翻牌动画（flip clock），背景加粒子飘落效果，加一句每天随机更换的励志名言，倒计时归零时触发撒花庆祝动画 |
知识与技能点
| 知识点类别 | 具体内容 |
|---|---|
| setInterval 定时器 | 每秒触发时间计算与 DOM 更新 |
| 时间计算 | 目标日期与当前日期的差值换算（天/时/分/秒） |
| CSS 翻牌动画 | rotateX + 前后两个面的 3D 翻转效果 |
| 粒子系统 | 数组管理粒子对象的生成、运动、消亡循环 |
| Math.random() | 粒子位置/速度随机化，名言随机取值 |
| 事件触发 | 倒计时归零时执行庆祝动画的条件判断 |
项目 09 · ⌨️ 打字速度测试
难度： ⭐⭐⭐ 初中级
📌 教学重点： 字符串逐字比对逻辑与计时系统。交互完整，结果可量化，学生有强烈的想要挑战自己成绩的动力。
Prompt Chain 三阶进化
| 阶段 | 提示词关键词 | Prompt 示例 |
|---|---|---|
| 🟡 初级 | 描述功能类型 | 做一个打字练习页面 |
| 🔵 中级 | 描述核心功能 | 做一个打字测速页面，显示一段文字让用户跟着输入，计时并统计WPM（每分钟字数）和正确率 |
| 🟢 高级 | 描述细节与体验 | 正在输入的字符高亮显示，打错的字母变红，倒计时60秒自动结束，结束后展示速度/准确率/错误数三项成绩，加重试按钮和难度切换 |
知识与技能点
| 知识点类别 | 具体内容 |
|---|---|
| 字符串比对 | 逐字符对比用户输入与目标文本的算法 |
| 键盘事件 | input / keydown 事件捕获用户输入 |
| 动态样式渲染 | 正确/错误/当前字符的不同颜色类名切换 |
| Date 计时 | Date.now() 记录开始时间，计算已用秒数 |
| WPM 计算 | （正确字符数 / 5 / 分钟数）的公式实现 |
| 倒计时控制 | setInterval 60秒倒计时与自动结算逻辑 |
项目 10 · 🎮 贪吃蛇
难度： ⭐⭐⭐⭐⭐ 高级
📌 教学重点： 逻辑拆解能力的综合考验，最能区分学生的思维层次。涉及游戏主循环、碰撞检测、数据结构等核心编程概念。
Prompt Chain 三阶进化
| 阶段 | 提示词关键词 | Prompt 示例 |
|---|---|---|
| 🟡 初级 | 描述游戏类型 | 帮我用网页做一个贪吃蛇游戏 |
| 🔵 中级 | 描述游戏要素 | 做一个贪吃蛇游戏，20×20格子，有分数显示，游戏结束弹出重新开始按钮，像素风格配色 |
| 🟢 高级 | 描述功能扩展细节 | 加三档难度（速度不同），食物随机出现时有闪烁动画，蛇身用渐变色，撞墙/咬自己有震动屏幕效果，历史最高分存到 localStorage，支持手机触屏滑动控制 |
知识与技能点
| 知识点类别 | 具体内容 |
|---|---|
| Canvas 绘图 API | fillRect、clearRect 绘制格子、蛇身、食物 |
| 游戏主循环 | setInterval 控制帧率，每帧清屏 → 更新 → 绘制 |
| 二维数组网格 | 用坐标对象数组表示蛇身的数据结构 |
| 碰撞检测 | 边界碰撞和蛇身自碰的坐标比对算法 |
| 方向控制 | 键盘/触屏事件 → 方向变量 → 蛇头坐标更新 |
| Canvas 渐变色 | createLinearGradient 绘制渐变蛇身 |
| localStorage | 历史最高分的存取与比较 |
| 触屏事件 | touchstart / touchend 计算滑动方向 |
知识点覆盖总览
| 知识点 | 涉及项目 |
|---|---|
| CSS 布局（Flex/Grid） | 项目 01、02、05、07 |
| CSS 动画与过渡 | 项目 01、03、06、08 |
| JS DOM 操作 | 项目 02、03、04、09 |
| 事件处理 | 项目 02、06、09、10 |
| 数组/对象数据处理 | 项目 02、04、07、08 |
| 定时器（setInterval） | 项目 03、08、09、10 |
| Canvas 绘图 | 项目 07、10 |
| Math 数学计算 | 项目 07、08、09、10 |
| CSS 3D 变换 | 项目 05、06、08 |
| localStorage | 项目 10 |
| 响应式设计 | 项目 05、06 |
| 剪贴板 / 原生 API | 项目 04 |
教学建议
按难度分组使用
| 分组 | 项目 | 适用场景 |
|---|---|---|
| 视觉类（入门） | 天气卡片、渐变配色生成器、倒计时页 | 纯样式驱动为主，零 JS 逻辑压力，适合第一单元 |
| 交互类（初中级） | 点餐菜单、音乐播放器、商品详情页 | DOM 操作与事件处理，数据驱动视图的关键过渡 |
| 逻辑类（中高级） | 打字速度测试、个人作品集 | 复杂状态管理和响应式布局，体现编程思维 |
| 综合类（挑战） | 抽奖转盘、贪吃蛇 | Canvas 绘图与游戏逻辑，最能区分学生能力层次 |
Prompt Chain 课堂演示建议
每个项目的三阶提示词可直接作为课堂演示素材：让学生分别用初级、中级、高级提示词在平台上生成页面，对比三个版本的差异，亲身感受「提示词精度」对最终页面质量的直接影响。建议引导学生在课后自行从初级提示词出发，尝试升级为高级提示词，作为作业提交。