VibeCoding实战 个人作品集网站
个人作品集网站是展示你能力的最好方式
无论你是找工作 、接私活，还是想在社交媒体上分享你的作品，一个漂亮的作品集网站都能给你加分 。
而且，这个项目本身就是你的第一个作品，可以放到作品集里展示，是不是很有意思？
47%
53%
这个网站要包含几个部分：
💤
•
个人介绍（ 姓名 、头像 、简介 、联系方式）
•
技能展示（你会哪些技术）
•
项目展示（你做过的项目 ，包括截图 、描述 、链接）
•
界面要做响应式设计，在手机和电脑上都能正常显示。
技术选型上，我们使用 React + TypeScript + Vite 作为前端框架，Tailwind CSS 来写样式，最后部署到Vercel 上线 。这套技术栈很现代，也是目前最流行的前端开发方案。
45%
55%
开发步骤
1）需求研究
开发任何项目前，都要先做需求研究 。你可以去看看别人的作品集网站是什么样的， 比如在网上搜索
"developer portfolio examples" ，找找灵感 。记录下你喜欢的设计风格和功能，这些都可以作为你的参考。
2） 写 PRD 文档
有了灵感后，就要写 PRD 文档了。创建一个 PRD.md 文件， 明确你要展示哪些内容。下面是一个参考示例：
代码块
Markdown
# 个人作品集网站 PRD
## 核心功能
1. 首页：大标题 + 简介 + 头像
2. 关于我：详细介绍 + 技能列表
3. 项目展示：项目卡片列表，每个卡片包含项目名称 、项目截图 、简短描述 、技术栈 、项目链接
4. 联系方式：邮箱 、GitHub、社交媒体链接
## 设计要求
- 简洁现代的设计风格
- 深色主题
- 流畅的滚动动画
- 移动端适配
这个文档不需要写得很复杂，把核心功能和设计要求说清楚就行。
3） 写技术设计文档
接下来写技术设计文档 TECH_DESIGN.md 。在这里确定具体的技术方案：
代码块
Markdown
# 技术设计
## 技术栈
- React + TypeScript + Vite
- Tailwind CSS
- React Router（ 如果需要多页面）
- Framer Motion（ 动画效果）
## 项目结构
src/
components/
Header.tsx
Hero.tsx
About.tsx
Projects.tsx
Contact.tsx
这个文档的作用是让 AI 知道你要用什么技术，项目结构是什么样的。
4） 写 AGENTS.md 文件
然后创建 AGENTS.md 文件，告诉 AI 开发规范：
代码块
Markdown
# 个人作品集网站开发指令
## 项目概述
使用 React + TypeScript + Tailwind CSS 开发的个人作品集网站。
这个文件是给 AI 的开发规范，让它知道代码要怎么写，设计要什么风格。
5）开始开发
有了这三个文档，就可以开始开发了 。打开 Cursor 等 AI 代码编辑器，开始和 AI 对话。第一个提示词是初始化项目 ：
代码块
Plain Text
请根据 PRD.md、TECH_DESIGN.md 和 AGENTS.md 的要求，初始化一个 React + TypeScript + Vite 项目 ，并安装 Tailwind CSS。
这个提示词很简单，但包含了所有必要的信息 。AI 会读取这三个文档，然后按照要求创建项目结构，安装依赖，配置 Tailwind CSS。
然后逐步实现每个组件 。比如创建 Hero 组件：
代码块
Plain Text
创建 Hero 组件，包含大标题 、简介和头像 。使用 Tailwind CSS 实现深色主题和渐变色效果。
这个提示词告诉 AI 要创建什么组件，包含哪些内容，用什么技术实现 。AI 会生成完整的组件代码。接着创建 Projects 组件：
代码块
Plain Text
创建 Projects 组件，展示项目列表 。每个项目卡片包含截图 、标题 、描述和技术栈标签。
就这样一步一步，完成整个网站 。每完成一个组件，就在浏览器中预览一下效果，确保符合预期。
6）部署上线
开发完成后，就可以部署上线了 。部署的流程很简单：
•
把代码推送到 GitHub
•
登录 Vercel ，导入 GitHub 仓库
•
点击部署，等待完成
•
获得你的网站链接
Vercel 会自动检测你的项目类型，配置构建命令，非常智能 。部署完成后，你就有了一个可以访问的网站链接，可以分享给别人看。
扩展思路
基础版完成后，你还可以继续扩展功能 。
比如添加博客功能， 写文章分享你的学习经验；
添加深色/浅色主题切换，让用户可以选择喜欢的主题；
支持多语言， 吸引国际用户；添加访问统计， 了解网站访问情况；
甚至可以加个留言板功能，让访客可以给你留言。
📚 扩展阅读与知识库补充
以下内容整理自网络上同类主题的高质量文章，用于丰富本教程的知识库体系，涵盖实战案例、工具进阶、设计规范和部署优化等维度。
一、同类 VibeCoding 实战教程推荐
这些文章与本教程主题高度一致，可作为不同视角的参考：
•
《Build a Personal Portfolio Site with AI in One Hour》 — 英文实战教程，采用"每个 Section 一条 Prompt"的极简开发法，四个区块（Hero/About/Projects/Contact）依次生成，适合快速出原型。阅读原文
•
《Vibe Coding 实战复盘：一个人 + AI，从零打造会聊天的个人主页》 — 掘金社区深度复盘，技术选型为 Next.js，亮点是加入了 AI 对话功能，从页面设计到功能打磨再到部署上线的完整记录。阅读原文
•
《Build a Portfolio Site in 1 Hour with Vibe Coding》 — 使用 Cursor + Next.js 技术栈，1 小时内完成开发并部署到 Vercel，附带完整的前置条件检查清单和逐步骤 Prompt。阅读原文
•
《Vibe coding 个人作品集网站经验分享》 — 小红书作者实操总结，重点梳理了 AI 角色分配、报错处理和资源利用等关键经验，适合避坑参考。阅读原文
•
《How to Build a Modern Portfolio Website With Vibe Coding and AI in 2026》 — Sketchflow 官方指南，介绍了使用 Precision Editor 精修 AI 生成结果的工作流，包括配色、字体、卡片布局的微调方法。阅读原文
二、Cursor AI 编程进阶技巧
掌握以下 Cursor 高级功能，能显著提升 AI 协作开发效率：
Plan Mode（计划模式）：按 Shift+Tab 切换，AI 会先研究代码库、提出澄清问题、生成带文件路径的详细实施计划，等待你确认后再写代码。复杂任务务必先开 Plan Mode。
测试驱动开发（TDD）模式：明确告诉 AI "正在进行 TDD"，让它先写测试、运行确认失败，再写实现代码。适合对质量要求高的核心模块。
Figma 设计稿转代码：复制 Figma 画板链接，在 Cursor 中粘贴并要求拆分为 React 组件 + Tailwind 样式 + TypeScript 类型，10 分钟可完成设计到代码的转换。
项目级 Skills：在 .cursor/skills/ 目录下创建自定义技能（如 react-h5-dev），封装团队开发规范，AI 会自动匹配并遵循。
💡
进阶参考：Cursor 官方 Agent 最佳实践 | Cursor 7 个高效功能详解 | Figma + Cursor 设计转代码实战
三、AGENTS.md 深度指南
本教程中的 AGENTS.md 是 AI 协作开发的核心规范文件，以下是更完整的写法框架：
| | |
| | |
| | |
| | |
| | |
| | |
💡
写作原则：控制在 500 行以内；不要把整本 style guide 塞进去（用 linter 就行）；不要为罕见 edge case 写规则，AI 反复犯同错时再补；把它当作活文档，随项目迭代更新。
深度参考：AGENTS.md 下一代 AI 编码协作规范实战指南 | AGENTS.md 深度解析：为 AI 代理而生的 README | AGENTS.md 官方标准说明
四、PRD 文档进阶写法（AI 时代）
本教程中的 PRD 是简化版，面向 AI 开发的完整 PRD 应包含以下 6W 要素：
•
Who（给谁做）：目标用户、用户画像、使用场景
•
What（做什么）：功能列表、优先级（P0/P1/P2）、范围边界
•
Where（在哪做）：功能入口、使用路径、页面位置
•
When（什么时候做）：里程碑、上线时间、灰度计划
•
How（怎么做）：方案设计、交互逻辑、技术实现
•
How much（成本多少）：开发工时、资源需求、ROI 分析
其中 "Out of Scope"（不做什么） 是 PRD 中最有力量的一行，能有效防止范围蔓延。AI 辅助写 PRD 时，可先用自然语言列出要点，再让 AI 结构化输出，最后人工审核补全。
参考资源：PRD 2.0：AI 时代的需求文档（附腾讯模板） | PRD Template 2026 实用指南 | 如何写一份团队真正会用的 PRD
五、个人作品集网站设计最佳实践
基于对 2026 年大量优秀作品集网站的调研，总结以下设计原则：
重质不重量：展示 3-5 个出色项目，而非 15 个平庸项目。每个项目应包含：解决的挑战、你的具体贡献、可衡量的结果。
项目即案例研究：不要只放截图，要讲完整故事——问题背景、你的角色、技术方案、最终成果与数据。
无摩擦联系：不要隐藏联系方式，将 CTA 放在导航栏、章节末尾和页脚，显眼的联系点显著提高咨询率。
移动优先：超过 60% 的访问来自移动端，务必在真机上测试体验。
写作即作品集：约 65% 的优秀作品集包含博客/文章区，持续输出技术文章能展示学习能力和思考深度。
常见功能普及率参考：深色/浅色主题切换（~40%）、社交链接（~70%）、博客区（~65%）、首页不放项目截图（~60%，改为外链跳转）。
🎯
核心理念：你的作品集不是简历，而是一个对话起点。要有意图地构建，让每个访客都能快速理解你是谁、你能做什么、如何联系你。
灵感与参考：2026 年 15 个最佳现代作品集设计范例 | 顶级开发者作品集示例与最佳实践 | 作品集设计调研数据（GitHub）
六、部署与性能优化补充
除了本教程的基础 Vercel 部署流程，以下经验能让你的作品集网站更专业：
•
部署前检查清单：替换所有占位图片为真实图片（推荐 Unsplash 免费商用图）；确保所有链接可点击；在移动端和桌面端分别测试；运行 Lighthouse 性能检测。
•
自定义域名：Vercel 部署后可绑定自定义域名（如 yourname.dev），比默认的 vercel.app 子域名更专业。
•
图片懒加载：项目展示区的图片使用 loading="lazy"，首屏图片使用 fetchpriority="high"，显著提升加载速度。
•
Vercel 零配置优势：自动检测框架类型、配置构建命令、提供 HTTPS、全球 CDN 加速，对比 GitHub Pages 无需手动配置 DNS 和 CNAME。
部署参考：一个下午用 AI 搭建完整网站（含部署） | Day 8：用 AI 搭建并托管真实网站
— 本扩展知识库由网络公开资料整理，持续更新中 —