有鑑於 coding 己經是夕陽產業，程式工程師也必需因應潮流做一些轉型，在這邊打算使用 Vibe Coding 的方式，讓一個服務從簡單到複雜，透過一步一步的學習，分享給大家，對於這個side project 我打算用全AI的方式進行，從PRD到系統上線，讓AI完整的介入整件事情(笑)。其中最主要的目的是希望可以透過AI輔助加上本人軟體工程的知識，完成一個完整的服務。

這次使用的AI服務為 copilot CLI。

最終目標預計將會做出Web+ APP，跨平台、多使用者的服務，讓整個系統可以上架提供服務。

用一個下午做出自己的任務管理 App，我學到了什麼

Photo by Volodymyr Dobrovolskyy on Unsplash

看完很多時間管理的文章，一直覺得市面上的 Todo App 不是太複雜就是太陽春，就想說乾脆自己做一個。剛好最近一直在推的艾森豪決策矩陣讓我很有感，就把兩件事合在一起，做了一個叫「今天該面對什麼」的 Web App，從需求到上線大概花了一個下午。

本次注重在產品設計與開發思路，技術細節（React、TypeScript 等）就不多介紹。

以下是這次從零打造一個工具產品，讓我重新思考的七件事：

1. 先寫 PRD，再動手（Write Before Code）先想清楚再說

很多人的習慣是「想到就做」，結果做到一半發現方向不對。這次我先把需求寫成一份完整的產品文件，定義清楚目標用戶是誰、核心功能是什麼、資料要存在哪裡。這個動作看似多了一道手續，但讓後面的每一步都快很多。需求越清楚，執行越快。

2. 四象限命名要「有人味」（Human-first Naming）不要讓工具讀起來像教科書

原本的象限名稱是「重要且緊急」、「重要但不緊急」，正確但無聊。後來改成「火燒屁股了！」、「有空一定要做」、「這誰的事啊？」、「晚點再點開」 — — 一眼就知道自己的任務屬於哪個情緒狀態。工具如果讓人感到有距離，再好用也沒人想碰。

3. 截止日期要有智慧（Smart Deadline）光顯示日期沒有意義

一般的日期欄位只告訴你「幾月幾號」，但我真正需要的資訊是「還有幾天」、「是不是快來不及了」。所以加了智慧提示，會自動顯示「🔔 快到期」、「⚠ 已逾期 N 天」，並讓卡片變色。資訊本身不值錢，讓人一眼看懂才值錢。

4. 三種瀏覽模式，因為人的狀態每天不一樣（Context-aware Views）

有時候需要看全局分佈（矩陣），有時候需要清單一項一項處理（清單），有時候需要跟日期對齊（日曆）。同樣的資料，在不同的時間點你需要的是不同的呈現方式。這也讓我想到，好的工具設計要跟著使用者的狀態走，而不是強迫使用者適應同一個畫面。

5. 資料存在本地就夠了（LocalStorage First）不要過度設計

一開始想說要不要接資料庫、做帳號系統，後來決定先用 LocalStorage 解決。結果發現對個人使用來說完全夠用，而且啟動速度快、不需要網路、沒有隱私問題。很多時候「過度設計」才是拖慢進度的主因，夠用就是好設計。

6. 從 PRD 到上線，一個下午（Ship Fast）完成比完美更重要

包含安裝環境、寫程式、推上 GitHub、設定 GitHub Pages 自動部署，總共花了不到半天。不是每件事都要做到百分百才能發出去，先讓真實的人用到真實的產品，比在腦袋裡反覆迭代更有價值。

7. AI 是協作對象，不是魔法棒（AI as Co-pilot）需求還是要自己想清楚

這次全程用 AI 協助開發，速度確實快很多。但 AI 能做好的前提是「你知道自己要什麼」。如果連需求都模糊，AI 給你的答案也會是模糊的。工具再強，思考還是要自己來。

結語

這次做下來最大的體悟是：好的工具應該讓你少想一件事，而不是多學一件功能。

對於身處各行各業的我們，其實核心道理是一樣的 — — 先搞清楚問題是什麼，再用最直接的方式解決它，然後快點讓別人用看看。

現在這個 App 已經上線了，如果你也常常不知道今天該做什麼，可以去試試看：👉 https://ssssuuunnnn.github.io/matrix-todo/

除了用 App，我也先去把「把這篇文章發出去」從「晚點再點開」象限，搬到「火燒屁股了！」象限了。