5天 Vibe Coding 出一个在线音乐分享空间应用是什么体验

5天 Vibe Coding 出一个在线音乐分享空间应用是什么体验

前言

起因是笔者近期喜欢上了钉钉个人签名打歌的爱好，所以经常也会在个签里推荐一些自己近期爱听的歌曲。时间久了自然而然会有同事问我，怎么不贴个链接直接给别人点击就能跳转过去听的，这样也方便如果有人好奇是什么歌还能顺便听一听，毕竟对于一首不熟悉的歌想让其他人特意跑到音乐平台搜索一下还挺麻烦的，而且还有可能听不了（懂的都懂）。说到此处，其实笔者也不是没见过有其他同事在个签里贴上网易云歌单的分享链接，但是吧这也有两个弊端，一是可能歌曲也有限制需要开会员，二是很多歌曲网易云也没版权呐，比如笔者近期推的比较多的都是周杰伦的歌曲，这不就刚好网易云全军覆没了。

当我准备打消这个念头的时候，一个想法突然跑到我的脑海里，在当下 Vibe Coding 的大热潮下，何不让我的两个"员工"（Cursor、Claude Code）帮我做一个分享音乐听歌的小站，音频可以自己上传或者用某视频网站的音频，毕竟笔者以前很多时候听一些没版权的歌都是去的视频网站听的，我相信也有不少读者也是这么做的吧👀，说干就干。

体验

目前笔者已经部署上线了一版，大致预览图如下：

主要功能定位上是解决音乐分享的痛点，希望在你需要把一首好听的歌曲分享给其他人听的时候，能够比较方便快捷的生成一个不受限制的分享链接，同时你可以邀请你的同伴一起来维护你们共同的音乐空间，把自己喜欢的歌曲加入其中。

如果屏幕前的读者有什么好的使用建议或者体验上不足的，欢迎提给笔者哦。

技术选型

考虑到是让我的 AI 员工们干，所以必然要选择 AI 友好的框架和语言，那么熟悉这个赛道的童鞋应该就知道我的技术选型是什么了：

• 框架：Nextjs
• CSS：Tailwindcss
• UI 组件：Shadcn ui

让 AI 开干之前第一件事就是，先找一个 NextJs 的模板，不然自己直接从零搭那也有点麻烦，直接找个现成的模板来改自然也是 AI 比较擅长且可控的方式，好在是 Nextjs 作为 React 的大热门，网上模板一大堆，如果对细节要求没那么高的话，直接在 Vercel 他们家的模板里选一个就好了：vercel.com/templates/n... 。

组件库 & 主题

然后就到主题和样式的选择了，毕竟做一个小站也要注意注意你的网站美观度，太丑了谁来都是掉头就走了。聊到这一点也是为什么 Shadcn ui 那么招 AI 应用喜欢的原因之一了，且让笔者给你娓娓道来。

传统组件库的弊端

对于传统的 antd、element 之类的组件库，他们都是包的一个大而全的 npm 包给到我们使用，这种方式好处在于无需管理组件代码结构和实现，直接导入就好了，但是吧，这类组件库也有个小弊端，那就是如果让 AI 员工来写的话，如果要他能感知到这个组件怎么用还需要把文档给他输入进去，并且如果想要 AI 帮你做一些定制修改也是比较麻烦的。

Shadcn UI 的优势

Shadcn UI 相比于传统组件库来说，他并不是以 npm 包的方式，而是你用到什么组件执行一下命令，然后它会直接把源码 add 到你的项目里，类似下面这种

这种方式好处在于可以比较方便的让 AI 读取你的组件代码，理解有什么功能以及怎么使用，同时如果你觉得它提供的颜色或者逻辑不好用，需要调整，也可以比较方便的让 AI 帮你进行修改，非常的好用，更多细节可以再搜索搜索相关资料，文章也还挺多的。

主题配置

说完了组件库部分，接下来也要说说关于整个网站的主题色配置了。也得益于 tailwindcss 有非常方便的统一主题自定义的能力以及一些社区好用的主题自定义工具，可以非常方便的选择自己喜欢的主题色搭配，然后一键应用到你的项目里。

shadcn ui 自定义主题工具:

• ZippyStarter：传送门
• tweakcn：传送门

网站部署

在选择部署平台的时候笔者也没有太多纠结，对于这种类型的小站，Vercel 和 Cloudflare 是非常适合的平台，免费额度内也是很够用的，不过相较于 Vercel，从一些博主的口碑来看，Cloudflare 的优先级似乎要高不少，不少博主也吐槽过 Vercel 的收费比较贵，此类文章：从 Vercel 迁移到 Cloudflare 一年省 xx 元等等文章倒是不少，最后笔者还是选择了 Cloudflare。

数据存储

上面也提到了笔者选择的部署平台是 Cloudfalre，故数据库和 OSS 这块也就直接用 Cloudflare 全套了。

• 数据库：Cloudflare D1
• OSS：Cloudflare R2
• 域名：Cloudflare 托管

除了域名，都是免费的，性价比很高，而且如果免费套餐不够用，那你直接开通 $5/月 的基础套餐就基本够用了，Cloudflare 提供了一整套的数据分析、监控和防护能力。

Vibe Coding

聊完前奏，接下来就该步入正题了，开始让你的员工干起活来。在员工选择上，对这个项目来说，核心负责人是 Cursor，其次是 Claude Code，两个大热门的 AI 员工，相信大家也都不陌生了。

Cursor Rules

在开始正式编码之前，你需要给你的员工定一定公司的规章制度，也就是 Cursor Rules，告诉你的员工应该遵循什么样的规范，以及输入一些上下文信息，这样的好处是，Cursor 会根据你定义的 Rule 编写出符合你要求的代码，这样对于 AI 生成代码的可控性会更高，也更能写出符合你自己要求的代码。

比如笔者的项目就是基于 Nextjs + Shadcn UI + Tailwindcss 的体系，那么也就需要给它定义一些笔者比较习惯的规范，当然，你也可以根据自己的需要，去找对应的 Rules，一个比较推荐的项目是：

• awesome-cursorrules： 传送门

它内置了很多常用的 Rules，你可以比较方便的找到自己项目所匹配的 Rules，即便不能完全匹配，你可以基于一些已有的 Rules 自行补充。

AI 生成需求文档 & 技术文档

经常使用 AI 生成代码时，大家可能经常会遇到 AI 写出来的代码功能实现上容易跑偏，要不就是这有 BUG 那有 BUG，要么就是有些功能没实现，这个时候如果你能预先生成好详尽的需求文档和技术文档，让 AI 根据文档来写代码，效果可能会更好哦。

笔者目前比较喜欢协作流程是：

1. 让 ChatGPT O1 来进行需求文档生成，你可以这么说：我想要实现一个 xx 功能，请根据我的功能描述，帮我生成一篇详细一点的需求文档。
2. 让 gemini pro 帮你根据 O1 生成的需求文档再生成详细的技术文档，记得要求他不得修改代码，仅生成技术文档即可。
3. 让 Claude4 来进行具体代码编写，也就是根据 gemini 生成的技术文档进行详细的代码生成。

为什么要这么分工呢，首先呢 O1 这个员工比较适合做一些创作型的工作，你把你的需求描述告诉它，它能帮你多考虑一些你没考虑到的功能设计，在它的协助下，你的需求文档会更加清晰，你也能更好的思考是不是自己还有什么功能也是想做上去的。然后就到了技术方案的生成，从笔者自身体验和社区大家的做法来看，Gemini 在做技术方案上效果不错，你让它帮你根据你的需求文档生成一份比较完备的技术方案，再进行代码生成，整体的代码质量也会更好。最后是为什么是让 Claude4 来写代码，相信大家也应该知道的，整个 AI Coding 界，应该还没有比 Claude4 更加出色的代码写手了吧。

这里提供一个笔者过程中的案例： 需求文档：

根据需求文档生成的技术文档：

也是事实证明这种方式整体的效果还是很不错的。

Claude Code

聊完了 Cursor ，这时也该介绍下我的另外一位员工了，大家也知道 Cursor 虽然好用，但每月也很容易限额，当你快乐的 Vibe Coding 一段时间后，突然弹出一个提示，你本月的额度已使用完毕，那你就只能带上痛苦面具，或者使用 Cursor Auto 模式，无法再享受 O1、Gemini、Claude4 这些高质量模型了。

那么一般面临这个情况，你要么咬咬牙用低档模型继续写，要么就自己上手撸，话说，AI 帮你写了整个项目，你自己上手撸你吃得消吗🥱。当然你也可以选择其他 AI IDE，目前市面上也有挺多对标 Cursor 的 IDE，比如 Windsurf、Trae、Kiro 等等，但是吧，从整体社区大家的追捧度来看，显然 Claude Code 的呼声更高，毕竟 Claude4 的编码能力大家也有目共睹，CC 在使用上肯定更加得心易手。

不过有个小弊端在于，CC（Claude Code）是一个终端工具，也就是说，如果不习惯使用终端的用户可能会有点不适应，但是话又说回来， CC 的操作命令也没几个，你的主要工作也还是在写提示词，其实也还好。还有有一种比较好的结合方式是 Cursor + CC，也就是用 Cursor 的界面，搭配 CC 进行 AI 出码，关于这块也有一些博主开发了对应的插件，直接可视化了 CC 的终端操作，你可以理解为把右边原本 Cursor 的 AI 界面换成了 CC 的。

比如这个插件：传送门

Claude Code API KEY 获取

聊完了功效，接下来就得给读者们提供一个怎么获取可用 API KEY 的方法了。

这里笔者也是偶然看到其他博主推荐的一个平台，注册即可送 $100 的额度，亲测可用，而且每天登录还送额度，邀请好友也能获取额度，白嫖党福利。

地址在这：传送门

然后具体的使用方法，你进去网站有个傻瓜式教程，按照步骤来即可。

开干！

在介绍完我的"员工们"和"员工管理制度"之后，接下来就是正式 Vibe Coding 的时刻了。

落地页

作为一个网页应用，一个很重的点在于我们需要给我们的网站提供一个落地页，方便不了解的用户能快速理解网站的定位是什么，产品的介绍，如何上手体验，核心功能有哪些等等。这里笔者也是基于网上找的那个模板里的落地页进行了修改，把具体的文案和部分区块做了调整。

一个比较好的方式就是，统一让你的 AI 员工们来帮你做掉，这也是 AI 所擅长的领域，包括多语言部分的内容，反正笔者的落地页内容都是 AI 写的，我只需要提供给他我的网站是做什么的，核心功能是什么，产品理念的之类的，以一个产品经理的角色给它提要求，它基本完成的也很好。

功能开发

笔者按照自己的预期，第一版 MVP 版本应该具备两个核心页面：

1. 音乐空间：支持多个音乐空间，以及自己有权限的其他人的空间
2. 空间详情：音乐搜索、音乐添加、音乐播控能力、权限管理、编辑能力等

基于这两个目标，直接按照笔者前面提到的流程，需求 -> 技术文档 -> 代码生成，一个个步骤来，当然其中也免不了你需要人工去 Check 下功能是否 OK，以及需要跟 AI 进行多轮交互。

除此之外，一些基础的通用能力也是要提供的

1. 多语言
2. 黑暗主题 & 白天主题

对于多语言来说，可能你面向的人群不一定是国内用户，也可能会有国外用户会来访问，这个时候支持多语言就很有必要了，海外用户的体验也是要考虑进来的。对于第二点，不同用户喜欢的风格可能不一样，比如博主就更加喜欢黑暗模式的网页，如果说一个网站提供了暗黑模式，那么笔者的访问体验也会有所上升。

话又说回来，支持这两点功能其实也很简单，tailwindcss + AI + i18n 支持起来非常方便，你只需要几句话 AI 就帮你做好了，何乐而不为呢🐒。

UI 风格调整

其实最开始是直接用了 Shadcn UI 的一套比较通用的样式组件，但是因为笔者一般手机端用酷狗概念版听歌比较多，所以很喜欢酷狗概念版这种拟态的播控风格，所以带着这个目标，笔者在探索过程中也发现了一个新的宝藏网站，我找到了我需要的拟态风格组件，然后我把样式丢给 AI，让他把我的现有 UI 组件全部改成对应风格的组件，当然 AI 完成的也是很不错的。

宝藏 UI 组件网站：传送门

网站 Logo

这里笔者直接用的可灵帮我生成的，你可以自己脑暴出自己喜欢的 Logo 大致结构，然后直接用可灵集成的 deepseek 帮你写好提示词，然后愉快的抽卡（出图）就好了，不得不说，可灵对图里需要出现文字的支持效果还是很不错的，整体体验下来，生成的效果也是很符合笔者审美的。

如果觉得不是很满意可以多调几次提示词，总能 roll 出你喜欢的。

总结

整体开发一个完整产品下来，感觉在各种 AI 工具的加持下，做出一个 MVP 版本的应用效率非常高，能比较快速的来做想法验证。市面上各种 AI 工具层出不穷，可选项非常多，很方便就能找到你需要的工具。

• AI Coding：Cursor、Claude Code、Trae、Kiro、Windsurf 等等太多了
• AI 出图：可灵、即梦
• AI 图片编辑：Canva

如果说你心里也一直存在一个独立开发的梦，那么当下也许是实现梦想最好的时代，在 AI 的加持下，有想法、敢动手，那么你的能量也将无限放大。

The future is here!!! 🐤🕊⛷