Vibe Coding 个人工具开发

你好，我是鱼皮。

在上一篇文章中，我们学习了完整的 5 步开发流程。现在，是时候把这套流程真正用起来了！

这篇文章，我会带你做 5 个实用的个人工具项目：个人作品集网站、待办事项应用（进阶版）、Markdown 笔记应用、番茄钟计时器、天气查询应用。

需要先说明的是，本节教程更多的是做一个思路和项目开发流程的指导，目的是引导大家学会使用 Vibe Coding 开发项目的方法，需要大家自行动手实践。如果你需要更完整的 Vibe Coding 图文和视频教程，可以看看鱼皮的原创项目实战部分。

下面这些项目都是我精心挑选的，实用性强，做出来真的能用，不是玩具。难度适中，适合新手练手，不会太难也不会太简单。技术上涵盖了前端、数据存储、API 调用等常见场景，完成基础版后还可以继续添加新功能。更重要的是，这些项目都可以放到你的作品集里，向别人展示你的能力。

每个项目我都会提供完整的开发指南，包括需求分析、技术选型、开发步骤和扩展思路。你可以根据自己的兴趣选择项目，不需要按顺序完成。

一、项目实战 - 个人作品集网站

个人作品集网站是展示你能力的最好方式。无论你是找工作、接私活，还是想在社交媒体上分享你的作品，一个漂亮的作品集网站都能给你加分。而且，这个项目本身就是你的第一个作品，可以放到作品集里展示，是不是很有意思？

这个网站要包含几个部分：个人介绍（姓名、头像、简介、联系方式）、技能展示（你会哪些技术）、项目展示（你做过的项目，包括截图、描述、链接）。界面要做响应式设计，在手机和电脑上都能正常显示。

技术选型上，我们使用 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
    Footer.tsx
  data/
    projects.ts
    skills.ts
  App.tsx
  main.tsx

## 数据管理
- 项目数据和技能数据存储在 TypeScript 文件中
- 使用数组存储，方便后续添加和修改

这个文档的作用是让 AI 知道你要用什么技术，项目结构是什么样的。

4）写 AGENTS.md 文件

然后创建 AGENTS.md 文件，告诉 AI 开发规范：

▼
markdown
复制代码
# 个人作品集网站开发指令

## 项目概述
使用 React + TypeScript + Tailwind CSS 开发的个人作品集网站。

## 开发规范
- 使用函数式组件 + Hooks
- 使用 Tailwind CSS 编写样式
- 组件要可复用
- 代码要有注释

## 设计要求
- 深色主题（背景 #0a0a0a，文字 #ffffff）
- 使用渐变色作为强调色
- 添加平滑的滚动动画
- 确保移动端适配

## 注意事项
- 保持设计简洁，不要过度设计
- 性能优化：图片使用懒加载
- 确保所有链接可点击

这个文件是给 AI 的开发规范，让它知道代码要怎么写，设计要什么风格。

5）开始开发

有了这三个文档，就可以开始开发了。打开 Cursor 等 AI 代码编辑器，开始和 AI 对话。

第一个提示词是初始化项目：

▼
text
复制代码
请根据 PRD.md、TECH_DESIGN.md 和 AGENTS.md 的要求，初始化一个 React + TypeScript + Vite 项目，并安装 Tailwind CSS。

这个提示词很简单，但包含了所有必要的信息。AI 会读取这三个文档，然后按照要求创建项目结构，安装依赖，配置 Tailwind CSS。

然后逐步实现每个组件。比如创建 Hero 组件：

▼
text
复制代码
创建 Hero 组件，包含大标题、简介和头像。使用 Tailwind CSS 实现深色主题和渐变色效果。

这个提示词告诉 AI 要创建什么组件，包含哪些内容，用什么技术实现。AI 会生成完整的组件代码。

接着创建 Projects 组件：

▼
text
复制代码
创建 Projects 组件，展示项目列表。每个项目卡片包含截图、标题、描述和技术栈标签。

就这样一步一步，完成整个网站。每完成一个组件，就在浏览器中预览一下效果，确保符合预期。

6）部署上线

开发完成后，就可以部署上线了。部署的流程很简单：

• 把代码推送到 GitHub
• 登录 Vercel，导入 GitHub 仓库
• 点击部署，等待完成
• 获得你的网站链接

Vercel 会自动检测你的项目类型，配置构建命令，非常智能。部署完成后，你就有了一个可以访问的网站链接，可以分享给别人看。

扩展思路

基础版完成后，你还可以继续扩展功能。比如添加博客功能，写文章分享你的学习经验；添加深色/浅色主题切换，让用户可以选择喜欢的主题；支持多语言，吸引国际用户；添加访问统计，了解网站访问情况；甚至可以加个留言板功能，让访客可以给你留言。

二、项目实战 - 待办事项应用（进阶版）

完成了作品集网站后，让我们来做一个功能更复杂的项目。在快速上手部分，我们做过一个简单的待办事项应用，只有最基本的添加和删除功能。现在，让我们做一个功能更强大的版本，学习如何处理更复杂的业务逻辑。

这个进阶版的功能要丰富得多。添加待办事项时，除了标题，还可以设置描述、截