🍼 一手抱嬰兒，我用 20分鐘「嘴」出讀經計畫 Progressive Web App

在沒寫一行 code 的情況下，我使用 lovable 完成了一個有互動、有設計感、有行動體驗的網站，而且只花了 20 分鐘。

成品：https://2025-bible-reading.fruitful-tools.com/

我不是第一次做網頁，但這次是我第一次不用打開 VSCode/Cursor，甚至是一邊單手抱著四個月大的寶寶、一邊語音輸入指令完成的。

🎯 這次的任務：做出一個讀經計畫 Web App

這個網站的目標很簡單：

• 本來就在今年為教會設計了一年 12 個月份的讀經計畫
• 每個月一張讀經卡（正面是計畫，背面是設計圖）。本來列印成酷卡，但是因為數量不足，後來有些人拿不到了，才想說設計成網頁。
• 手機優化、預設繁體中文

這些需求，你交給設計師畫圖、前端寫 code、PM 排進開發時程，可能要 1~2 週才會上線。如果你是很優秀的前端工程師，可能也要花三四個小時。但是我只做了一件事：跟 lovable.dev 說清楚我要什麼。

🧠 怎麼跟 AI 說？我的語音指令長這樣：

please use the following tech stack 
React 19, Tailwind CSS v4, Vite, TypeScript, React Router v7, 
ShadCN/UI, Framer Motion 
 
I wish to create a yearly bible reading plan app, purely frontend. 
I will upload 24 images, 12 as monthly bible reading calendar, 12 are designs related to that month's scope. 
Create a website that has 12 months as 12 cards. 
When a card is clicked, show the calendar png. 
When clicked again, flip the card to show design. 
Make it a web app. 
Greenish design. 
i18n with default to 繁體中文.

其實這第一步的指令，應該是對非工程師來說最困難的地方。因為一開始選擇什麼樣的「網頁技術套件」，會大大影響後續網站的可維護性與延展性。 這邊分享我下的 tech stack 指令。這一段是我以前在帶開發專案時，反覆磨出來的經驗組合 — — 既要現代、要快，又要容易整合元件庫與動畫，也要讓後面維護不頭痛。

這代表：跟工程師問清楚技術架構，描述你想要什麼，AI就能幫你開工。

上面AI沒有尊重我說喜歡綠色，並且要繁體中文的功能。可能一次講太多了，所以提示一下

I wish to have greenish design, 
and I want i18n with default to 繁體中文

中間有個小bug出現，我無腦點一下叫他修，然後就87%完成了。

📦 上傳素材（最近才release的功能）：24 張圖片，AI 自動分類

我事先準備好了 24 張圖：1~12 月份的「讀經表」（正面）與「設計圖」（背面），檔名就是 1.png ~ 24.png。

我跟 AI 說：

I uploaded january's front and back image (1.png and 2.png), 
february is 3.png and 4.png, ...etc

就這樣，它自己處理好了。

🔧 指令微調與問題修正（像在帶專案一樣）

過程中，我發現幾個 UX 問題，於是直接「改需求」：

1. 改進手機 UX：圖片載入時要有明確提示

When I click on the calendar card and there is a pop-up, 
the image is loading in real time, 
but the visual effect is not clear that it’s loading. 
Could you improve the user experience on this issue?

AI 立刻改了，圖片還沒載好時會顯示 loading spinner，避免使用者卡住。

2. 小bug：修正翻頁動畫

upon click month card, the calendar card is shown in the popup. 
I wish to flip to the back side (the design) 
when I click the image in the popup. 
There should be an animation of flipping card

3. 加入「月份解鎖機制」

我希望未來的月份不能點擊，增加一點期待感：

Can you lock each month's card until 1 month before? 
For example, user can not click on September until August.

AI 做到了，還會自動根據目前時間決定哪幾個月可點。

Lovable也把 custom domain 整合的很好，這塊我就不詳述了，請官方文件，基本上也是點一點就出來了。

一個可以 demo 的產品

不到 30 分鐘，我就能拿出一個可以 demo 的 Web App：

• 行動裝置支援好
• 有 loading 狀態
• 卡片翻面動畫自然
• 根據月份解鎖
• 用繁體中文顯示
• 無須後端，Custom domain跟 Cloudflare 整合又方便又快

這個專案的價值不在技術，而在：我們把想法轉為實體產品的門檻，降到前所未有的低。

末了的話

• 給產品經理：POC不用找設計師了，先看看 AI 有沒有懂你吧。
• 給老闆或接案公司：這個世界距離又快又穩又好的日子越來越靠近了。
• 給父母：如果你需要一手抱寶寶，一手寫code，就用講的把網頁講出來吧。不要再害怕生小孩了！