内容缺少取舍
能够做视觉表达，却难以明确网站定位、信息层级与展示重点。
01
Why this course
技术门槛降低之后，更需要完整的产品设计判断
学生通常具备视觉表达基础，却缺少把概念转化为完整数字产品的经验。课程不把 Vibe Coding 当作孤立工具，而是把它放进策划、设计、开发、调试与上线的完整链路。
静态稿难以落地
关注单页效果，但不熟悉页面关系、组件复用与基础交互。
AI 指令过于模糊
容易用一句话要求 AI 完成网站，缺少任务拆解与上下文组织。
缺少验证闭环
遇到报错难以复现和定位，也容易直接接受 AI 的第一版结果。
Vibe Coding 不是课程终点，而是让学生把设计决策转化为真实数字体验的协作媒介。
02
Learning outcomes
把一门工具课，重构为四类可迁移能力
评价不看代码数量，而看学生能否定义问题、组织内容、完成可运行页面，并通过测试持续修正。
网站策划能力
围绕个人身份、专业方向与作品内容，明确网站定位、展示重点和页面范围。
信息与视觉设计能力
建立信息架构、导航关系、视觉规范与具有个人辨识度的网页表达。
AI 协作开发能力
用 Prompt、页面规范和任务清单组织上下文，完成生成、修改、调试与迭代。
测试与表达能力
检查运行、跳转、响应式与视觉一致性，并说明设计判断和修改过程。
03
16-session course map
一个项目，四个阶段，十六个连续交付节点
选择阶段，再点击任意课次，可查看该次课的学习重点、课堂任务与明确产出。
阶段 01
我要在网站中展示什么？
网站策划与视觉方案课次01
理解 Vibe Coding、AI Coding 与个人网站项目要求，认识 TRAE、Codex 等工具生态。
梳理个人网站希望解决的问题与展示对象。
个人网站目标与内容清单
04
Teaching tasks
把抽象的 AI 协作能力，变成可提交、可观察的任务
课程通过模板、现场示范、截图反馈和同伴评审，让每一次 AI 协作都有输入、判断、修改和验证证据。
个人网站策划卡
- 个人定位与目标受众
- 栏目结构与重点作品
- 页面范围与暂不实现项
网页设计与 AI 协作资料包
- 网站策划说明
- 视觉规范与组件要求
- Prompt 模板与任务清单
Agent 任务委派记录
- 提供任务目标与上下文
- 审核并修改 AI 计划
- 检查文件与运行结果
多模态界面修改
- 使用截图定位问题
- 区分目标、现状和禁止项
- 设置明确验收方式
网页测试与同伴评审
- 交换浏览个人网站
- 记录视觉与运行问题
- 判断优先级并完成修改
教学方法
16 次课持续推进同一个个人网站。
用模板与检查表降低初期认知负担。
完整呈现任务、修改、报错与验证过程。
比较模糊指令与结构化上下文的结果差异。
同时评价定义、决策、修改和验证。
05
Assessment
四次验收，把策划、设计、开发和部署连成闭环
每个阶段都有可检查交付物，避免学生只在结课时展示一个缺少过程证据的最终页面。
- 01网站策划与视觉方案
定位、内容清单、网站地图、线框与视觉稿
内容、结构与视觉方向 - 02页面原型 V0
首页、核心页面、组件样式与 AI 协作记录
结构完整与视觉还原 - 03可运行网站 V2
运行版本、主要交互、响应式检查与修复记录
主要浏览路径可用 - 04最终网站 V3
线上网站、测试记录、展示材料与课程复盘
完成度、质量与迭代证据
评分结构
课程不以代码数量作为主要依据，更关注内容策划、视觉表达、网页实现与测试修改是否形成完整实践闭环。
06
Teaching results
从“让 AI 生成页面”，走向“定义、检查并持续修改”
本轮课程已形成一套 64 学时的项目制教学路径，并留下可复用的课程材料、验收机制与真实实施数据。
名学生参与
人完成个人网站
项目完成率
个优秀案例
个项目进入作品集
- 01策划
- 02设计
- 03开发
- 04测试
- 05上线
沉淀的教学资产
- 个人网站策划模板
- 网页视觉规范
- 结构化 Prompt 模板
- 开发任务清单
- 问题修复记录
- 同伴测试记录
- 课程评价标准