從點子到規格：App 要解決誰的什麼問題

歡迎來到這個單元。接下來六堂課，我們會從零做出一個真的能裝在手機上的 App：「小習慣」，一個每天點一下就能打卡的習慣追蹤器。

你可能會想：「直接叫 Claude 幫我做一個習慣 App 不就好了？」可以，而且它真的會做出來。但你很可能得到一個功能很多、畫面很滿、你卻不太想用的東西。原因不是 Claude 不夠聰明，而是你還沒告訴它你要什麼。

這堂課不寫任何程式。我們只做一件事：把模糊的點子，變成一份清楚的規格。這是整個單元裡最省時間的一堂課。

先找到「誰」和「什麼困擾」

App 不是功能的集合，而是某個人生活裡一個小困擾的解法。所以第一步是寫下：這個 App 是給誰用的？他卡在哪裡？

以「小習慣」為例，我們想像的使用者是這樣的人：

• 上班族，想多喝水、多走路、每天讀一點書。
• 試過市面上的習慣 App，但功能太多、要註冊、還一直推銷付費方案，用兩天就放棄。
• 真正想要的只是：睡前看一眼，今天有沒有做到，然後看到「連續 5 天」時有一點點成就感。

最好的使用者，常常就是你自己。如果你本身就有這個困擾，你會知道什麼重要、什麼是多餘的，也會是第一個每天打開它的人。

把點子寫成使用者故事

使用者故事（user story）是軟體團隊常用的一種寫法，把需求寫成一句話：

身為（誰），我想要（做什麼），這樣我就能（得到什麼好處）。

最後那一段「這樣我就能」最重要。它逼你說出功能背後的理由，也讓你之後可以判斷「這個功能做得好不好」。

「小習慣」的使用者故事：

1. 身為想養成習慣的上班族，我想要新增「喝水 2000cc」這樣的習慣，這樣我就知道每天要做到什麼。
2. 身為使用者，我想要點一下就完成今天的打卡，這樣睡前花 3 秒就能記錄。
3. 身為使用者，我想要看到連續打卡的天數，這樣我會更想維持下去。
4. 身為使用者，我想要看到這一週哪幾天有做到，這樣我能發現自己哪天最容易偷懶。
5. 身為使用者，我想要把資料備份成一個檔案，這樣換手機也不會不見。

注意這五句都沒有提到技術，沒有「資料庫」「按鈕要用什麼顏色」。現在只談人想要什麼。

分出「第一版必備」和「之後再說」

寫使用者故事時，你一定會冒出很多想法：提醒通知、好友互相打氣、統計圖表、深色模式、成就徽章……每一個都很棒，但全部一起做，你大概會在第三天放棄。

把功能分成兩堆：

第一版必備	之後再說
新增、刪除習慣	每日提醒通知
點一下打卡、再點一下取消	多台裝置同步
連續天數	好友互相打氣
最近 7 天的小格子	月曆、統計圖表
匯出、匯入備份檔	深色模式、自訂顏色
可以加到手機主畫面、離線也能用	登入帳號

判斷標準只有一個：少了它，使用者故事還成不成立？ 少了「打卡」，這就不是習慣 App；少了「深色模式」，大家照樣用得很開心。

「之後再說」不是丟掉，而是寫下來留著。第六堂課收集朋友的回饋時，你會回來翻這張清單。

從困擾到規格的四個步驟。每一步都在縮小範圍，讓第一版小到你一定做得完。

在紙上畫三個畫面

拿一張紙和筆，畫出手機的長方形外框，把你想像的畫面畫進去。不用好看，火柴人等級就夠了。這種草圖叫做線框圖（wireframe），只畫「有什麼東西、放在哪裡」，不管顏色和字型。

「小習慣」第一版只需要一個主畫面，上面有：

• 最上方：App 名稱和一句鼓勵的話。
• 新增區：輸入習慣名稱和目標，按「新增」。
• 習慣卡片：每張卡片有名稱、目標、連續天數、最近 7 天的小圓點、一顆大大的「打卡」按鈕。
• 最下方：「匯出備份」和「匯入備份」。

主畫面的線框圖。打卡按鈕放在右側、拇指最好按到的位置。

畫的時候，用手指在紙上「假裝操作」一次：早上打開、新增一個習慣、晚上回來打卡。你會發現一些文字描述時想不到的問題，例如「打錯卡要怎麼取消？」「習慣很多時要不要捲動？」把這些問題寫在草圖旁邊，等一下放進規格。

寫成 spec.md

最後，把上面的東西整理成一個文字檔，叫做 spec.md（spec 是 specification，規格）。副檔名 .md 代表 Markdown 格式，就是用 # 當標題、- 當清單的純文字，Claude 和人都很好讀。

這份檔案會放在專案資料夾裡。之後你每次請 Claude 做事，都可以說「請先讀 spec.md」，它就知道整個 App 的目標和邊界。

下面是「小習慣」的 spec.md，你可以直接參考它的結構：

# 小習慣：規格

## 一句話
給想養成小習慣的人，一個打開就能打卡、不用註冊的手機網頁 App。

## 使用者
- 主要：想多喝水、走路、讀書的上班族（就是我自己）
- 情境：睡前拿起手機，花 3 秒記錄今天有沒有做到

## 使用者故事（第一版）
1. 新增習慣：名稱（例如 喝水）＋目標（例如 2000cc）
2. 點一下打卡今天，再點一下可以取消
3. 顯示連續天數（今天還沒打卡，不算中斷）
4. 每個習慣顯示最近 7 天有沒有做到
5. 刪除習慣（要先確認）
6. 匯出成 JSON 備份檔、從備份檔匯入
7. 可以加到手機主畫面，沒有網路也能打開

## 之後再說（第一版不做）
- 提醒通知、登入帳號、多裝置同步、統計圖表、深色模式

## 畫面
- 只有一個主畫面，見 wireframe.jpg
- 手機直式優先，按鈕至少要拇指好按的大小

## 技術限制
- 純 HTML、CSS、JavaScript，不用框架，不需要安裝套件
- 資料存在瀏覽器的 localStorage，不需要伺服器
- 介面文字全部用繁體中文

## 完成的定義
- 在我的手機上加到主畫面，連續用 7 天沒有遇到 bug
- 關掉網路還能打開、打卡

這份規格有幾個值得學的地方：

• 「一句話」放在最前面。 如果你沒辦法用一句話說清楚，代表點子還太大。
• 寫了「不做什麼」。 這是最常被忽略的一段。Claude 很熱心，沒寫清楚它可能會順手幫你加登入功能。
• 寫了「完成的定義」。 你才知道什麼時候可以停下來，宣布第一版完成。

讓 Claude 幫你挑規格的毛病

寫完之後，可以請 Claude 當一位挑剔的產品經理，幫你找漏洞。這時候還不要讓它寫程式。

Claude 可能會問你「換日是以午夜 12 點為準嗎？」「習慣名稱最多幾個字？」這些問題很值得回答，把答案補進 spec.md。你會發現，規格越清楚，下一步寫程式時要來回修改的次數就越少。

如果你習慣用 ChatGPT 或 Gemini，這一步也完全適用，它們一樣擅長幫你找規格的漏洞。