設計 Lucky Duck：把獎勵平台 MVP 當成一種成長函數

獎勵產品難的不是再做一個商城，而是建立足夠的動能，讓人真的願意回來。Lucky Duck 是一個可點擊、行動優先的消費者獎勵與會員平台 MVP 概念——從設計到前端工程一手完成，就是為了證明這件事。

你可以在這裡試玩互動原型。這篇文章是它背後的故事。

問題：留存，而不是再一個目錄

畫一堆漂亮的畫面很容易，難的是做出一個「每個畫面都值得使用者點下一步」的流程。獎勵產品的成敗取決於習慣養成——所以設計的問題不是「目錄長什麼樣？」，而是「明天什麼會把人帶回來？」

所以我拒絕設計彼此無關的畫面。相反地，每個畫面都必須對應到一個真實的成長迴圈。

做法：讓畫面對應到迴圈

我把整個體驗圍繞四個核心迴圈來設計：

• 獲取（Acquisition）——一個吉祥物主導、用一句話講清楚承諾的 Landing：Play More. Win More. Get More.
• 啟用（Activation）——低摩擦註冊，立即開通點數錢包，加上一鍵錢包設定與迎新點數。
• 參與（Engagement）——獎勵探索：精選優惠、分類與熱門選項，每個都附上透明的中獎機率。
• 留存（Retention）——由收藏、等級與近期中獎組成的個人作品集，給人回來的理由。

再加上一個把全部串起來的時刻：慶祝——彩帶與吉祥物的瞬間，讓每次中獎都覺得值得。

當畫面對應到迴圈，產品設計就不再只是表面裝飾，而成為一種成長函數。

設計系統：用 token，不是一次性畫面

一個無法規模化的原型，證明不了什麼。所以 Lucky Duck 跑在一小組 token 上，而非客製化的單張畫面：

• 顏色——Primary Yellow（#FFD600）、Deep Purple（#6C3CFF）、Success Green（#22C55E），以及一套深色表面色，全部以單一的 Palette 抽象表達，並有淺色與深色兩種變體。
• 字體——重量級的標題字重用在關鍵時刻，平穩的內文字重用在清晰閱讀。
• 元件——按鈕、膠囊標籤、進度條與卡片到處重用，讓新功能能快速上線又維持品牌一致。

因為整個 demo 都從同一組 palette 讀取，淺色與深色得以同步——改一次 token，每個畫面都跟著變。

實作：跑在真實技術棧上的原型

這不是扁平的設計稿，而是一個跑在「產品實際上線會採用的同一套技術棧」上的可運作原型：

• Astro 負責快速的靜態頁面，
• 一個 React island 承載互動 demo，
• Framer Motion 處理畫面轉場與慶祝動畫，
• Tailwind CSS 做 token 驅動的樣式。

有幾個值得一提的工程細節：

1. 沒有主題閃爍。 demo island 以 client:only 掛載，在第一次 render 就讀取當前主題，所以深色模式的訪客不會看到淺色配色閃一下。
2. 顏色的單一真實來源。 畫面狀態機由單一的 Palette 物件驅動，淺色／深色不會走鐘。
3. 乾淨的後端交接。 前端刻意解耦——付款、點數與機率引擎的交接，對後端工程師來說保持乾淨。

為什麼這樣行得通

獎勵產品是一個披著「目錄問題」外衣的「留存問題」。透過讓每個畫面對應到成長迴圈、把視覺建立在可重用的設計系統上、並做出真正可點擊的原型，Lucky Duck 同時展現了產品思維與工程實作——而不只是一個靜態的點子。

👉 打開互動原型 →，並切換網站主題，並排看看淺色與深色兩套設計系統。