使用 Claude Code 打造網站 — 第二週：從建構到找到自己的聲音
第二週不再是建造——而是關於身份、打磨，以及把一個網站變成真正代表自己的東西。
前情提要
在第一週裡，我用 Claude Code 從零建了一整個網站——30+ 篇文章、互動元件、雙語架構。速度很快、產出驚人，老實說有點上癮。
第二週完全不同。骨架蓋好了，接下來是更難的問題：這個網站真的代表我嗎？
第二週成果總覽
| 項目 | 數量 |
|---|---|
| 作品集作品數 | 10 個燈光設計作品 |
| 自製元件 | PhotoGrid、ImageCompare、VideoCompare |
| 影片壓縮 | ~2GB → ~80MB |
| About 頁面改寫 | 3 個版本 |
| 拓展到的平台 | Medium、LinkedIn、YouTube |
Day 8：About 頁面的危機
當履歷格式失敗的時候
舊的 About 頁面是一張清單：學歷、經歷、技能。換個名字也說得通。
我花了一整天跟這件事搏鬥。突破點來自一個簡單的問題：訪客在點進 About 之前，已經看過我的作品了——他們真正想看的是什麼？
不是履歷。他們想知道是什麼驅動我。
最終版本從「一個在設計、藝術與科技之間游移的人」開始，先談我在乎什麼，而不是我做過什麼。寫了三版，才終於感覺像是我自己。
心得：AI 寫得很快，但聲音需要時間。Claude 幾分鐘就能產出一版，但人的決策——留什麼、刪什麼、什麼語氣才是真實的——那才是真正的工作。
GEO 優化
在重新思考內容的同時，我也針對 AI 搜尋引擎（Perplexity、ChatGPT Search）做了優化：
- 加入 JSON-LD 結構化資料（Person、WebSite、BlogPosting）
- 全站品牌名稱統一為「Dazai Chen」
- Person schema 加入中文別名：陳大再、大再
Day 9：元件與導覽
ImageCompare & VideoCompare
我的南鯤鯓 3DGS 作品需要前後對比——原始 3D 掃描 vs. AI 重新打光的版本。做了兩個新元件：
- ImageCompare：拖曳滑桿比較兩張圖片
- VideoCompare：同樣的概念，但是同步播放影片
滑桿一開始用 React state 追蹤位置，結果會卡。改成 useRef 直接操作 DOM 就順了——60fps 的流暢互動。
導覽改版
小改動，大差異：
- 語言切換從下拉選單簡化成單一切換按鈕
- Header 加入社群連結（Instagram、LinkedIn）
- 手機版：不用開選單就能看到社群 icon
- 所有文章底部加入聯絡資訊（一次更新 56 個檔案）
最後那項——在所有文章加入聯絡區塊——Claude 大概花了 2 分鐘就同時更新完 56 個檔案。平行處理在這種批次操作上真的很有用。
Day 10-11：走出網站
多平台內容
網站成為了餵給其他平台的內容中心：
- 重寫 3DGS 文章，加入視覺展示（輸入照片 → 4 支輸出影片）
- 製作 LinkedIn 和 Instagram 的社群貼文
- 準備 Medium 文章，轉換 GIF 和比較表格圖片
- 撰寫 YouTube 影片說明
工作流程：在網站上寫一次（包含所有豐富媒體），再針對各平台調整。網站是唯一的真相來源。
論文文件化
我的 NYU 碩士論文需要一個活的文件空間。建了一個 PIN 保護的專區：
- 每週進度頁面
- 課堂筆記（含教授回饋）
- 用 Whisper 轉錄課堂錄音
- 系統架構圖
Claude 幫忙轉錄和整理，但概念性的工作——區分記憶研究中「封存」（Archive，靜態）vs「重訪」（Revisit，個人）vs「編輯」（Edit，分享用）——那是寫作過程中浮現的純人類思考。
影片壓縮流程
這週處理了大量影片。我的壓縮流程：
原始影片 (100-400MB)
→ ffmpeg -crf 28 -preset slow (10-16MB)
→ -movflags +faststart (網頁串流)一支影片經過 4 次迭代（fog2 → fog3 → final → 新版本）才感覺對了。Claude 處理 ffmpeg 指令，但創意判斷——這個品質夠好嗎？——永遠是我的。
Day 12-13：作品集深潛
記錄十年的工作
這是第二週最有意義的部分。我有 10 多個燈光設計作品，只存在記憶和散落的檔案裡。Claude 幫我好好記錄下來：
巴黎文化奧運 臺灣館 ——在 Parc de la Villette 演出超過 100 場。我找出真實的技術規格：PAR LED COB200 ×42+8、PC 300W ×12、Starway Solar 1050 ×8。寫下了紅燈籠 FOH 問題的解法——一個我真心驕傲的設計挑戰。
流水席 ——臺南藝術節。加入 3D 燈圖、4 張 Wysiwyg 預視算圖，記錄了光束編排邏輯——如何為一場融合歌仔戲、現代舞和電子音樂的演出創造視覺語言。
薩泰爾 炎上 ——加入完整設計流程：初稿、Wysiwyg 二稿、最終成品。嵌入 YouTube 演出片段。
PhotoGrid 元件
這些作品都需要一致的照片展示方式。做了 PhotoGrid：
- hover 放大效果（只用 CSS transform——
filter在暗色照片上會卡） - 點擊打開 lightbox
- 一次批次套用到 20 個檔案（10 作品 × 中英文）
年份篩選器
Works 頁面加了年份篩選器——簡單的文字加底線樣式。小功能，但當你有橫跨 2016-2026 的作品時，立刻讓作品集更好瀏覽。
Day 14：SEO、作品集大更新、展望未來
SEO 檢查
一早先做了全站 SEO 檢查。llms.txt——告訴 AI 代理你網站內容的檔案——還留著 [Your Location] 和 your@email.com 這種佔位文字。更新為完整的網站清單：15 篇已發布文章、14 個作品、4 個實驗。
查了 Google Search Console：34 頁已索引，流量來源美國 50%、英國/日本/新加坡各 17%。日本的流量大概是在搜尋太宰治，不是我。
作品集大更新
Day 14 的主力是幫 6 個作品補上新的視覺素材——燈光測試照、預視算圖、煙霧流體圖、演出照片。每一筆都中英文同步更新：
- 我用鋤頭殺了我老爹 — 新增燈光測試照（剪影測試、手工煤油燈、LED 壁爐）、預視算圖、2 張演出照。替換最終版燈圖。
- 永恆的直線 — 新增煙霧流體控制圖，解釋溫度與氣流如何創造霧層效果。新增 3 張演出照。
- 聆聽花開的聲音 — 新增結構總覽照、SketchUp 預視模型、新燈圖、2 張演出照。建立「裝置介紹」新章節。
- 府城流水席 — 新增 1 張演出照。
- 仲夏夜汁夢 — 新增 1 張演出照。
- 感質 — 更新標籤。
同時統一了所有燈光設計作品的 tools 標籤——把軟體名稱（Wysiwyg、SketchUp）改成描述性標籤（燈光設計、戶外、沉浸式）。
潛在客戶收集表單
建立了一份 Google 表單，給想學 Claude Code 或想用它打造網站的讀者填寫。把表單連結加到 7 對文章（共 14 個檔案）——所有 Claude Code 與網站開發相關的文章。
網站快照
用 Puppeteer 自動截取首頁、部落格、作品集、關於頁面的全頁截圖——為第 14 天的網站樣貌留下視覺時間戳。這樣之後寫第三週、第四週時，可以回頭看網站怎麼演變的。
第一週與第二週的差別
第一週是關於建構。第二週是關於身份。
第一週的問題是：這個能上線嗎？ 答案是可以，速度驚人。三十篇文章、互動元件、雙語全部搞定。
第二週的問題變了：這真的是我嗎？ 這是本質上不同的問題。Claude 可以在幾秒內寫出一個 About 頁面，但花了三版和一整天的思考才找到對的聲音。Claude 可以在幾分鐘內記錄一個燈光設計作品，但選擇哪些細節重要——巴黎的紅燈籠問題、臺南的光束編排邏輯——那需要親身經歷。
作品集的啟示
記錄我的燈光設計作品，意外地讓我很感動。這些作品存在記憶裡，但從來沒有一個好好的家。把它們寫下來——技術規格、設計決策、創作挑戰——感覺像是給了它們應有的尊重。
關鍵是：沒有 AI，我不會做這件事。不是因為寫起來很難，而是因為阻力太大。設定圖片排版、壓縮影片、做比較滑桿、建雙語版本——這些開銷扼殺了動力。移除阻力，突然你就想要記錄一切。
AI 作為鏡子
About 頁面改寫時發生了意料之外的事。每次 Claude 產出一版，我讀了就覺得：沒有錯，但不是我。 AI 成了一面鏡子——它呈現出各種版本的我，讓我接受或拒絕，在這個過程中，我找到了真正共鳴的東西。
最終的 About 頁面不像 AI 寫的。但 AI 對於抵達那裡的過程不可或缺。
第二週的技術模式
有效的模式
批次內容更新
在所有 56 個 blog 和 works 檔案加入聯絡區塊Claude 的平行代理高效處理。同樣的任務手動做至少一小時。
元件迭代
滑桿會卡頓 → 從 useState 改成 useRef快速回饋循環。描述問題，拿到修正，立刻測試。
影片壓縮流程
壓縮這支影片，品質保持合理，加 faststart 給網頁用Claude 懂 ffmpeg 參數。我判斷輸出品質。
不管用的地方
- 聲音與語氣 — AI 預設是通用的。永遠需要人的編輯才能做到真實。
- 創意篩選 — 6 張比較圖裡留哪 2 張？那是品味，不是運算。
- 平台適配 — 把網頁文章轉成 Medium 或 LinkedIn 不只是格式轉換。每個平台有自己的節奏。
結語
兩週後，我與 Claude Code 的關係又進化了。
第一週：工具 — 它建造我描述的東西。 第二週：夥伴 — 它處理後勤，我專注在意義。
網站從「功能性的作品集」變成了「我真心覺得驕傲的東西」。不是因為技術，而是因為移除阻力給了我空間去思考什麼才真正重要。
如果第一週證明了 AI 能快速建造，第二週證明了更重要的事：速度為深度創造了空間。
當你不用花幾小時在圖片排版和影片壓縮上，你就把時間花在思考 About 頁面。當批次更新從一小時變成 2 分鐘，你就把那一小時投資在好好記錄你最好的作品。
這才是真正的轉變。不是更快的產出——而是更深的產出。
網站快照 — Day 14
網站一直在進化。以下是第 14 天時的樣子，作為視覺紀錄留存。
相關文章
- 使用 Claude Code 打造網站 — 第一週紀錄 - 從零開始建站
- 什麼是 Claude Code？ - 完整功能介紹
- Claude Code 新手安裝指南 - 安裝教學
參考資料
- Claude Code 官方文件
- Anthropic - Claude 的開發公司
聯絡我
想了解怎麼使用 Claude Code，或是用 Claude Code 開始打造自己的網站？填寫這份表單，我會跟你聯繫！