AAPD 是台灣的產品人教育平台,推出了職涯教練陪跑計畫,由 24 位教練提供一對一指導。然而學員很難決定該選擇哪一位教練,而第三方測驗工具又有廣告與各種限制。因此我打造了一個配對測驗,程式碼全部由 AI 撰寫。我每天投入一小時,總計 18 小時便完成上線。

  1. 為 AAPD 打造的版本
改版後 為 AAPD 打造的版本
  1. 第三方測驗工具
改版前 第三方測驗工具

找到可行的工作流程

我將舊工具與背景資訊提供給 Claude Code。第一版雖然可以運作,但看起來不像 AAPD 的風格。只靠 prompt 修正需要反覆溝通太多次,因此我調整了工作流程:

  • 讓 AI 參考 AAPD 的網站作為風格依據。
  • 讓 AI 在 Figma 中產生畫面,再由我手動調整。
  • 小幅修改透過 prompt 處理;較大的版面或視覺調整,則先在 Figma 中設計,再轉換為程式碼。
AI 從網站擷取 AAPD 的色彩與風格
在 Figma 中設計的測驗畫面

選擇簡單的技術架構

團隊需要在我不參與的情況下也能維護。Firebase 是其中一個選項,但團隊中沒有人熟悉它的維護方式。因此我選擇簡單的做法:教練名單存放在 Google Sheets,再透過一段簡短的 Apps Script 將資料傳送給測驗。新增或更新教練時,只需要編輯試算表即可。網站本身部署在 GitHub Pages,免費且容易管理。

存放在 Google Sheets 的教練名單,由 Apps Script 讀取
部署在 GitHub Pages 上的測驗

測試與上線

上線前,五位 AAPD 團隊成員協助進行測試。整體流程相當順暢,但也發現兩個缺口:只提供中文,而且沒有人在手機上確認過。我在上線前修正了這兩個問題,並加入追蹤機制來衡量預約數。

細節

現在它能在各種螢幕尺寸上正常使用,提供淺色與深色模式,並支援中文與英文。此外也附上一套 token 元件庫與 markdown 指南,供下一個專案使用。

支援各種螢幕尺寸。 版面從桌機到手機都能正常呈現。

淺色與深色模式。 一鍵切換主題。

中文與英文。 測試時發現只有中文,因此現在整個測驗都能一鍵切換語言。

我的收穫

真正關鍵的決定不在於 prompt 怎麼寫,而在於判斷何時該介入:選擇使用 Figma、評估配對邏輯,以及選擇 Google Sheets 而非 Firebase。AI 負責執行,我負責判斷。這個專案也促使我學習基礎程式設計,讓我能更快自行修正明顯的問題。

角色

專案負責人產品設計師

公司

AAPD

時間

18 小時每天一小時

類型

網頁應用程式