使用 Claude Code 打造網站 — 第一週紀錄

前言

2026 年 1 月，我決定做一個實驗：完全透過與 Claude Code 協作來建立個人網站。

不只是把它當作程式助手，而是當作開發夥伴——從架構決策、內容撰寫到細節打磨，全程協作。

這篇文章是第一週的完整紀錄。

最終成果總覽

項目	數量
文章數	30+ 篇（中英雙語）
作品頁面	5+ 個專案
互動元件	7 個 p5.js 作品、3DGS viewer
Git commits	100+ 個
技術棧	Astro + Tailwind + TypeScript

Day 1-2：從零開始

建立基礎架構

第一天的重點是把網站骨架搭起來：

技術選型：Astro（靜態網站生成器）+ Tailwind CSS
雙語架構：/ 英文、/zh/ 中文
內容結構：Blog、Works、About 三大區塊

為什麼選 Astro + Tailwind？

Astro：專為內容網站設計，預設不載入 JavaScript（需要時才載入），所以速度很快。支援 MDX，可以在 Markdown 裡嵌入互動元件。

Tailwind：不用寫 CSS 檔案，直接在 HTML 上寫樣式。跟 AI 協作時特別方便，因為樣式和結構在同一個地方，不用切換檔案。

建立工作流程

最重要的發現：定義清楚的協作流程會讓效率倍增。

我建立了 CLAUDE.md 檔案，定義了幾個關鍵指令：

我說	Claude 做
早安 / check in	git pull、啟動 dev server、建立每日報告、顯示待辦
收工 / check out	commit、push、更新報告
backlog	顯示待辦清單

這個「儀式感」確保每天開始和結束時，狀態都是清楚的。

第一批文章

兩天內產出了 20+ 篇文章，主題包括：

Claude Code 系列（介紹、安裝）
3D Gaussian Splatting 系列
NYU 課程介紹（ITP、IDM）
網站開發基礎（GitHub 入門）

學到的事：Claude 寫得很快，但數字和細節常常需要人工驗證。我養成習慣在每篇文章結尾加上「資料來源」區塊。

Day 3-4：功能擴展

論文相關頁面

我的碩士論文需要一個展示空間，這幾天建立了論文專區：

論文主頁
每週進度頁面
課堂筆記區

DragGallery 元件

為了展示作品圖片，做了一個可拖曳的圖片走廊：

自動捲動 + 滑鼠拖曳
手機觸控支援
滑鼠懸停時減速
放開時有慣性效果

3DGS Viewer 整合

把 3D Gaussian Splatting 的成果嵌入網頁（南鯤鯓專案）：

縮圖預覽（Ken Burns 動畫效果）
點擊載入互動 viewer
載入時平滑過場

Creative Coding Portfolio

整合了 7 個 p5.js 作品到 Creative Coding 頁面，其中 3 個做成網頁可互動版本：

LightsUp（燈光遊戲）
LightClock（光時鐘）
HouseBeats（節奏遊戲）

優化：原本的 GIF 檔案總共約 1GB，轉成 MP4 後只剩 19MB。

手機版修復

發現很多元件在手機上跑版，逐一修正：

p5.js 遊戲：改用 aspect-ratio 取代固定高度
圖片 grid：改用 auto-fit minmax 讓手機自動堆疊
GaussianSplatViewer：加上 responsive 處理

Day 5-6：打磨細節

Draft 功能

有些文章還沒寫完但已經建檔了，需要隱藏功能：

在 frontmatter 加 draft: true 即可隱藏
一次隱藏了 8 篇未完成文章

About 頁面重寫

舊的 About 頁面很制式——學歷、經歷、技能列表。

花了兩天重新思考：

「標籤（設計師/工程師/藝術家）都是表象，是幫助他人認識我的接口。但那不是我。」

最後的版本從「關心什麼」出發，而不是從職業出發。

GEO 優化

針對 AI 搜尋引擎（Perplexity、ChatGPT Search）做優化：

加入 JSON-LD 結構化資料
統一品牌名稱
加入中文別名

Day 7：收尾整理

最後一天做清理：

刪除不需要的文章
更新過時的內容
檢查所有連結

協作模式總結

有效的 Prompt 模式

批次更新

把所有 [X] 改成 [Y]

Claude 會啟動多個 agent 平行處理，40 個檔案幾分鐘就完成。

驗證請求

[資料] 幫我 double check

Claude 會查資料來源並更新引用。

錯誤回報

[X] 寫錯了，應該是 [Y]

立刻修正並檢查相關問題。

什麼有效

清楚的工作流程 — CLAUDE.md 定義了我們怎麼協作
每日報告 — 追蹤進度，隔天可以快速接續
批次處理 — 讓 agent 平行作業，效率很高
即時修正 — 發現問題馬上說，馬上改

什麼要注意

數字要驗證 — AI 寫的數字（學費、日期）常常有誤
結構要先定 — 一開始沒定義文章模板，後來要回頭補
標籤要管理 — 標籤會快速增加變得混亂

什麼時候該 Compact

Claude Code 有個 /compact 指令，可以壓縮對話歷史、釋放 context 空間。

建議 compact 的情況：

準備開始新的、不相關的任務
對話開始變慢
想要清空細節，只保留重點摘要

不需要 compact 的情況：

還在延續剛才的工作（例如還在調整同一個功能）
需要 Claude 記得剛才討論的細節和決策脈絡

簡單來說：換主題就 compact，延續工作就不用。

更深的體會

這一週改變的不只是開發速度。

知識的利用率大幅提升——以前學過但沒機會用的東西，現在可以直接跟 Claude 討論、馬上實作。知識不再只是「知道」，而是變成「做出來」。

重新定義生產力——過去覺得「一天能做多少」有個上限，現在那個上限被打破了。開始重新審視：哪些習慣該保留，哪些該改變？

開始愛上輸出——當產出的阻力變小，創作變得像呼吸一樣自然。想法不再停留在腦中，而是直接變成文章、變成程式碼、變成作品。

跨裝置的工作流——Claude Code + GitHub + 手機版 Claude 形成一個循環。走在路上有靈感？用手機跟 Claude 聊，讓它先打草稿、列架構。回到電腦前，Claude Code 接手把草稿變成正式內容，commit 到 GitHub。想法不會不翼而飛，而是被系統接住。

結論

一週下來，我對 Claude Code 的理解從「AI 程式助手」變成「開發夥伴」。

關鍵不是它有多聰明，而是：

你要知道自己要什麼 — 說得越清楚，結果越好
建立協作儀式 — check-in、check-out、每日報告
人負責決策和驗證 — AI 執行，人把關

這不是取代工程師，而是改變工作方式。

資料來源

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

聯絡我

想了解怎麼使用 Claude Code，或是用 Claude Code 開始打造自己的網站？填寫這份表單，我會跟你聯繫！

dazai.studio

Dazai Chen

dazai.studio@gmail.com

前言