V2EX 09月29日 10:25
Opus转MP3工具上线,分享开发细节
index_new5.html
../../../zaker_core/zaker_tpl_static/wap/tpl_guoji1.html

 

作者分享了从零开始构建一个Opus转MP3在线工具(opustomp3.io)的完整过程。这包括了制定极简上线路线、通过AI辅助选定“opus to mp3”这一核心关键词、购买域名并配置DNS、深入分析用户搜索意图以及侦查竞争对手。在技术实现上,作者利用Next.js、Claude Code和Gemini等AI工具辅助前端开发和核心转换功能的实现,并采用了WebAssembly技术。此外,还介绍了Logo制作、Vercel部署、接入GSC和GA、以及通过FAQ和Sitemap进行SEO优化的细节。整个过程强调了AI在降低开发门槛和提升效率方面的作用。

🚀 **精准定位与极简路线**:作者首先制定了一条“极简且清晰”的行动路线,专注于核心功能,使用Next.js,只做英文站,并对接GSC和GA以获取流量反馈,目标是快速上线并获取初步流量数据。

💡 **AI驱动的选词与域名决策**:在选词环节,作者借助AI分析公众号分享的关键词,最终确定了“opus to mp3”作为目标。域名选择也通过AI辅助,最终购买了opustomp3.io,并通过Cloudflare管理DNS。

🔍 **深入的用户意图与竞品分析**:在完成域名购买后,作者详细研究了用户搜索“opus to mp3”的意图,并通过Google搜索分析排名第一的竞争对手(cloudconvert)的功能和用户体验,寻找差异化机会。

💻 **AI辅助的开发与技术选型**:前端开发主要使用Claude Code,并利用AI优化项目指南。核心的Opus转MP3转换功能通过AI推荐并最终采用WebAssembly技术实现,展示了AI在代码生成和技术方案选择上的能力。

✨ **细节优化与SEO布局**:Logo制作由Gemini完成,网站部署至Vercel。为提升SEO效果,作者还通过AI生成了FAQ内容,并由Claude Code生成了sitemap,确保网站的可见性和可访问性。

最近在一个周六做好了一个 opus 转 mp3 的工具站。
地址是 https://opustomp3.io
大家有兴趣的可以试一下,右下角可以提反馈建议,有问题我会改进。
接下来分享一下我的一些行动细节。

分享我的上站流程

1.制定我的行动路线

为了能够快速上站,所以需要一条极简并且清晰的行动路线。经过 AI 优化好以后的行动路线如下:

目标:

2. 选词

找词这块目前还是我的短板,所以这次我直接从别人那里拿的词。来自于这个公众号
出海工具网站关键词分享 4- [ add text to gif ]
然后我把这个公众号里分享的这几个词全部扔给 AI ,让它帮我分析做哪一个词好。AI 的最终结论:

于是我最终敲定选择做 opus to mp3 这个词

3. 买域名

我打开 query.domains 这个网站,这是一个查域名的网站。然后输入我的词,把结果截图给 AI 。

于是最终买了 opustomp3.io 这个域名。
另外买域名有很多注册商可以选择,我也发给了 AI 让它帮我选择

最终在 porkbun 上买了这个域名。
买完域名以后就立刻把这个域名的域名服务器改成了 cloudflare ,这个过程我就不赘述了。

4. 了解用户意图

买完域名以后我开始了解用户搜索这个词的意图。

5. 侦查同行

我在 google 搜索了一下这个词,排名第一的网站是 cloudconvert 的一个内页。
然后我就想在它的页面上测试一个这个 opsu 文件转 mp3 文件的功能,需要一个 opus 文件。
于是我又开始问 AI

但是 AI 提供给我的这几个网站我都没能下载到 opus 文件,但是我在搜索的时候无意中看到有人用 yt-dlp 将 youtube 视频的音频下载成 opus 格式

最终成功获得了可以用来测试的 opus 文件。然后试了一下 cloudconvert 的转换功能,确实很流畅,又好又快,转换完以后还会自动播放。
不过没关系,我还是可以继续做。已下是 AI 的分析:

6. 开发前端页面

这里主要是用 claude code 来开发。
首先用/init 命令初始化一个项目指南,会生成一个 CLAUDE.md 文件。然后把我的要求告诉 cc ,要求它优化这个 CLAUDE.md 文件。

接着就是一顿开发。先把前端页面开发好了。

其实 cc 还是有许多技巧的,我现在也只是掌握了部分,后面还需要好好学习一下。
这么贵的工具,不好好利用的话真的可惜了。

7. 实现转换功能

还是问 AI

AI 都这样说了,那我当然选择方案 2 啦。
于是把 gemini 的话复制给 cc ,又是哐哐一顿开发。
最终使用 WebAssembly 技术,成功实现了转换功能。

8. 制作 logo

设计是我的短板。一开始我问了 AI ,但是它给我推荐的几个工具,比如 Microsoft Designer ,我试了一下,感觉都不好用。

最终还是用 gemini 的 nano banana 来做,gemini 我永远的神!

9. 部署到 vercel

这一步很简单,不赘述了。主要看 AI 给我的下一步指导:

10. 接入 gsc 和 ga

接入 gsc 挺简单的,也不赘述了。接入 ga 用了一下 @next/third-parties 这个库,也不赘述了。

11. 添加 FAQ,进行内容填充

这一步主要是为了 SEO 。我先自己想了几个问题,让 cc 帮我完成,接着截图给 gemini 帮我完成优化。

12. 生成 sitemap

这一步也很简单,我是让 cc 帮我搞的。

至此,我的网站上线工作已经基本全部完成。

原文链接

https://dreamfree.xyz/other/dadong-weekly-20.html
https://mp.weixin.qq.com/s/va3uIaAeBSSBQh1aMvOhpw

Fish AI Reader

Fish AI Reader

AI辅助创作,多种专业模板,深度分析,高质量内容生成。从观点提取到深度思考,FishAI为您提供全方位的创作支持。新版本引入自定义参数,让您的创作更加个性化和精准。

FishAI

FishAI

鱼阅,AI 时代的下一个智能信息助手,助你摆脱信息焦虑

联系邮箱 441953276@qq.com

相关标签

Opus转MP3 Opus to MP3 AI工具 AI Tools Next.js WebAssembly 网站开发 Website Development SEO Claude Code Gemini
相关文章