DESIGN EXPERIMENT · LIVE
Afterword
從讀完書卻沒真的做到開始——記錄這次開發裡實際做出的決定、驗證方式，以及目前的限制。
01 · OVERVIEW
專案概述
Afterword 是一個以書籍為單位整理深度閱讀筆記的個人工具。
核心賣點很單純：把「讀完」和「做到」綁在一起——每篇筆記除了摘要與心得，一定會附上具體的行動方案；開始寫下一篇新筆記時，會先讓我看到同一本書上一次答應自己要做的事，有沒有真的做到。
- 角色
- 獨立設計＋開發
- 時間
- 2026.09–現在
- 前端
- Next.js App Router＋TypeScript＋Tailwind CSS v4
- 資料庫
- Supabase（Postgres）
- 部署
- Vercel
- Demo 模式
- 未設定 Supabase 時自動退回本機假資料，不用申請帳號就能完整體驗
- 狀態
- 已上線（個人使用）
中途也做過一次完整的視覺改版實驗——更留白、更編輯感的風格，套用後實際比對，發現原本偏暖的橘色配色其實更好讀、更有溫度，索性把整套改版撤掉，回到原始版本。「做了又撤」本身也是一次設計判斷。
02 · PROBLEM & EVIDENCE
問題與證據
每一項都是這次開發裡實際發生、有出處的問題，不是憑空列的檢查清單：
統計卡片用白底＋邊框設計，會讓人誤以為「本月讀了幾本」這種資訊卡是可以點擊的按鈕。
— 書架／行動方案頁面觀察分享卡片的心得文字比較長時，引言跟內文區塊會疊在一起，字重也不一致。
— 實際產出分享卡片測試心得內容沒有分頁機制，字數一多整張卡片會被撐爆或被截斷看不完。
— 分享卡片視覺回歸測試做了一整套更留白、更編輯感的視覺改版，上線前比對才發現閱讀體驗其實不如原本版本。
— 改版前後比對／自我判斷第一次用密碼登入時，沒有清楚告知這只是單一使用者的密碼保護，不是帳號系統。
— 登入頁走查行動方案原本散落在各篇筆記裡，沒有一個地方能一次看到「還有什麼答應自己的事沒做到」。
— 使用情境模擬03 · USERS
使用者輪廓
這是為自己一個人做的工具，沒有做過使用者訪談，下面同樣是根據功能反推的推論，不是實際研究結果。
從產品設計的功能重心（行動方案追蹤、上一次筆記回顧、分享卡片）可以反推：目標使用者是想讓讀書心得真的變成行動的人——不缺記筆記的地方，缺的是一個逼自己回頭檢查有沒有做到的機制。同時需要照顧兩種情境：手機上快速記一則筆記或勾掉行動方案，桌機上整理較長的心得、生成分享卡片。
04 · INFORMATION ARCHITECTURE
資訊架構
底部三分頁導覽（書架、全部筆記、行動方案），書籍詳情從書架「推」進去（分頁列持續顯示），新增書籍／新增筆記則是蓋上來的 modal（不顯示分頁列）：
手機上兩種情境都要成立：低頭速記一則筆記，或抬頭看一眼今天有沒有讀書進度可以打勾——所以底部導覽全程可見，不會因為切進詳情頁就不見。
05 · PRIMARY FLOW
核心流程
- 01輸入密碼登入，沒有註冊流程——這是給自己一個人用的工具。
- 02書架總覽顯示所有書籍與本月統計（讀了幾本、寫了幾篇筆記、行動方案完成率）。
- 03點進一本書，看到過去所有筆記，以及上一次答應自己要做的行動方案有沒有打勾。
- 04寫新筆記：摘要、心得、行動方案，一定要附上具體可執行的下一步；也可以貼上原文摘錄，請 AI 先產生摘要、心得、行動方案與標籤的草稿再修改。
- 05所有筆記裡的行動方案會彙總到「行動方案」頁，可以跨書籍打勾、追蹤進度。
- 06心得寫完可以一鍵產生分享卡片，長文字自動分頁，不會截斷或重疊。
- 07沒有設定 Supabase 也能走完整流程——demo 模式用本機假資料，體驗完再決定要不要接正式資料庫。
06 · KEY DECISIONS
三個最有代表性的決策
完整 10 個決策列在下方
統計卡片從「邊框卡片」改成「無邊框沉底卡片」
原本白底＋邊框的卡片容易被誤認成可以點的按鈕。拿掉邊框、改成 bg-surface-sunk 的沉底樣式後，一眼就能分辨「這是資訊」不是「這能點」——書架和行動方案頁都套用同一個修正。
整套視覺改版做完又撤回原本版本
套用了一版更留白、更編輯感的視覺風格，實際比對後發現原本偏暖的橘色配色其實更好讀、更有溫度。用 git reset 把兩個 commit 整套撤掉，回到原始版本——做了又撤，也是一種判斷。
沒設定 Supabase 就自動退回本機 demo 資料
不想讓人一定要先申請 Supabase 帳號才能試用。isDemoMode() 偵測不到環境變數就自動切換成本機 JSON 假資料，走完整流程後再決定要不要接上真的資料庫。
還有 7 個決策
密碼保護 vs 完整帳號系統
只有自己用，APP_PASSWORD＋session 就夠，不需要註冊／登入資料表。
分享卡片加上自動分頁
心得太長時裁切會斷句，改成分頁保留完整內容。
行動方案從筆記裡「攤平」成獨立清單
要回顧「還有什麼沒做到」得跨書籍彙總，獨立出一個行動方案頁。
.env.example 清空預留值
原本留著像真的網址，容易被誤填造成連線錯誤而不是退回 demo。
分享卡字重統一
修正部分文字用了不一致的字重，讀起來層次亂掉。
AI 生成標籤時參考現有標籤清單
標籤原本每次生成都是無狀態的，同一個概念會被拼出不同說法（「習慣」「習慣養成」各自成一個標籤）。改成把現有標籤清單一起交給 AI，優先要求重複使用。
原文摘錄過長時自動收合
貼一整段原文時，引言區塊會壓過下面真正重要的摘要／心得。超過 120 字自動收合成 3 行，加「展開全文」按鈕。
07 · ALTERNATIVES CONSIDERED
被放棄的方案
完整改版→︎保留原本配色
更留白、更編輯感的新風格套用後比對，閱讀體驗不如原本版本。
白底＋邊框卡片→︎無邊框沉底卡片
邊框卡片太像按鈕，容易讓人誤點。
強制要求 Supabase 帳號→︎Demo 模式自動退回
不想讓人先申請帳號才能試用完整流程。
完整登入系統→︎單一密碼保護
只有自己一個人用，不需要多使用者機制。
08 · UI SCREENS
介面畫面
Web · 八個畫面
書架
全部筆記
行動方案
新增筆記
新增書籍
產生回顧卡片
書籍詳情
產生分享圖卡
09 · TESTING & VALIDATION
測試與驗證
每次改動都先在本機 dev server 跑過一次完整流程，確認畫面和資料邏輯都對，再部署到 Vercel。
上線後在正式環境（production URL）重新測過一次登入、新增書籍、寫筆記、勾選行動方案、產生分享卡片：
登入 →︎ 書架總覽 →︎ 點進書籍 →︎ 新增筆記（摘要／心得／行動方案）→︎ 勾選行動方案完成，整條路徑重新走一次。
書架與行動方案頁統計數字（本月讀了幾本、完成率）跟資料庫實際筆數對得上。
沒設定 Supabase 環境變數時，demo 模式正確退回本機假資料，操作流程一樣能走完。
分享卡片產生：心得字數從短到長都測過一輪，確認分頁機制正常觸發、不會重疊或截斷。
統計卡片視覺上容易被誤認成可點擊按鈕 — 改成無邊框沉底卡片樣式，測試中發現並修正
.env.example 的預留值看起來像真的網址，容易誤填造成連線錯誤 — 清空預留值並加上警語，程式碼檢查時發現並修正
10 · RESULTS & LIMITATIONS
結果與限制
- 已部署上線，直接開網址就能用，不用額外安裝。
- 沒設定 Supabase 也能完整體驗——demo 模式自動退回本機假資料。
- 行動方案會在寫下一篇筆記前自動回顧，逼自己檢查有沒有做到。
- 心得可以一鍵產生分享卡片，長文字有分頁不會重疊或截斷。
- 摘要／心得／行動方案／標籤可以用 AI 從原文摘錄自動生成，生成標籤時還會優先重複使用現有標籤，不會越用越碎。
- 單一密碼保護，不用註冊帳號就能安全使用。
- 沒有手機通知或提醒機制，得自己記得回來看行動方案。
- 只有自己一組帳號，沒有多使用者或分享給別人看的機制。
- 沒有離線模式，斷網就沒辦法讀取或寫筆記。
- 還沒有經過長時間真實使用的數據驗證，都是短期內自己測試的結果。
- 分享卡片目前只有單一版型，沒有其他樣式可以選。