# Day 9：「修煉圈圈 Practice Rings」Web app 開發日誌 - 2025 六角 AI Vibe Coding 體驗營期末大魔王作業 

By [雞蛋糕的前端修煉屋](https://paragraph.com/@gcake) · 2025-12-02

---

用 AI 教練打造「修煉圈圈」：從痛點、規格到全端實作的 Vibe Coding 筆記
===========================================

這份筆記旨在記錄 2025 六角 Vibe Coding 體驗營每日作業 Day 21 的期末專案成果，從一個簡單的個人痛點出發，透過與 AI（在我這個情境中是 Perplexity）協作，在一天內完成了一個包含前後端的全端網頁小工具：「修煉圈圈 Practice Rings」。

**專案核心：整個專案從「系統設計（SDD）」、「專案架構規劃」到「程式碼實作」，幾乎 100% 是由我提出自然語言需求，再由 AI 產出對應的規格與程式碼。**

* * *

一、專案題目發想：解決「無法量化每日練習」的痛點
------------------------

*   **我遇到的問題**： 每天都會安排時間練習 Coding（刷題）、Reading（技術文件）、Writing（筆記），但常常感覺很發散，不知道今天到底投入了多少，也缺乏像 Apple Watch 活動圈圈那樣「把圈圈關起來」的成就感。
    
*   **我想做的工具**： 一個極簡的網頁 App，可以：
    
    1.  用三個圈圈視覺化呈現 Coding / Reading / Writing 的每日完成度。
        
    2.  提供一個模式計時器，方便在不同學習任務間切換。
        
    3.  記錄最近 7 天的練習狀況，讓我看到自己的連續性。
        
    4.  可以釘到手機桌面，像原生 App 一樣隨時打開。
        

* * *

二、我的 AI 專案模式：前端工程師教練
--------------------

我為這次專案設計的 AI 夥伴模式，是直接寫在 Space Instructions 裡的。

*   **專案名稱**：前端工程師教練
    
*   **專案 Prompt**：
    
    > 你是一個「前端工程師+教練」，我是零基礎的前端初學者，從 JS/HTML/CSS 開始。請你以官方說明文件為主要內容搭配搜尋結果，以「程式語言原生被設計的運作邏輯和模式」為核心解答我的問題，並儘量舉例實作情境讓我比較容易理解在什麼情境選擇什麼語法解決問題。 以練習題題目設計核心概念給我學習路徑建議，並提示可以官方文件的哪些段落。 以 airbnb 寫作規範寫規格、程式碼和所有文件/訊息（包含 README.md, CHANGLOG.md, git commit…………）.
    

這個 Prompt 確保了 AI 不只是給程式碼，而是同時扮演**架構師**（規劃 SDD、API）、**資深工程師**（提供程式碼、Debug）與**教練**（解釋原生邏輯）三種角色。

* * *

三、AI 網頁小工具實作：Practice Rings（修煉圈圈）
---------------------------------

*   **專案名稱**：Practice Rings（修煉圈圈）
    
*   **GitHub Pages 網址**：[https://gcake119.github.io/Practice-Rings-Frontend/](https://gcake119.github.io/Practice-Rings-Frontend/)
    
*   **後端 Repo**：[https://github.com/gcake119/Practice-Rings-Backend](https://github.com/gcake119/Practice-Rings-Backend)
    
*   **前端 Repo**：[https://github.com/gcake119/Practice-Rings-Frontend](https://github.com/gcake119/Practice-Rings-Frontend)
    

![](https://storage.googleapis.com/papyrus_images/d1b54b35645e9da6db5e4340a492367f6816052fb9e0320524db6d0888970b6e.png)

### 專案架構與 SDD

整個專案從零開始，完全透過與 AI 對話完成：

1.  **提出初步構想**：我想做一個三圈圈的練習紀錄工具。
    
2.  **AI 產出 SDD**：AI 基於我的構想，產出了第一版系統設計說明書（SDD），定義了功能需求、API 規格、資料結構。
    
3.  **規劃專案架構**：根據 SDD，我詢問 AI 如何將專案拆分成前端和後端兩個 repo，AI 給出了詳細的檔案架構建議。
    
4.  **後端部署**：我詢問如何在 Zeabur 上部署 Node.js 並使用 Volume 持久化 JSON 檔，AI 給出了詳細的步驟。
    
5.  **前端開發**：我要求 AI 產出符合 SDD 的 HTML / CSS / JS，並在過程中不斷提出修改需求。
    

### 主要自然語言 Prompt 紀錄

以下列出幾個在開發過程中，驅動專案進展的關鍵 Prompt：

*   **產出規格書**：
    
    > `按照目前實作功能更新SDD規格書，保留未來新增登入機制和改版為 google sheet 版本的說明`
    
*   **規劃專案架構與部署**：
    
    > `後端部署到 zeabur 的話，如何讀寫本機 JSON 檔？把專案分成前端和後端兩個repo，給我檔案架構`
    
*   **產出程式碼**：
    
    > `根據規格書給我 style.css （I'm Doraemon 蠟筆手繪主題配色） 和 app.js 的內容`
    
*   **Debug 與錯誤排查**：
    
    > `日期顯示 undefined本機測試前端連接zeabur後端卡在載入畫面，確認程式碼正確性`
    
*   **功能迭代與修改**：
    
    > `計時器小問題修改：切換模式時開始按鈕顯示已經按下去，但沒有實際開始計時...最近修煉記錄改成以三個同心圓圈圈表示，像蘋果健康圈圈那樣，一排並列最近七天的圈圈`
    
*   **產出文件**：
    
    > `給我前端和後端兩個專案的 README.md`
    

這些 Prompt 幾乎涵蓋了一個專案從 0 到 1 的所有環節，證明了透過自然語言與 AI 協作完成一個全端專案是完全可行的。

* * *

四、期末完成封面圖
---------

這個專案的 App Icon 也是由 AI 產出，我下的 Prompt 是：

> `繪製網站icon，符合 iOS 設計規範，可以在iPhone桌面顯示的圖案你按照上述規格畫一張圖，我要先上線 demo 用`

最終產出的圖示：

![](https://storage.googleapis.com/papyrus_images/a04783d63c1fdbc2efe4d9c4da294930d717f71fc310cbf5129649837930493e.png)

* * *

五、心得與反思
-------

這個工具對我最大的幫助，是**將一個模糊的想法快速落地成一個可以每天使用的產品**。

透過與 AI 教練協作，我不再需要從零開始煩惱專案架構、API 怎麼開、或是某些 CSS 效果怎麼寫。我可以專注在「**我想要什麼功能**」和「**它應該長什麼樣子**」，把實作細節交給 AI，再由我來審核、Debug 與整合。在充實技術基礎的同時，透過實作小專案更理解自己該補足和尚待熟練的地方，在平時刷題與讀文件練基本功之餘，增加成就感和動力。

這種「Vibe Coding」的開發模式，讓我深刻體會到：

1.  **規格定義的重要性**：一份好的 SDD 是我與 AI 協作的共同語言。能把開發框架和功能需求先想好定義清楚會很有幫助，不至於讓 AI 產了一大堆自己改不動的 code 還不知道該從何叫他改起，這部分還是需要有背景知識支撐才能有更細膩準確的思考方向。
    
2.  **AI 作為副駕的強大**：AI 能補足我在某些領域（例如後端部署、CSS 動畫）的經驗不足，讓我能完成一個更完整的作品。
    
3.  **迭代速度的提升**：從一個想法到一個新功能上線（例如把歷史條圖改成同心圓），整個過程可能只需要幾個 Prompt，幾分鐘就能看到效果。
    

如果目標是只要一個能動的小專案，Vibe Coding 的確是非常實用的技能，先前做的 [DeFi 救援小工具](https://paragraph.com/@tw3/vibe-coding-defi-rescue?referrer=0x1d1F6bEbaB8A03a09fd2E28A2D152a912d4D87c9)到這次的計時小工具都是很開心的開發體驗。

---

*Originally published on [雞蛋糕的前端修煉屋](https://paragraph.com/@gcake/day-9)*