把創業點子說清楚：
寫一份 AI 看得懂的產品說明

1. PHASE 01認識 Vibe Coding 和工具
2. PHASE 02第一次做出東西
3. PHASE 03規劃你的產品
4. PHASE 04做出小店預約
5. PHASE 05上線前要懂的事
6. PHASE 06換成你的點子
7. PHASE 07往商用產品前進

這一課動到：全部零件先認識一遍（網頁、後台、App、API、資料庫、Redis、測試收信匣、Docker），這一課還不動手做

你現在在這裡：第 3 階段，只有這一課。上一課學會用 VS Code 看檔案、請 Codex 存版本；這一課先不做程式，把要做的產品寫清楚。

怎麼寫一份 AI 看得懂的產品說明？

把點子拆成五件事寫下來：誰用、第一個會用的人是誰、核心功能、要存哪些資料、做到什麼程度算及格。寫好後交給 Codex，請它指出不清楚的地方、整理成正式版。這份說明會一路用到第 20 課，拿來做你自己的產品。

產品說明是什麼

產品說明像裝潢前交給師傅的需求單：住幾個人、要幾個房間、預算多少，寫得越具體，師傅越不用猜。Codex 也一樣，你說「做一個預約系統」，它只能自己想像；你寫清楚誰用、要存什麼、做到哪裡算完成，它做出來的才會是你要的。

範本是一個 .md 檔，正式名稱是 Markdown。它像加了簡單記號的筆記：# 開頭的是標題，- 開頭的是清單。第 05 課裝好的 VS Code 打得開，Codex 也讀得懂。

零件地圖：一個產品由哪些零件組成

前後分離

像餐廳的外場和廚房：客人看到的網頁、App 和店家後台是外場，處理預約規則的後端是廚房，兩邊各做各的。正式名稱是前後分離，前端管畫面，後端管規則和資料。

API

外場和廚房之間的點餐窗口：前端把「我要訂週二 10 點剪髮」遞進窗口，後端處理好，再把結果遞出來。網頁、後台和 App 用的是同一個窗口。

資料庫

像店裡的預約本：服務項目、營業時間、每一筆預約都記在裡面，關掉電腦也不會不見。第 08 課第一次把預約存進去。

Redis

像櫃台先把時段夾住的夾子：有人正在訂週二 10 點，就先夾住，另一個人訂不走。它記得快，但只管短暫的事。第 13 課會用到。

Docker

像打包好的工作箱：資料庫、Redis 這些零件連同設定一起裝箱，在誰的電腦上打開都一樣能跑。第 07 課會準備好。

這一課開頭的零件地圖，就是這張圖的簡化版。之後每一課開頭都會用它，標出這一課動到哪些零件。

為什麼選這些技術

這門課已經替你選好一套組合。每個人用同一套，Codex 做出來的結構才會一樣，課文的提示詞和進度存檔也才對得上。

後端：Python（FastAPI）

Python 讀起來接近英文句子，是最多人學的程式語言之一，AI 也寫得很熟。FastAPI 會自動做出一頁 API 文件，第 08 課你會在那一頁按一下就新增一筆預約。官方說明 ↗

資料庫：PostgreSQL

免費、開放原始碼，已經發展將近 40 年，從小店到大型服務都在用。官方說明 ↗

Redis

把資料放在記憶體裡，存取非常快，最適合拿來做「先把時段夾住」這種短暫又要快的事。

Docker Compose

一份清單寫好要開哪些工作箱，一個動作全部啟動；換一台電腦，照同一份清單就能跑起來。官方說明 ↗

網頁與後台：React

做網頁畫面最常見的工具之一。客人網頁和店家後台都用它，看懂一個，另一個也看得懂。

App：Flutter

一套程式就能做出 iPhone 和 Android 的 App，接的是同一個 API 窗口。官方說明 ↗

測試收信匣：Mailpit

像店裡的假郵筒：系統寄出的信都被它收下，在瀏覽器打開就看得到，不會寄到真的信箱，也不用申請任何帳號。第 14 課用它看確認信。官方說明 ↗

這套骨架適合哪些點子

小店預約的骨架是：客人選一個項目和時間、留下資料，店家在後台管理。你的點子如果長得像這樣，大多套得上：

預約

髮廊、美甲、家教、場地租借：直接套得上。改服務項目、時長和營業時間就好。

點餐

小吃、飲料、便當預訂：套得上。服務項目換成菜單，時段換成取餐時間；預約多記「點了哪些品項、各幾份」。

報名

課程、講座、活動：套得上。時段換成場次，每一場加上名額上限；Redis 用來防止名額被多報。

會員

集點卡、會員優惠：部分套得上。要多做客人登入，資料多了會員和點數紀錄；登入怎麼做，第 23 課會點到。

刊登

租屋、二手、徵才：部分套得上。使用的人變成刊登的人和瀏覽的人，要加上審核和搜尋；沒有時段，Redis 可能用不到。

即時聊天、直播影音、要接硬體的產品，核心零件和這套骨架差很多。建議先跟著做完小店預約，學會整套做法，再請 Codex 評估你的點子要換哪些零件。

成果預覽：小店預約的產品說明

這是示範產品「小森髮廊線上預約」照範本寫出來的樣子。後面第 07–17 課，就是照這份說明一步步做出來。

一句話說明

客人在手機上自己選服務和時段預約，不用打電話。

誰用

客人：選服務、選時段、填資料預約，收到確認信，需要時自己取消。店家：登入後台看預約、取消或標記完成，自己改設定。

第一個會用的人

巷口小森髮廊的老闆娘。現在用電話和紙本預約本接預約，忙的時候接不到電話。

核心功能

客人選服務與時段送出預約；寄確認信、用信裡的連結取消；同一時段只有一人訂得到；店家後台看預約、改服務與營業時間；App 也能預約。

要存哪些資料

服務項目（剪髮 60 分鐘 600 元、洗髮造型 30 分鐘 300 元、染髮 120 分鐘 1,800 元）；營業時間（週二到週日 10:00–19:00，週一公休，每 30 分鐘一格）；預約（服務、時段、姓名、電話、Email、狀態）；店家帳號。

做到什麼程度算及格

客人在電腦或手機上預約，填錯有提示、額滿看得出來、送出有成功畫面；收到確認信並能取消；兩人搶同一時段只有一人成功；店家登入後台看今天和本週的預約，自己改服務、價格、時長、營業時間和公休日，客人那邊馬上跟著變；有 logo、配色一致，手機上看起來正常；App 能完成同樣的預約；有自動測試。

你寫的說明不會和這份一樣，點子不同、寫法也不同。五個欄位都寫得具體，就是做對了。

上課前：準備好這三樣

產品說明範本

下載產品說明範本（product-brief.md）。每一欄底下都有小店預約的例子。

VS Code 和 Codex

第 05 課裝好的 VS Code，和 ChatGPT 桌面 App 裡的 Codex。

一個點子

想做的產品，一句話說得出來就好。還沒有的話，就照小森髮廊的例子填，第 20 課前再回來寫自己的。

這兩步要你自己寫

點子是你的，第一版要自己寫。寫得不完整沒關係，下一段會請 Codex 幫你找出漏掉的地方。

步驟 1在「文件」建 my-idea 資料夾，放進範本

1. 在 Finder 的「文件」裡新增一個資料夾，名稱打 my-idea。
2. 到「下載項目」找到剛下載的 product-brief.md，拖進 my-idea。

做完應看到：my-idea 資料夾裡有一個 product-brief.md。

如果點下載連結後，瀏覽器直接顯示一堆文字：在連結上按右鍵，選「下載連結檔案」。

步驟 2用 VS Code 打開，把五個欄位填好

1. 在 VS Code 按「File」→「Open Folder…」，選 my-idea；問你信不信任時，按「Yes, I trust the authors」；如果上方出現「Restricted Mode」，按「Manage」再按「Trust」。
2. 點 product-brief.md，在每一欄的「（寫在這裡）」寫下你的內容，寫完把「例：」那幾行刪掉。
3. 按 ⌘S 存檔。

做完應看到：五個欄位都有你自己寫的內容，分頁上的檔名旁邊沒有圓點（代表已經存檔）。

寫「第一個會用的人」時：寫一個叫得出名字的人或店，例如「我表姊開的美甲店」，不要寫「所有人」或「年輕人」。想不到的話，先空著，下一段請 Codex 問你。

Windows：在檔案總管的「文件」裡新增 my-idea 資料夾，從「下載」把 product-brief.md 拖進去；VS Code 存檔按 Ctrl + S。

操作步驟：請 Codex 找出不清楚的地方，整理成正式版

步驟 1在 Codex 打開 my-idea，開新對話

1. 打開 ChatGPT 桌面 App，確認上方選的是「Codex」。
2. 選「打開資料夾」，選「文件」裡的 my-idea，再按「New chat」開新對話。

做完應看到：新對話的畫面標示著 my-idea。

步驟 2請 Codex 讀說明、用問題問你

1. 按「複製」，貼到輸入框送出。

請讀這個資料夾裡的 product-brief.md，這是我的產品說明，我不會寫程式。
這一步先不要寫程式，也先不要改檔案。
請找出寫得不清楚、前後矛盾或漏掉的地方，用問題問我，一次最多 5 題，每題附一個例子，讓我比較好回答。
也請告訴我「做到什麼程度算及格」裡，有沒有哪一項太大，建議先放到之後再做。

複製

做完應看到：Codex 列出幾個問題，沒有改動你的檔案。

如果 Codex 直接開始改檔案或寫程式：按停止，再貼一次提示詞，強調「這一步先不要改檔案」。

我的回答如下：
1. （回答第 1 題）
2. （回答第 2 題）
3. （回答第 3 題）
如果還有不清楚的地方，請再問我；都清楚了，請告訴我「可以整理了」。

步驟 4請 Codex 整理成正式版，存一個版本

1. 按「複製」，貼到輸入框送出。

請依我的回答，把 product-brief.md 整理成正式版：
保留原本的段落標題，每一欄都寫具體；我沒有說過的功能不要自己加，想建議的放在最後一段「Codex 的建議」。
整理好後，用白話告訴我改了哪些地方，再幫這個資料夾存一個版本，說明寫「產品說明正式版」。

複製

做完應看到：Codex 說明改了哪些地方，也回報存好了一個版本。

步驟 5自己讀一遍正式版

1. 回到 VS Code，點 product-brief.md，從頭讀一遍。
2. 每一欄都問自己：這是我要的嗎？有沒有 Codex 自己加、我沒說過的東西？

做完應看到：每一欄都寫得具體，你讀得懂、也同意。

成果檢查

成功的樣子：

• my-idea 裡的 product-brief.md，五個欄位都寫了具體內容。
• 「第一個會用的人」是一個叫得出名字的人或店。
• 核心功能三到六項，最重要的那一條流程排第一。
• 「做到什麼程度算及格」看得出來：做到哪裡，就能拿給第一個會用的人試。
• Codex 回報過存好一個版本。

還沒成功的樣子：有欄位還是空的、第一個會用的人寫「所有人」、核心功能列了十幾項，或正式版裡多了你沒說過的功能。照下面「卡住時怎麼辦」處理。

你的說明和成果預覽不一樣是正常的，每個點子都不同。

做不出來也沒關係：下載本課的進度存檔，裡面有填好的小店預約產品說明和空白範本，放進「文件」裡的 my-idea，下一課接著做。

下載第 06 課的進度存檔（06.zip）

卡住時怎麼辦

不知道第一個會用的人是誰

把這段貼給 Codex：

我寫不出 product-brief.md 裡「第一個會用的人是誰」。
請問我幾個問題，幫我想出一個我身邊真的找得到、現在就有這個麻煩的人或店。先不要改檔案。

正式版多了我沒說過的功能

正式版裡有些功能我沒有說過。請把它們從核心功能拿掉，移到最後「Codex 的建議」，改完告訴我移了哪些。

核心功能寫太多，不知道先做哪個

我的核心功能太多了。請幫我挑出「沒有它，第一個會用的人就用不下去」的三到六項留下，其他移到「先不做的事」，並說明你為什麼這樣挑。

不確定我的點子套不套得上這套骨架

這門課的示範產品是小店預約：客人選服務和時段預約、收確認信，店家在後台管理，用到網頁、後台、App、資料庫和 Redis。
請比較我的 product-brief.md，告訴我哪些零件可以直接沿用、哪些要改、哪些用不到。先不要改檔案。

練習：真人試用，拿給第一個會用的人看

我把產品說明拿給第一個會用的人看了，他的回答寫在 product-brief.md 最後的「真人試用紀錄」。
請依他的回答，告訴我說明裡哪些地方應該改；我同意後再改，改完幫我存一個版本。

常見問題