Vibe Coding作品合集

作品一：搭建个人作品集网站​

​

个人作品集网站是展示你能力的最好方式 。​

无论你是找工作 、接私活，还是想在社交媒体上分享你的作品，一个漂亮的作品集网站都能给你加分 。​

​

而且，这个项目本身就是你的第一个作品，可以放到作品集里展示，是不是很有意思？​

这个网站要包含几个部分：​

•

个人介绍（ 姓名 、头像 、简介 、联系方式）​

•

技能展示（你会哪些技术）​

•

项目展示（你做过的项目 ，包括截图 、描述 、链接）​

•

界面要做响应式设计，在手机和电脑上都能正常显示。​

​

​

​

✍️

技术选型上，我们使用 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（ 动画效果）​

​

## 项目结构​

​

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

4） 写 AGENTS.md 文件​

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

​

代码块​

Markdown

# 个人作品集网站开发指令​

​

## 项目概述​

使用 React + TypeScript + Tailwind CSS 开发的个人作品集网站。​

​

## 开发规范​

- 使用函数式组件 + Hooks​

- 使用 Tailwind CSS 编写样式​

- 组件要可复用​

- 代码要有注释​

​

## 设计要求​

- 深色主题（ 背景 #0a0a0a，文字 #ffffff）​

- 使用渐变色作为强调色​

- 添加平滑的滚动动画​

- 确保移动端适配​

​

## 注意事项​

​

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

5）开始开发​

有了这三个文档，就可以开始开发了 。打开 Cursor 等 AI 代码编辑器，开始和 AI 对话。第一个提示词是初始化项目 ：​

​

代码块​

Plain Text

​

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

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

​

代码块​

Plain Text

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

​

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

​

代码块​

Plain Text

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

​

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

6）部署上线​

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

•

把代码推送到 GitHub​

•

登录 Vercel ，导入 GitHub 仓库​

•

点击部署，等待完成​

•

获得你的网站链接​

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

​

作品二：Markdown笔记​

​

做一个 Markdown 笔记应用可以让你学习如何处理文本编辑 、实时预览等功能。​

​

​

​

​

​

40%

​

​

​

​

60%

​

​

这个项目要实现一个完整的 Markdown 笔记应用 。用户可以创建笔记，输入标题和内容 。​

•

界面采用左右分栏，左侧是编辑器，右侧实时预览渲染后的效果 。​

•

左侧还要显示笔记列表，支持搜索 。​

•

数据保存在LocalStorage ，支持删除笔记 。​

•

代码块要有语法高亮，这样看起来更专业。​

​

🎈

技术选型上前端用 React + TypeScript + Vite ，Markdown 解析用 react-markdown ，代码高亮用react-syntax-highlighter ，样式用 Tailwind CSS ，数据存储用 LocalStorage。​

​

开发步骤​

1） 实现基础布局​

​

🔔

开发的第一步是实现基础布局，创建左右分栏的布局，左侧是编辑器，右侧是预览区 。这个布局用 Tailwind CSS 的 Flex 或 Grid 很容易实现。​

​

​

代码块​

Plain Text

创建左右分栏布局，左侧是 Markdown 编辑器（ 大文本框），右侧是预览区 。使用 Tailwind CSS 实现响应式布局。​

​

AI 会创建一个美观的分栏布局，在电脑上是左右分栏，在手机上会自动变成上下布局。​

2）集成 Markdown 解析​

然后集成 Markdown 解析 。使用 react-markdown 这个库，可以很方便地将 Markdown 文本转换为HTML 。你只需要把文本传给这个组件， 它就会自动渲染。​

告诉 AI：​

​

代码块​

Plain Text

​

这个提示词很简洁，但 AI 知道要做什么 。它会安装 react-markdown 库，导入组件，然后在预览区使用 。​

3） 实现实时预览​

接下来实现实时预览 。这个功能的关键是监听编辑器的输入变化，实时更新预览区 。当用户在左侧编辑时，右侧要同步显示渲染后的效果。​

告诉 AI：​

​

代码块​

Plain Text

监听编辑器的输入变化，实时更新预览区 。用户在左侧编辑时，右侧同步显示 Markdown 渲染后的效果。​

​

这个功能用 React 的状态管理很容易实现 。AI 会把编辑器的内容存储在 state 中，然后传给预览组件，每次内容变化都会自动更新预览。​

4）添加代码高亮​

代码高亮也很重要，让代码块看起来更专业 。告诉 AI：​

​

代码块​

Plain Text

配置 react-syntax-highlighter，让代码块支持语法高亮 。支持多种编程语言， 比如JavaScript、Python、Java 等。​

​

AI 会配置 react-syntax-highlighter， 当 Markdown 中有代码块时，会用语法高亮来渲染，不同的语法元素会显示不同的颜色。​

5）添加笔记管理功能​

最后添加笔记管理功能 。告诉 AI：​

​

代码块​

Plain Text

实现笔记管理功能：​

- 左侧添加笔记列表，显示所有笔记的标题​

- 点击笔记可以切换到该笔记​

​

这个提示词包含了所有的功能要求，AI 会一次性实现所有功能。​

关键技术点​

这个项目的关键是实现 Markdown 的实时预览 。当用户在左侧编辑时，右侧要实时显示渲染后的效果 。这个功能用 react-markdown 库可以很容易实现。​

​

作品三：AI情绪治愈平台​

​

🔔

•

这篇文章记录的是我用 WorkBuddy + CloudBase 在3天内从0做出​

《MoodWave——基于AI的情绪分析与可视化音乐治愈平台》的全过程。​

​

一、背景：从灵感到MoodWave​

​

​

​

​

50%

​

​

​

​

50%

​

​

MoodWave的起点其实很朴素：身边太多人在焦虑，但大家不愿意说出来。于是MoodWave的核心idea定了下来：​

​

🎃

•

AI 情绪日记：用低压力的方式记录今天发生了什么​

•

可视化音乐治愈：让情绪不只是文字，而是能听见、能看见​

•

数据分析中心：把零散情绪变成趋势、热力图和高光时刻​

•

解忧角社区：用匿名、轻社交的方式获得共鸣，而不是制造压力​

​

二、调研阶段的WorkBuddy实战​

2.1 情绪雷达：用WorkBuddy抓取全网情绪数据​

在正式写代码前，我先做了一轮“情绪雷达”。​

​

"帮我抓取小红书上大学生情绪、考研焦虑、期末压力等相关内容，整理成用户痛点和产品机会。"​

​

​

​

​

​

50%

​

​

​

​

50%

​

​

WorkBuddy 自动完成了关键词拆解、页面抓取、内容清洗和分类汇总，最后整理出 88 条真实用户情绪数据。它不是随便列几个“年轻人很焦虑”的空泛结论，而是把帖子按场景分成了几类：考研焦虑、职场压力、情感困惑、精神内耗。​

​

🎃

这个阶段给了我一个很重要的判断：MoodWave 不能做成传统心理健康App那种“严肃问诊”的感觉。很多用户不是想被诊断，他们只是想有一个不评判的地方，轻轻放一下今天的情绪。​

​

2.2 问卷调研：WorkBuddy + 腾讯问卷 MCP​

线上数据之后，我又用腾讯问卷 MCP 做了第二轮验证。​

这次我直接让 WorkBuddy 生成问卷结构：​

​

"根据 MoodWave 的产品方向，创建一份面向大学生的情绪健康和音乐治愈调研问卷，控制在20题以内，加入防刷和红包回收策略。"​

​

它帮我生成了20道题，并把问题分成了情绪频率、压力来源、记录偏好、音乐治愈接受度、功能吸引力几个模块。最后问卷回收了108份有效数据。​

几个关键结论直接影响了后面的产品设计：​

•

45.7% 用户希望首页是“干净的、让人平静的治愈界面”​

•

67.7% 用户对音乐治愈产品持正面态度​

•

46.7% 用户最想要“一键快速记录心情”​

•

38.1% 用户对情绪数据可视化感兴趣​

•

37.1% 用户希望有一个像朋友一样倾听的 AI 聊天​

所以 MoodWave 的优先级很快就清晰了：先做快速记录，再做 AI 陪伴和音乐可视化，社区要轻，不要做成信息过载的论坛。​

三、技术架构总览​

以下是 MoodWave 的完整技术架构：​

​

代码块​

JavaScript

用户浏览器 / PWA​

├─ 前端：Next.js 14 + TypeScript​

│ ├─ Tailwind CSS + Shadcn/UI + Framer Motion​

│ └─ Tone.js + Canvas API（音乐可视化）、Recharts（图表）​

├─ Nginx 反向代理​

├─ 后端：Python FastAPI + SQLModel​

​

关键架构决策：​

•

为什么用 Python FastAPI 而不是 Next.js API Routes？ — Python 生态对 AI/数据采集（Hermes Agent）更友好，DeepSeek SDK 原生支持​

•

为什么用 PostgreSQL 而不是 SQLite？ — Docker 容器重启后 SQLite 数据丢失，PostgreSQL 命名卷持久化是生产环境的底线​

•

为什么前端用 Next.js 而不是纯 HTML？ — App Router 的路由系统、SSR/SSG、PWA 支持、Vercel 一键部署，对 Vibe Coding 极度友好​

​

作品四：AI聊天助手​

AI 聊天助手是最基础也是最实用的 AI 应用 。​

​

💤

通过这个项目 ，你可以学习如何用 Vibe Coding 的方式快速开发一个完整的 AI 对话应用 。​

​

这个项目要实现一个完整的聊天界面 ，用户可以输入问题，AI 给出回答 。要支持多轮对话，AI 能记住之前说过的内容，这样对话才连贯 。​

为了更好的体验​

​

•

AI 的回答要逐字显示，而不是一次性全部出现，这叫流式输出 。​

•

对话记录要保存在本地，刷新页面也不会丢失 。另外，还需要一个清空对话的功能，方便开始新的话题。​

​

​

​

​

​

50%

​

​

​

​

50%

​

​

​

🔷

技术选型​

我们使用 React + TypeScript + Vite 作为前端框架，Tailwind CSS 来写样式 。​

AI 能力通过调用大模型 API 实现，对话历史用 LocalStorage 保存，AI 的回答用 react-markdown 来渲染，这样可以支持代码高亮等格式。​

​

开发步骤​

1）准备工作​

开发的第一步是准备工作 。你需要获取 API Key 来调用 AI 模型 。访问 智谱 AI 开放平台 ，进入用户控制台，点击 API Key 就可以获取 。​

智谱 AI 提供的 GLM 模型效果不错，而且有免费额度，适合学习使用 。​

​

​

2） 写需求文档​

有了 API Key，就可以开始写需求文档了。创建 PRD.md 文件， 明确你要做什么：​

​

代码块​

Markdown

# AI 聊天助手 PRD​

​

## 核心功能​

1. 用户可以输入问题，AI 给出回答​

​

这个文档清楚地说明了要实现什么功能，界面是什么样的。​

3） 写技术设计文档​

然后写技术设计文档 TECH_DESIGN.md ：​

​

​

​

代码块​

Markdown

# 技术设计​

​

这个文档说明了用什么技术，数据结构是什么样的，API 怎么调用 。​

4） 写 AGENTS.md 文件​

接着创建 AGENTS.md 文件，告诉 AI 开发规范：​

​

代码块​

Markdown

# AI 聊天助手开发指令​

​

## 项目概述​

​

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

5）和 AI 对话开发​

有了这三个文档，就可以开始和 AI 对话开发了 。打开 Cursor ，把这 3 个文档放在项目根目录。第一步是初始化项目 ：​

​

代码块​

Plain Text

请根据 PRD.md、TECH_DESIGN.md 和 AGENTS.md 的要求，初始化一个 React + TypeScript + Vite 项目 ，并安装必要的依赖：Tailwind CSS、react-markdown、react-syntax-​

highlighter。​

​

这个提示词告诉 AI 要创建什么项目 ，安装哪些依赖 。AI 会读取这三个文档，然后按照要求创建项目结构，安装依赖，配置 Tailwind CSS。​

第二步是创建数据类型和 API 封装：​

​

代码块​

Plain Text

创建 types.ts 文件，定义 Message 类型 。然后创建 api.ts 文件，封装智谱 AI API 调用 ，要支持流式输出，参数从环境变量读取。​

​

这一步是为后续开发打基础，把数据结构和 API 调用都封装好，后面用起来就很方便。第三步是实现聊天界面：​

​

代码块​

Plain Text

创建 ChatInterface 组件，实现聊天界面 。要求：​

1. 消息列表显示在上方 ，用户消息在右边，AI 消息在左边​

2. 底部有输入框和发送按钮​

3. 使用 Tailwind CSS 实现类似微信的聊天界面样式​

4. 消息要支持 Markdown 渲染​

​

这个提示词说明了界面的布局和样式要求 。AI 会创建完整的聊天界面组件。第四步是实现对话功能：​

​

代码块​

Plain Text

实现发送消息的功能：​

1. 用户输入消息后，添加到消息列表​

2. 调用 API 获取 AI 回答​

3. 使用流式输出，逐字显示 AI 的回答​

​

这个提示词包含了对话功能的所有要求 。流式输出是关键， 它让 AI 的回答像打字一样逐字出现，用户体验会好很多 。多轮对话也很重要，要把之前的对话历史一起发送给 API ，这样 AI 才能记住之前说过的内容。​

第五步是添加数据持久化：​

​

代码块​

Plain Text

使用 LocalStorage 保存对话历史：​

1. 每次对话更新后自动保存​

2. 页面加载时读取历史记录​

3. 添加"清空对话"按钮，清除历史记录​

​

这样用户刷新页面后，之前的对话还在，不会丢失。第六步是优化用户体验：​

​

代码块​

Plain Text

优化用户体验：​

​

这些细节虽然小 ，但能大幅提升用户体验。​

​

开发技巧​

在开发过程中，有几个技巧可以让你更高效 。首先，不要一次性让 AI 实现所有功能，而是分成多个小步骤，每完成一步就测试一下 。这样即使出问题，也容易定位和修复。​

其次，在对话时要给 AI 提供足够的上下文 。明确告诉它要实现什么功能 、有什么具体要求 、要遵循什么规范 。上下文越清晰，AI 生成的代码质量就越高。​

如果代码出现问题，记得把完整的错误信息发给 AI ，让它帮你分析和修复 。不要只说“代码报错了”，而是要把具体的错误信息粘贴给它。​

扩展思路​

基础版完成后，你可以继续扩展功能。​

•

比如添加系统提示词设置，让 AI 扮演不同角色（ 比如编程助手 、写作助手 、心理咨询师等）；​

•

支持多个对话会话管理，可以同时进行多个话题的对话；​

•

添加语音输入功能，用语音和 AI 对话；​

•

集成图片识别功能，让AI 可以看图回答问题；​

•

支持导出对话记录，保存重要的对话内容。​