使用 Claude Code 打造網站 -- 第三週：設計體驗

前情提要

第一週是速度。從零開始建一切。第二週是找到自己的聲音，把十年的燈光設計工作記錄下來。

第三週完全不同：這一切應該是什麼感覺？

基礎已經打好了，內容也到位了。現在的問題是視覺的。不是「頁面上放什麼」，而是「當一個人打開這個網站的瞬間，他會感受到什麼？」

第三週成果總覽

項目	詳情
3D hero 頁面	從 `/lab/hero` 正式升級為首頁
3D 場景迭代	24 次記錄在案的修改
模型優化	FBX 33.8MB 壓縮至 GLB+Draco 274KB（減少 99.2%）
視覺對齊	預設深色模式、Montserrat 標題、加寬間距
Header 重設計	全寬排版，社群 icon 移至 footer
Blog 簡化	移除排序，改為低調的展開式搜尋
Works 篩選器	兩層分類系統（燈光設計 / 創意科技）
Hero 動畫	文字元素的柔和淡入效果
全新工作流	語音驅動即時編碼
日期 bug 修復	全站時區安全的日期渲染
OG metadata	描述加長至 155 字元，優化社群分享顯示
資源優化	圖片 379MB 降至 121MB，影片 317MB 降至 96MB，刪除未使用 PLY
SEO & GEO 基準線	首次記錄 Google 排名（名字搜尋第一名）與 Gemini AI 回應
Works 頁面實驗	全新 grid layout，hover 觸發輪播與背景呈現
Works 頁面正式上線	實驗頁升級為正式 Works 頁面
手機版優化	Subgrid 對齊、關閉 hover、直接導航
導覽列統一	全站一致的極簡導覽列
字體系統	Montserrat 用於識別，Inter 用於內容，字體審計清理
手機版 Hero 圖片	16:9 照片在手機上完整顯示（不裁切）
語言切換	Blog 列表頁和內文頁加入中英切換
中文版 Works 頁	舊版 WorksFilter 替換為新版 grid layout
Vercel Web Analytics	全站加入自有數據追蹤

轉折

前兩週有一種天然的動力：永遠有東西要蓋、要寫、要整理。待辦清單推著工作往前走。

第三週開始的問題不一樣了。不是「還缺什麼？」而是「第一印象是什麼？」我已經有一個內容扎實的作品集網站，但首頁的感覺…太安全了。一張背景圖、置中文字、兩個按鈕。這可以是任何人的網站。

對一個燈光設計師來說，這是一個被浪費的機會。

Day 15：Hero 頁面實驗

找參考

我先看了幾個讓我印象深刻的創意作品集網站。兩個特別突出：

romanjeanelie.com：一個創意開發者，hero 頁面用光、霧和走廊裡的人影營造出即刻的氛圍。它不解釋任何事。它只是感覺像什麼。
samanthairina.com：大膽的字體、自信的排版。那種知道自己要成為什麼的設計。

另一個重要參考：James Turrell 的燈光裝置，人站在充滿色彩的空間裡，被純粹的光所淹沒。那種尺度感和氛圍感，正是我想要的。

romanjeanelie.com hero 頁面 — romanjeanelie.com：光、霧、走廊中的人影。即刻的氛圍。

James Turrell 燈光裝置 — James Turrell：人在沉浸式光場中的尺度感。

共通點：兩個網站都在第一秒就表達了態度。不需要滾動。

從草稿到場景

我畫了一個粗略的草圖：一個 3D 空間，走廊盡頭有強烈光源，空間裡充滿煙霧，一個人影在緩慢地走。某種像舞台的東西，像我平常做燈光設計的那種環境。

草圖：空間、人物、光源的關係 — 空間-人物-光源的三種視角：走廊透視、俯視、方向性聚光。

技術上經歷了很多迭代：

Shader 體積霧（太卡，40 步 ray steps 加 FBM noise）
二十面體加光暈（感覺不對，像一個物件，不像一個空間）
優化版 raymarching（效能好了，但感覺是平面的）
完整的 3D 場景（突破點，真正的透視和縱深）

最終方案：Three.js 場景，圓弧隧道（靈感來自 James Turrell 的燈光裝置），遠端是發光平面，加上霧氣，和從 Mixamo 載入的行走人物。

演進過程

行走人物來自 Mixamo，Adobe 的免費角色動畫庫。我選了一個標準的行走循環，輸出為 FBX，再轉成壓縮的 GLB 給網頁使用。

Mixamo 動畫來源 從 Mixamo 動畫庫選擇行走動畫。

Hero 頁面在一天之內經歷了 24 次記錄在案的迭代。以下是演進過程：

最終成果的動態呈現：

像燈光設計師一樣調光

這裡是過程變得真正有趣的地方。基本場景蓋好之後，工作轉變成參數調整：光暈強度、霧氣密度、光源距離、柔光罩衰減、鏡頭位置。

感覺完全就像在劇場裡對燈。差別只是，我不是對控台操作員喊 cue，而是對 Claude Code 喊：

「GLOW 50 POINT LIGHT 300」
「柔光罩 opacity .4，falloff 2」
「人往光源走 5 個單位」
「背景太黑了，改成微微的深灰」

幾十次微調，每一次只要幾秒。回饋循環是即時的：說出來，看到結果，繼續調。

會呼吸的光

一個小細節帶來了很大的差別：光在呼吸。一個緩慢的正弦波（0.3 Hz）讓光暈強度在 85% 到 100% 之間起伏。細微到你可能不會有意識地注意到，但它讓整個場景感覺是活的。Shader uniform、point light 和 rect area light 全部同步呼吸。

正式上線 Hero

實驗成功了。3D hero 的感覺是對的。所以它成了正式首頁。

這意味著要解決幾個實際問題：

技術細節：模型優化與部署

模型優化：Mixamo 的原始行走人物是一個 33.8MB 的 FBX 檔案。作為首頁這是不可接受的。優化流程：

FBX 轉 GLB：用自製的 Node.js 腳本搭配 three.js（需要在 Node 環境中 polyfill 瀏覽器 API 如 Image、FileReader、navigator）
Draco 壓縮：透過 gltf-transform CLI
結果：274KB。減少了 99.2%。

部署上線：3D 模型在本地端跑得好好的，但上線後壞了。問題是：Draco 解碼器從 Google CDN（gstatic.com）載入，在正式環境不穩定。解決方法簡單但重要：把 Draco 解碼器檔案（draco_decoder.js、draco_decoder.wasm、draco_wasm_wrapper.js）放到本地的 public/draco/。

對齊其他頁面

有了沉浸式的深色 hero 頁面，點進 Works 或 Blog 會感覺很突兀。內頁還在用原本的淺色模式設計、Inter 字體和保守的間距。是時候全部對齊了。

細節：全站改了什麼

預設深色模式：把主題初始化改為預設深色模式。之前選過淺色模式的使用者保留他們的偏好（localStorage 仍然有效），但新訪客會看到網站該有的樣子。

字體：Montserrat（已經為 hero 載入）套用到全站所有 h1 元素和 header 導覽連結。內文保持 Inter 以維持可讀性。這建立了清晰的層次：Montserrat 代表品牌識別，Inter 用於內容。

間距：內頁從 py-12（48px）加大到 py-20（80px）。更多呼吸空間。網站需要的感覺不像儀表板，更像一個策展空間。

Header 演進：Header 經歷了自己的變身。之前：DAZAI logo 加 favicon 圖示、Blog、Works、About、IG、LinkedIn、EN/ZH、主題切換，右邊塞了七個項目。之後：DAZAI CHEN 用 Montserrat、Works、Blog、About、EN/ZH。社群 icon 移到 footer。全寬 padding 呼應 hero 的滿版排版。結果：從 hero 到內頁的過渡感覺像一個連續的體驗，不是兩個不同的網站。

Works 篩選器：Works 頁面有了兩層篩選系統。第一層分成 Lighting Design 和 Creative Technology。各有子標籤（Lighting Design：Musical、Comedy、Dance、Theatre、Festival、Installation、Experimental；Creative Technology：Unreal Engine、AI、Creative Coding、Research）。更貼切地反映了作品的實際結構。

Blog 搜尋：Blog 頁面設計過度了。一個大搜尋框和排序下拉選單，根本沒人會用。精簡成標籤篩選、標籤列尾端一個小搜尋 icon（點擊後展開極簡底線輸入框），沒有排序控制。

各頁面深色模式：所有頁面強制深色模式，除了 Blog 文章頁保留切換。長文閱讀用淺色模式是合理的偏好。其他一切是品牌體驗。

動畫問題

最後一個細節：hero 的文字應該怎麼出現？

第一版是往上滑入加淡入。太花俏。然後是放大加透明度。還是太「彈出來」的感覺。經過幾次迭代，最後選定純透明度淡入加交錯時間：

0.5 秒：名字淡入（持續 3 秒）
1.2 秒：副標題和導覽列同時淡入

沒有位移，沒有縮放。就是光從黑暗中浮現。像劇場裡慢慢推上去的 dimmer。

不打字了

這週還有另一個變化，而且它的意義可能比視覺實驗更深遠。

從 Day 15 開始，我不再打字了。

用 Windows 內建的語音輸入（Win + H），我開始完全用語音進行所有的 live coding。不用鍵盤寫 prompt，不用仔細組織指令。就是說話。

為什麼語音改變了一切

直覺的假設是語音是為了快。不是。是為了完整。

打字的時候，你會本能地壓縮。你打「把光源調亮，放更遠」。很有效率。但也不完整。

用說的時候，你會自然地展開。你說：「我想要光源的感覺是更遠，但同時更亮，那種看著長走廊盡頭的感覺，很強烈的，像 Turrell 裝置那種。」同樣的意圖，但現在 AI 得到了感覺、參考和空間關係的脈絡。

這很重要，因為 AI 協作中最難的部分不是讓 AI 執行，而是把你真正想要的東西傳達出去。語音消除了讓你「自我審查意圖」的摩擦力。

自然的循環

語音創造了一個更自然的協作循環：

自由表達，從多個角度，不用擔心格式
AI 更全面地理解，因為它收到了更豐富的脈絡
AI 提出選項，更接近你實際想像的
你從中細調，或用另一個口述的想法重新引導

用打字的時候，第一步往往變成「下指令」。用語音的時候，它變成「描述我在想什麼」。對設計工作來說，後者的效果好非常多。

一種熟悉的模式

對燈光設計師來說，這個工作流程其實很熟悉。在劇場裡，你不會自己寫燈光程式。你坐在觀眾席，看著舞台，然後告訴控台操作員你想要什麼：「後面的光拉上來，暖一點，右邊多一點，慢慢來。」操作員把你的藝術指導翻譯成技術動作。

語音驅動的 AI coding 是完全一樣的模式。「操作員」現在是 Claude Code，但工作方式（觀察、感受、指導）是一模一樣的。

目前狀態

第三週結束時，網站的樣子：

看不見的工作

這週不是所有事情都是視覺上的。有些最重要的改動是沒有人會看到的。

時區 Bug

日期顯示錯誤。一篇 2 月 7 號發表的文章，在 Blog 列表頁顯示成 2 月 6 號。原因：JavaScript 的 Date 物件把 ISO 日期字串解讀為 UTC 午夜。在 UTC 負時區（像紐約 UTC-5），轉換成本地時間時午夜會退回前一天。

修復是系統性的：12 個模板檔案中的每一個 toLocaleDateString() 都需要加上 timeZone: 'UTC'。客戶端元件（BlogSearch、WorksFilter）需要不同的做法：直接解析日期字串，而不是從 ISO 字串建立 Date 物件。

OpenGraph Metadata

網站預設的 meta description 只有 54 個字元：「Dazai Chen - Creative Technologist & Lighting Designer」。社群分享工具會標示任何低於 110 字元的描述為太短。加長到 155 字元，讓平台有更多資訊可以顯示。

資源優化（777MB 降至 251MB）

Vercel 免費方案的頻寬用量達到 75%。原因：未壓縮的資源。一個作品頁面可能會傳送 20-30MB 的照片。

用 sharp（處理圖片）和 ffmpeg（處理影片）建立了壓縮流程：

資源類型	壓縮前	壓縮後	減少
圖片（175 個檔案）	332MB	74MB	78%
影片（22 個檔案）	270MB	55MB	80%
未使用的 3D 模型	47MB	刪除	100%
總計	777MB	251MB	68%

圖片限制最大寬度 1920px，以 80% 品質重新壓縮。影片以 CRF 28 重新編碼為 H.264。畫面上幾乎看不出差別，但檔案大小只剩一小部分。

SEO 與 GEO：建立基準線

網站上線三週後，我才意識到有件事應該從第一天就開始做：追蹤搜尋引擎和 AI 模型怎麼描述我。

這個疏忽本身就值得記錄下來。當你公開地建造一個東西，你會想看到它隨時間產生的影響。但沒有基準線，你就無法衡量變化。等我想到要查的時候，三週的潛在數據已經沒了。

所以這裡是 Week 3 的基準線。之後會持續追蹤。

Google 搜尋：「dazai chen」

網站在我的名字搜尋中排名第一。Meta description 抓的是 About 頁面的內容：「Creative Technologist & Lighting Designer」。About 頁面作為獨立結果出現在第三名，LinkedIn 在第二名。

Gemini（GEO）：LLM 怎麼說我？

這是比較新、也比較不明顯的指標。當有人問 AI「誰是 Dazai Chen？」的時候，它會回答什麼？

一個重要的觀察：Gemini 的回答不只正確描述了我的背景（creative technologist、lighting designer、NYU IDM、ITRI），右側的「來源」面板還直接引用了我網站的 About 頁面和首頁作為參考來源。這代表網站的結構化內容已經被 LLM 索引，並作為知識來源使用。

GEO（Generative Engine Optimization，生成式引擎優化）還是一個很新的概念。跟傳統 SEO 優化排名位置不同，GEO 關注的是 AI 模型怎麼理解和呈現你。這個網站上的結構化內容、清楚的 metadata、雙語頁面，都是 LLM 可以解析的訊號。

為什麼這很重要

這件事直接被列進了我的「早知道就好了」清單。如果你要建一個個人網站，在開始優化之前，先截圖記錄你目前的搜尋結果。未來的你會需要這個對照。

Week 4 之後會持續回來看。

Works 頁面實驗

Hero 頁面的感覺對了之後，下一個問題是：Works 頁面呢？

現有的 Works 頁面很實用：卡片 grid 加分類篩選。能用。但它沒有感覺。對一個燈光設計師的作品集來說，Works 頁面可以說是全站最重要的頁面。它應該要留下印象。

找參考

動手做之前，我先看了幾個處理作品 grid 處理得很好的創意工作室：

Voku Studio：極簡導覽，滿版圖片，hover 驅動探索。

Ethan & Tom：grid 搭配 hover 時背景接管。

共通點：grid 本身就是導覽。沒有側邊欄，沒有佔據頁面的篩選器。只有圖片和互動。

第一次嘗試：滾動式排版

第一個實驗是滾動驅動的方式，測試了垂直和水平滾動。想法是讓每個作品佔更大的空間，讓圖片有呼吸的餘地。

滾動式弧形排版，不同大小的卡片。

滾動排版上的 hover 互動。

但感覺很散。滾動瀏覽獨立的卡片不會產生「一整個創作歷程」的感覺。像在翻目錄。

第二次嘗試：Grid

第二個方向是密集的 5 欄 grid，所有作品同時顯示。不需要滾動。一個畫面就看到所有作品。這立刻更有「職涯總覽」的感覺。

但靜態 grid 就只是一張聯絡表。有趣的部分是搞清楚互動時會發生什麼。

Hover 系統

設計經歷了很多迭代：

1. 呼吸動畫，所有卡片都有微微的 opacity 脈動。看起來太忙了，移除。

早期帶呼吸效果的 grid（小卡片）。

全寬 grid 加呼吸效果和分類標籤。

2. Hover 放大（1.2x，後來 1.15x），所有卡片都顯示標籤。有了背景功能之後就顯得多餘了。

Hover 放大效果，所有卡片都顯示標籤。

3. 背景呈現：hover 某張卡片時，整頁背景 crossfade 成那個作品的照片。這是突破點。每張小圖突然變成通往完整圖片的入口。

第一版的 hover 背景呈現。

4. Ken Burns 效果：背景緩慢放大，12 秒內只放大 5%。幾乎察覺不到，但讓畫面保持活力。

5. 非 hover 卡片淡至透明（opacity 0），背景圖片填滿視野。只有 hover 的那張卡片以 80% opacity 可見。

6. 雙語標籤：每張小圖上方顯示英文標題 + 中文標題，非 hover 卡片的標籤變暗。

圖片輪播

最後一個功能：hover 時每張卡片輪播 3-5 張演出照片。

輪播只在 hover 時啟動（預設是靜態）。每張圖片 crossfade 2 秒，間隔 3 秒換一張。離開時，卡片停留在最後顯示的那張照片。

背景跟著輪播走，小圖換的時候，全螢幕背景也同步 crossfade。

最終成果：hover 呈現背景，圖片輪播加 crossfade，Ken Burns 縮放。

要讓這些效果流暢，需要解決幾個技術問題：

技術細節：crossfade 與 race condition

預載：頁面載入時就把所有約 80 張輪播圖片載入瀏覽器快取，crossfade 時不會因為下載而卡頓
雙層 crossfade：每張卡片堆疊兩個 <img> 元素，交替切換 opacity 實現無縫轉場
雙層背景：全螢幕背景使用同樣的技術（bg-a / bg-b 兩層）
Race condition 修復：快速在卡片之間移動時，新卡片的 mouseenter 可能在舊卡片的 mouseleave 之前觸發。不處理的話，離開的 handler 會重設剛建立的狀態。

沒有成功的嘗試

幾個嘗試過但放棄的想法：

文字動畫到圖片中央：hover 時標題從圖片上方移到中央。就算有過渡動畫也太突兀。
漣漪效果：離開卡片時，所有卡片以該卡片為中心，像水波一樣向外擴散換圖。概念很酷，但視覺效果太混亂。
從左到右依序輪播：所有卡片自動依序切換照片。交錯的時間感覺是隨機的，而不是有節奏的。

結論：有時候最簡單的互動（hover 呈現，離開凍結）比花俏的動畫表達得更清楚。

從實驗到正式上線

實驗成功了。所以它成了正式的 Works 頁面。

把實驗頁面升級為正式頁面聽起來很簡單，但它引出了一整波細節調整。實驗是為桌面設計的，正式頁面需要在任何裝置上都能用。

手機版

最大的挑戰是手機。一個靠 hover 驅動的 grid 無法對應到觸控螢幕。比起用 tap-and-hold 或其他替代方案來模擬 hover，我選了不同的做法：在手機上全部拿掉。

沒有 hover 輪播。沒有背景呈現。沒有點擊動畫。在手機上，grid 就只是 grid。你點一張卡片，直接導航。不會有半截動畫造成的黑屏，也不會有尷尬的互動模式。

Grid 本身也需要修。中文的作品標題比較長，會把各欄的圖片往下推到不同的高度。CSS subgrid 解決了這個問題：每張卡片佔兩列（標籤 + 圖片），標籤用 align-self: end，這樣不管標題多長，圖片都能保持在同一條水平線上。

最終版的 Works grid 到內容頁的轉場效果。

統一導覽列

Works 頁面跟其他頁面長得不一樣，導覽列變得不一致。Hero 頁面有自己的風格，Blog 和 About 還在用舊版 Layout header，有背景模糊、漢堡選單和主題切換。

解法很乾脆：把舊 header 整個拆掉。換成跟 Works 頁面一樣的極簡導覽。

全站統一的新 header：左邊 DAZAI CHEN（Montserrat，粗體），右邊 WORK / BLOG / ABOUT（Montserrat，大寫，加寬字距）。沒有背景模糊。沒有漢堡選單。沒有主題切換。

有一個 bug 找了一陣子：內容頁的 nav 在同一個 HTML 元素上寫了兩次 class 屬性（class="header-reveal" class="px-4 md:px-8"）。在 HTML 中，重複的屬性會被靜默忽略，只有第一個生效。所以 padding 的 class 完全沒作用，導致內容頁的 nav 跟 Works 頁面看起來不一樣。合併成一個 class 屬性就修好了。

字體審計

頁面之間的視覺不一致引發了一次完整的字體審計。發現了什麼：

Source Serif 4 從 Google Fonts 載入但從未使用。移除。
Montserrat 只載入了 weight 700，但 tab 設定的是 weight 400。瀏覽器自己偽造了較細的粗細。把 weight 400 加到 import。
一條全域 CSS 規則把 Montserrat 套用到所有 h1 元素，影響了不該套用的頁面。移除全域規則，改為在需要的地方明確套用。

結果是一個清楚的雙字體系統：Montserrat 用於導覽和品牌識別元素（網站名稱、導覽連結、頁面標題、tab），Inter 用於內容（正文、描述、metadata）。

典型的一次 session：Claude Code 處理了 97% 的 token 用量。剩下的 3% 是我，主要都在說話。

反思

從「建構」到「設計」是一種不同性質的挑戰。建構有明確的指標：能不能動？設計的問題更難：感覺對不對？

這週最讓我驚訝的，是語音驅動的工作流程多自然地融入了設計迭代。當你在做幾十次光源、間距、時間的微調時，能夠直接說你想要什麼，而不用翻譯成打字的指令，改變的不只是速度，還有工作的品質。

Hero 頁面的 24 次迭代發生在一個下午。每一次都是口述的調整：「暗一點」、「柔一點」、「人往前走一點」、「加霧」。用打字來做這種快速迭代會很麻煩。用語音，它感覺像一場對話。

資料來源

Claude Code 官方文件
Anthropic - Claude 背後的公司

聯絡我

想學怎麼用 Claude Code，或開始打造自己的網站嗎？填寫這個表單，我會跟你聯繫！

dazai.studio

Dazai Chen

dazai.studio@gmail.com