第三次 vibe coding，我做了個終端風格的音樂播放器
整理版優先睇
第三次 vibe coding，作者用 Electron + React + TypeScript 做了個終端風格音樂播放器，整合 AI 搜歌、TTS 語音提醒同番茄鍾
呢篇文章係作者可樂嘅第三次 vibe coding 經驗分享。佢之前做過 Web 應用同小程序，今次決定跳脱瀏覽器，用 Electron + React + TypeScript 整一個桌面端嘅音樂播放器。佢想解決嘅核心問題係：開發者點樣可以喺寫 code 嘅過程中，全程唔使離開鍵盤，就享受到音樂、語音提醒同時間管理工具嘅服務。
結果係佢用咗 5 日、12 次提交，就做出一個名叫「可樂音樂（Kele Music）」嘅終端風格播放器。功能包括 AI 搜歌（接入 DeepSeek 同網易雲 API）、終端 UI 界面、頻譜可視化、AI 聊天面板、番茄鍾同 TTS 語音提醒。佢強調呢個播放器唔係花哨嘅產品，而係一個專注工作流嘅工具箱——歌詞同步、頻譜跳動、語音報時，全部自動化，令你可以更專心寫 code。
文章仲公開咗個架構圖，清楚分出主進程（調 API、AI 推理、TTS）、渲染進程（UI 顯示、音頻播放、頻譜、AI 面板、番茄鍾）同三個外部服務。佢分享咗開發過程中嘅 AI 高光時刻（頻譜組件一次生成）同踩坑經驗（參數傳錯、狀態管理），並建議多用 plan 模式、及時 git 提交、先分析原因再逐步排錯。整體嚟講，呢篇文對想試 vibe coding 同做桌面開發工具嘅人好有參考價值。
- 作者用 5 日完成一個功能完整嘅桌面音樂播放器，證明 vibe coding 可以快速疊代出實用工具。
- 核心方法：先設計架構圖（主進程 + 渲染進程 + 外部服務），再讓 AI 按圖生成骨架，節省大量前期設計時間。
- 同傳統開發嘅差異：開發者只需用自然語言描述需求，AI 負責生成程式碼（例如頻譜組件一次性成功），減少手寫代碼時間。
- 啟發：vibe coding 唔係萬能，遇到錯誤要冷靜分析原因（如 TTS 參數傳錯），並善用 plan 模式同版本控制。
- 可行動點：如果想自製類似工具，可以參考文中嘅架構圖同技術棧（Electron + React + TypeScript + 網易雲 API + DeepSeek + 小米 TTS）。
一個開發者嘅日常打開方式
打開電腦，啓動可樂音樂。
唔使鼠標點來點去
，右邊嘅 AI 面板掛住，打字就得。例如「來點周杰倫嘅歌。」
AI 搜到結果，自動播放
。歌詞喺右邊同步滾動，屏幕頂部嘅
頻譜柱跟着節奏跳
。寫代碼寫累了，敲一句：「推薦幾首適合寫代碼聽嘅純音樂。」AI 再搜、再播。全程手唔使離開鍵盤。
右下角掛着番茄鍾，
番茄鍾 25 分鐘倒計時
。到了，
TTS 語音提醒
：「休息一下吧，眼睛都應該歇嚇啦。」順便彈出飲水提醒，自動放一首輕音樂。
一張圖，AI 幫你搭出骨架
作者公開咗一個架構圖，清楚分出
主進程
、
渲染進程
同
外部服務
三大部分。
- 主進程：負責調用網易雲 API 搜歌、調 DeepSeek 做 AI 推理、調小米 TTS 合成語音。
- 渲染進程：展示終端風格 UI、音頻播放、頻譜可視化、AI 聊天面板、番茄鍾。
- 外部服務：網易雲音樂（內容來源）、DeepSeek（AI 大腦）、小米 TTS（語音輸出）。
佢建議直接將呢張圖俾 AI，加上
「用 Electron + React + TypeScript 實現，UI 風格為終端模擬器」
，AI 就能幫你搭出項目骨架。
5 天 12 次提交：AI 高光與踩坑
從 init 到打 tag 發佈，剛好 5 日。AI 高光時刻：
頻譜可視化組件
，用自然語言描述需求，AI 一次性生成咗正確嘅 Canvas 代碼——
一次性生成
、
漸變柱狀圖
、
平滑插值
、
自適應縮放
。
踩坑都冇少：
AI 重複回覆
修咗好幾次、
TTS 參數傳錯
導致失效、
狀態機打架
。因為自己冇相關知識儲備，只能
CV報錯
、描述錯誤情景，交俾 AI 幫手排錯。
即刻開源，期待交流
作者話項目估計會喺呢星期
開源
，歡迎大家去玩同吐槽。開源之後可以一齊改進，或者參考佢個架構做自己嘅版本。
Hi，我係可樂。
呢個係我第三個 vibe coding 項目。第一個係 Web 應用，第二個係小程序。今次我唔想喺瀏覽器入面玩——我整咗個桌面端。
一個生到終端樣嘅音樂播放器。
暗色底、等闊字、[SYS][AI] 日誌喺度滾。唔明嘅人以為你喺度打 code，其實你喺度聽歌。
項目叫 可樂音樂（Kele Music），v0.1.0。
佢做到啲乜？
一個開發者嘅日常打開方式係咁嘅：
打開電腦，啟動可樂音樂。唔使鼠標㩒來㩒去，右邊嘅 AI 面板掛喺度，打字就得。
「嚟啲周杰倫嘅歌。」
AI 搜到結果，自動播放。歌詞喺右邊同步滾動，屏幕頂部嘅頻譜柱跟住節奏跳。
寫 code 寫到攰，打一句：「推薦幾首適合寫 code 聽嘅純音樂。」
AI 再搜、再播。全程手唔使離開鍵盤。
右下角掛住番茄鐘，25 分鐘倒數。夠鐘，TTS 語音提醒：「休息嚇啦，對眼都應該唞嚇。」順便彈出飲水提醒，自動播一首輕音樂。
呢個唔係一個「花哩花碌」嘅播放器。佢就係一個令你可以專心做嘢、同時俾音樂伺候好嘅工具箱。
有人話，音樂係靈魂嘅避難所。。
寫咗咁多年 code，每次戴起耳機，世界嘅雜音就俾擋咗喺外面。剩低嘅只有 cursor、屏幕、同旋律。
我想做一個播放器，佢唔使你分心去操作，唔使離開你嘅工作流程。佢就喺嗰度，好似一個聽話嘅 DJ。
一張圖，AI 就可以幫你搭出骨架。
呢個項目唔複雜。如果你都想做一個，直接俾 AI 呢張圖：
解釋一下：
左邊主進程做重嘢——調網易雲 API 搜歌、調 DeepSeek 做 AI 推理、調小米 TTS 合成語音。中間透過 IPC 同渲染進程通信。
右邊渲染進程管展示——終端風格嘅 UI、音頻播放、頻譜可視化、AI 聊天面板、番茄鐘。
外面掛住三個服務：網易雲音樂（內容來源）、DeepSeek（AI 大腦）、小米 TTS（語音輸出）。
分工好清楚。
俾 AI 睇呢張圖，加上「用 Electron + React + TypeScript 實現，UI 風格係終端模擬器」，佢就可以幫你將項目骨架搭出嚟。
5 日，12 次 commit。
由 init 到打 tag 發佈，啱啱好 5 日。
AI 高光時刻：頻譜可視化組件，我用自然語言描述需求，AI 一次過生成了正確嘅 Canvas 代碼——漸變柱狀圖、平滑插值、自適應縮放。
踩坑都唔少：AI 重複回覆整咗好幾次、TTS 突然失效查到係參數傳錯、切歌狀態機打架。
因為自己冇呢方面嘅知識儲備，只能係 CV 報錯，描述錯誤情景，交俾 AI 幫忙排錯。多用 plan 模式，及時 git commit，喺報錯之後唔好一句話「幫我解決呢個錯誤」，而係先俾佢分析報錯嘅原因，叫佢針對自己分析出嘅原因逐個排錯。
項目估計會喺呢個星期開源。
歡迎嚟玩，歡迎吐槽。
Hi，我是可樂。
這是我的第三個 vibe coding 項目。第一個是 Web 應用，第二個是小程序。這次我不想在瀏覽器裏玩了——我做了個桌面端。
一個長成終端樣子的音樂播放器。
暗色底、等寬字、[SYS][AI] 日誌在滾。不懂的人以為你在敲代碼，其實你在聽歌。
項目叫 可樂音樂（Kele Music），v0.1.0。
它能幹什麼？
一個開發者的日常打開方式是這樣的：
打開電腦，啓動可樂音樂。不用鼠標點來點去，右邊的 AI 面板掛着，打字就行。
"來點周杰倫的歌。"
AI 搜到結果，自動播放。歌詞在右邊同步滾動，屏幕頂部的頻譜柱跟着節奏跳。
寫代碼寫累了，敲一句："推薦幾首適合寫代碼聽的純音樂。"
AI 再搜、再播。全程手不用離開鍵盤。
右下角掛着番茄鍾，25 分鐘倒計時。到了，TTS 語音提醒："休息一下吧，眼睛也該歇歇了。" 順便彈出喝水提醒，自動放一首輕音樂。
這不是一個"花哨"的播放器。它就是一個讓你能專心幹活、同時被音樂伺候好的工具箱。
有人說，音樂是靈魂的避難所。
寫了這麼多年代碼，每次戴上耳機，世界的雜音就被擋在外面。剩下的只有光標、屏幕、和旋律。
我想做一個播放器，它不用你分心去操作，不用離開你的工作流。它就在那裏，像一個聽話的 DJ。
一張圖，AI 就能幫你搭出骨架
這個項目不復雜。如果你也想做一個，直接丟給 AI 這張圖：
解釋一下：
左邊主進程乾重活——調網易雲 API 搜歌、調 DeepSeek 做 AI 推理、調小米 TTS 合成語音。中間通過 IPC 和渲染進程通信。
右邊渲染進程管展示——終端風格的 UI、音頻播放、頻譜可視化、AI 聊天面板、番茄鍾。
外面掛着三個服務：網易雲音樂（內容來源）、DeepSeek（AI 大腦）、小米 TTS（語音輸出）。
分工很清楚。
給 AI 看這張圖，加上"用 Electron + React + TypeScript 實現，UI 風格為終端模擬器"，它就能幫你把項目骨架搭出來。
5 天，12 次提交
從 init 到打 tag 發佈，剛好 5 天。
AI 高光時刻：頻譜可視化組件，我用自然語言描述需求，AI 一次性生成了正確的 Canvas 代碼——漸變柱狀圖、平滑插值、自適應縮放。
踩坑也沒少：AI 重複回覆修了好幾次、TTS 突然失效排查到參數傳錯、切歌狀態機打架。
因為自己沒有這方面的知識儲備，只能是CV報錯，描述錯誤情景，交給AI幫忙排錯。多用plan模式，及時git提交，在報錯之後不要一句話“幫我解決這個錯誤”，而是先讓他分析報錯的原因，讓他針對他自己分析出的原因逐個排錯。
項目估計會在這周開源
歡迎來玩，歡迎吐槽。