作品一：搭建个人作品集网站
个人作品集网站是展示你能力的最好方式 。
无论你是找工作 、接私活，还是想在社交媒体上分享你的作品，一个漂亮的作品集网站都能给你加分 。
而且，这个项目本身就是你的第一个作品，可以放到作品集里展示，是不是很有意思？
这个网站要包含几个部分：
•
个人介绍（ 姓名 、头像 、简介 、联系方式）
•
技能展示（你会哪些技术）
•
项目展示（你做过的项目 ，包括截图 、描述 、链接）
•
界面要做响应式设计，在手机和电脑上都能正常显示。
✍️
技术选型上，我们使用 React + TypeScript + Vite 作为前端框架，Tailwind CSS 来写样式，最后部署到Vercel 上线 。这套技术栈很现代，也是目前最流行的前端开发方案。
开发步骤
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
# 个人作品集网站开发指令
## 项目概述
这个文件是给 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 会自动检测你的项目类型，配置构建命令，非常智能 。部署完成后，你就有了一个可以访问的网站链接，可以分享给别人看。
✍️
扩展思路