結論先講
想練 AI 開發但不知道做什麼——問題出在題目太大。
「做一個網站」太模糊，AI 會給你一個四不像；「做一個 UTM 產生器，輸入網址與參數，輸出組好的追蹤連結」剛好，AI 一次就能做對。
以下 20 個題目都經過這樣的收斂。每一個都標了：
- 難度（一到四顆星）
- 介面任務（版面與元件）
- 邏輯任務（要算什麼）
- 資料結構（要存什麼）
分兩階段做：先把畫面做出來，再處理邏輯。 混在一起時畫面和功能同時出錯，你會分不清是哪邊的問題。
類別一：個人品牌與求職
目標：做出能直接放進履歷的成品。
1. 互動式作品集 ⭐⭐
- 概念：可依類別動態篩選的作品牆，比 PDF 生動
- 介面：主視覺區塊、瀑布流作品卡片
- 邏輯：分類過濾器（點 UI 只顯示 UI 作品）、彈出詳細視窗
- 資料：
projects.json（標題、圖片、類別）
2. 數位名片整合頁 ⭐
- 概念：客製化的連結彙整頁，整合所有社群
- 介面：垂直按鈕群、大頭照區塊、手機版型
- 邏輯：點擊統計（哪個連結被點最多）、深淺色模式切換
- 資料：
links.json（標題、網址、圖示、點擊數）
3. 接案服務價目表 ⭐⭐
- 概念：展示服務方案，客戶可勾選估價
- 介面：三欄式價格卡，含勾選清單
- 邏輯：預算試算（勾選後總金額自動加總）
- 資料：
services.json（服務名、價格）
類別二：行銷實用工具
目標：解決日常痛點，練習邏輯運算。
4. UTM 網址產生器 ⭐ ← 推薦第一個做
- 概念：輸入網址與參數，自動組成追蹤連結
- 介面：整齊表單、醒目的結果複製區
- 邏輯：字串拼接、一鍵複製到剪貼簿
- 資料：無（純運算）
為什麼推薦當第一個：一顆星、沒有資料結構、純字串處理，但做完當天就能拿去用。第一個專案最重要的是「做完」。
5. 廣告文案靈感庫 ⭐⭐
- 概念：收藏常用的提示詞或文案金句
- 介面：卡片式佈局，每張有複製按鈕
- 邏輯：關鍵字搜尋、標籤篩選
- 資料：
prompts.json（標題、內容、標籤）
6. A/B 測試信心計算機 ⭐⭐⭐
- 概念：輸入兩組數據，判斷哪組成效更好
- 介面：左右對照的輸入區與結果區
- 邏輯：統計顯著性運算、結果即時變色
- 資料：無（純運算）
7. 行銷預算分配器 ⭐⭐
- 概念：輸入總預算，依比例分配到各渠道
- 介面：輸入框、滑桿、圓餅圖區塊
- 邏輯：連動計算、繪製圖表
- 資料：
channels.json（預設比例）
8. 訂閱支出追蹤 ⭐⭐
- 概念：計算每月在各種軟體上花了多少
- 介面：列表樣式，含圖示、金額、扣款日
- 邏輯：陣列加總、依日期排序
- 資料：
subs.json（服務名、金額、日期）
9. 會議時區轉換器 ⭐⭐
- 概念：跨國會議必備，直觀顯示時間對照
- 介面：時鐘卡片或時間軸
- 邏輯：日期時間處理、時區換算
- 資料：
zones.json（城市、時差）
類別三：互動與遊戲化
目標：增加停留時間，練習動態效果與隨機邏輯。
10. 品牌色彩心理測驗 ⭐⭐⭐
- 介面：問題卡與結果卡的轉場
- 邏輯：計分、條件判斷（幾分顯示哪個結果）
- 資料：
questions.json（題目、選項分數）
11. 每日靈感抽籤 ⭐
- 介面：引言區塊 ＋ 一個大按鈕
- 邏輯：從陣列隨機抽一筆
- 資料：
ideas.json（點子內容）
12. 抽獎輪盤 ⭐⭐⭐
- 介面：圓形轉盤或開獎視窗
- 邏輯：CSS 動畫控制、隨機選取
- 資料：
prizes.json（獎品名）
13. 智慧常見問答 ⭐
- 介面：手風琴列表
- 邏輯：展開收合動畫、即時關鍵字過濾
- 資料：
faqs.json（問題、答案）
類別四：內容策展與資料管理
目標：練習完整的新增讀取修改刪除流程。
14. 合作名單管理 ⭐⭐⭐
- 介面：含頭像與數字標籤的列表
- 邏輯：新增與刪除項目
- 資料：
contacts.json（姓名、指標、平台）
15. 工作地點清單 ⭐⭐
- 介面：圖文卡片，含評分星星
- 邏輯：依評分排序、收藏功能
- 資料：
places.json（名稱、評分、設備）
16. 標籤群組管理器 ⭐⭐
- 概念：預存不同主題的標籤組，一鍵複製
- 介面：標籤雲與分組頁籤
- 邏輯：多選標籤、組合文字並複製
- 資料：
tags.json（標籤名、類別）
17. 待辦看板 ⭐⭐⭐⭐ ← 挑戰題
- 概念：簡易版任務看板
- 介面：三欄式佈局（待辦／進行中／完成）
- 邏輯：點擊移動卡片狀態
- 資料：
tasks.json（任務名、狀態）
類別五：設計與視覺輔助
18. 品牌色票產生器 ⭐⭐
- 介面：五個並排色塊，顯示色碼
- 邏輯：隨機色碼生成、鎖定單一顏色
- 資料：無
19. 社群九宮格預覽器 ⭐⭐
- 介面：模擬手機介面的 3×3 網格
- 邏輯：檔案上傳預覽、圖片置換
- 資料：無
20. 活動倒數頁 ⭐
- 介面：主視覺 ＋ 數字倒數樣式
- 邏輯：時間倒數運算
- 資料：無
怎麼挑第一個做
| 你的情況 | 建議 |
|---|---|
| 完全沒做過 | 4（UTM 產生器）→ 11（靈感抽籤）→ 13（常見問答） |
| 想做作品集 | 1（互動式作品集）→ 6（A/B 計算機）→ 17（看板） |
| 想解決實際問題 | 挑你自己每週真的會用到的那一個 |
最後一列才是關鍵
做一個你自己每週真的會用的工具，完成率遠高於做一個「聽起來很厲害」的。
因為你會想用它，所以會想把它做完；做完之後你會發現缺什麼，於是自然開始迭代。這比照著清單做十個練習有用得多。
為什麼要先列資料結構
每個題目都標了資料結構，這不是形式。
資料結構決定這個工具能不能長大。 先想清楚要存哪些欄位，AI 生出來的程式才會有一致的資料格式；跳過這一步，通常會得到「把資料寫死在畫面裡」的版本，之後要加一筆就得改程式碼。
列資料結構的成本是三分鐘，省下的是重寫。
常見問題
沒寫過程式，真的能用 AI 做出這些工具嗎？
難度一到二顆星的可以，而且是很好的起點。這些工具的共通點是邏輯單純、不需要後端、資料量小到用一個 JSON 檔就能裝。真正的門檻不是寫程式，是把需求講清楚——你能不能明確說出「輸入什麼、算什麼、輸出什麼」。講得出來，AI 大多能做出來。
該從哪一個開始？
UTM 網址產生器。它只有一顆星、沒有資料結構、純字串處理，但成果立刻可用——做完當天就能拿去產追蹤連結。第一個專案最重要的是「做完」而不是「做得複雜」，有了一次完整經驗再往上加難度。
為什麼每個工具都要先列資料結構？
因為資料結構決定了這個工具能不能長大。先想清楚要存哪些欄位，AI 生出來的程式才會有一致的資料格式；跳過這一步，通常會得到把資料寫死在畫面裡的版本，之後要加一筆就得改程式碼。列資料結構的成本是三分鐘，省下的是重寫。
把介面和邏輯分兩階段做，有什麼好處？
好處是每個階段的問題不會互相干擾。先把畫面做出來，你能立刻看出版面對不對；再處理邏輯時，你已經有明確的畫面元素可以指向（「點這個按鈕要做什麼」）。混在一起做時，畫面和功能同時出錯，你會分不清是哪邊的問題。
這些工具可以拿來當作品集嗎？
可以，但要挑對。互動式作品集、A/B 測試計算機、看板這幾個比較能展示能力；隨機抽籤、倒數計時這類雖然實用但技術含量低。更好的做法是挑三到四個不同類型的（一個資料管理、一個運算、一個視覺互動），比做十個同類型的更能說明你的能力範圍。