二十個產品展示站的結構實驗
Fable 5 — Twenty Sites
二十個自成一格的產品站，探索五種結構原型與多種呈現模式的組合，一次做完。
自主練習 2026
開啟實際網站 ↗
部署於 Vercel · 原始碼未公開
我的角色
定義五種結構原型與呈現模式的實驗矩陣，並獨立完成全部二十個站台。
技術挑戰
做一個好看的產品頁不難，難的是回答「產品頁有幾種結構」。要在同一批實驗裡把變因控制住 — 每個站換的是結構與呈現手法，不是換個顏色重做一次。
成果
二十個獨立站台，涵蓋消費電子、食品、工具、藝術、科幻等題材，五種結構原型 A–E 交叉多種呈現模式。全部零建置、CDN 載入，共用一支零依賴伺服器。
為什麼做這個
單做一個漂亮的產品頁證明不了什麼。我想知道的是：產品頁到底有幾種結構？
所以一次做二十個。每個站換的是結構原型與呈現手法，不是換顏色重做。題材刻意拉開 — 從木質音響到細胞培養肉，從兒童望遠鏡到 API 監控後台。
二十個站的分布
消費電子六個、食品飲料三個、工具與軟體三個、藝術工藝三個、科幻概念三個、生活雜貨兩個。
技術重點
- 零建置：每個站都是自足的靜態頁，CDN 載入 GSAP 與 Lenis。
- 共用伺服器：一支零依賴的
serve.mjs同時服務二十個站。 - 變因控制：結構是實驗變因，技術棧刻意保持一致。
收錄的 20 個子作品
- site1-speaker · Arbor Acoustics Grain One 木質音響。Wood remembers every note。
- site2-camera · Meridian M1 相機。Focus is a decision。含 hero 影片與 gallery 組。
- site3-cooler · Glacier 360 AIO 水冷散熱器。From Inferno to Ice。
- site4-sake · 白澤 HAKUTAKU 純米大吟釀。日式包裝敘事。
- site5-headlamp · NOX TRAIL NT-1 VANTA 越野頭燈。含 hero 情境影片。
- site6-piano · Cadenza 數位直立鋼琴。
- site7-watch · ESCAPEMENT CO. Calibre EC-288 機械腕錶。與此刻同步。
- site8-tote · Haul & Co. The Everyday Tote 帆布包。日常物件的敘事。
- site9-pen · 拾筆 Shibi 手工鋼筆。見字如晤。
- site10-collar · Trailtag 狗狗 GPS 項圈。牠盡情跑，你安心看。
- site11-tablet · SUMI Slate 繪圖平板。Slow is lush, fast is fine。
- site12-display · VANTA RIFT OLED 240Hz 電競螢幕。一甩就懂那 180 幀。
- site13-apimonitor · Pulsegrid API 監控 SaaS。唯一的開發者工具題材。
- site14-artvault · Intaglio 版畫收藏院 銅版畫收藏。銅版之上，時間成藏。
- site15-telescope · StarSeed 星籽 兒童望遠鏡。今晚，換你點亮一片夜空。
- site16-spacelift · CAELUS 青冥天梯 太空電梯。從地面直上同步軌道。
- site17-kintsugi · 継 TSUGU 金繕工房 金繕修復。以金，繕其殘缺。
- site18-fractal · OROGEN 程序化地形工具。Seed a range, grow a world。
- site19-swarm · MELIFERA Field-200 蜂群授粉。Lead a line, the swarm pollinates the rest。
- site20-culturedmeat · CELLARE 細胞培養肉。The Fourteen-Day Loin。