Vibe Coding CUC
第 03 课 · 4 学时

个人网站搭建

心法: 永远从模板开始,而不是从 0 开始

📊

课程 PPT

本节课的全部讲义内容,推荐课堂同步看。

📄

教学文档

完整的操作步骤、提示词和参考答案,飞书文档持续更新。

📦

素材包

本节课需要的素材、模板、参考代码,一次性打包。

本节任务

从基础到挑战三个层次,根据自己的节奏推进

基础任务

跟着步骤,完整体验一遍流程

选一个开源模板,用 AI 帮你改成你自己的个人主页(头像、自我介绍、作品)

进阶任务

在基础上自由发挥与改造

在模板上加新版块:博客文章列表、技能图表、联系方式表单

挑战任务

突破舒适区,做出个性化作品

部署到 Vercel / Cloudflare Pages,拥有一个真正能分享的网址

提示词参考

点击右上角"复制"按钮即可一键拷贝到剪贴板

帮我挑模板

我想做一个 [大学生 / 设计师 / 学者 / 摄影师] 风格的个人主页,
希望整体感觉是 [简洁 / 极客 / 文艺 / 商务] 的。

请推荐 5 个适合的开源模板(GitHub 上 star 数较多的),
告诉我每个的特点、技术栈、适合谁,以及预览链接。

把模板改成我的

我刚 clone 了这个模板:[模板项目 URL]。
请帮我:
1. 阅读 README,告诉我哪些文件需要改才能换成我的内容
2. 用我下面的信息替换示例内容:
   - 姓名:[你的名字]
   - 简介:[一两句话介绍自己]
   - 作品:[列 2-3 个]
3. 一步步告诉我怎么本地跑起来看效果

部署到 Vercel

帮我把现在这个项目部署到 Vercel:
1. 告诉我需要先做什么准备(GitHub 账号、Vercel 账号等)
2. 一步步指导我怎么操作
3. 部署成功后,我怎么改内容、怎么重新发布
用截图描述而不是命令行术语,我是新手。

为什么”从模板开始”

从 0 开始做网站,你和 AI 都要不断猜:布局怎么排?字体多大?颜色怎么搭? 从模板开始,这些”美感决策”已经有人替你做好了,你只需要”改”。

改一个能跑的东西,比从空白页起步快 10 倍。

课后产物

一个公开网址(xxx.vercel.app),发给同学看的时候你会有点骄傲。