回作品列表 Side Project
Alien Cuisine
外星精緻餐廳的品牌官網與訂餐 app，共用同一套設計系統
- 2
- 介面共用一套設計系統
- 6
- 道菜的點陣 glyph 插畫
- 4 步
- 行動優先結帳流程
- ≤10%
- 量子紫覆蓋率上限
背景與挑戰
Quantum 是一間「沒有母星」的外星精緻餐廳，座落在萬物之靜默邊際。網站的任務不是解釋餐點，而是營造冷靜、精密、超現實的奢華氛圍，再把這份相信轉化為訂位與購買。
挑戰在於它有兩種讀者：品牌訪客為氛圍而來，需要編輯式排版的 landing page 慢慢鋪陳世界觀；訂購者已被打動，要在 /order 買料理套件、酒與周邊，要求行動優先、流程順手。兩個介面個性迥異，卻必須說同一種語言——這正是設計系統要解的題。繁中與英文並置則是品牌姿態，不是附加功能。
設計決策
成果與反思
成品是一個 React + TypeScript + SCSS 專案：編輯式品牌 landing page，加上從商店到 4 步結帳的完整訂餐動線，內建 light / dark 雙主題與雙語並置，並以 WCAG 2.1 AA 為目標處理對比與 prefers-reduced-motion 替代方案。
回頭看，最大的收穫是「先寫世界觀，再訂規則」：有了北極星與明確的反面清單，元件層級的取捨都變快了——想加陰影時，先問是不是該換一條髮絲線。與 AI 協作也改變了我做視覺的方式：與其找素材，不如把美術方向翻譯成可被程式生成的規則，插畫引擎本身就是品牌資產。下一步是把 mock 金流接上真實服務。