網站又改版了：每篇文章都是一座山
文章目錄（10 節）
先說結論
我想要一個很酷的網站
沒有什麼商業目的，就是想要一個打開會「哇」一下的網站。
整個網站變成一片山
每篇文章是一座山，一顆光點帶你在山裡換頁，像一鏡到底；手機另外做了一套直向版。
全是用剩的 token 做的
7 天、約 16 億 token，換算 API 牌價大約 600 美金，但用的全是好幾個帳號剩下的額度，沒多花一毛。
起點：一堆用剩的 1% token
這次改版的起點其實很實際：我手上有一堆用不完的 token。
-
平常：好幾個帳號輪流用
我有好幾個訂閱帳號，平常開發正事時，一個帳號用到 99% 就會自動切到下一個。
-
每個帳號都剩一點點
切走之後，每個帳號都還剩最後那 1% 沒用到，放著也是浪費。
-
這 1% 拿來改網站
一個帳號的 1% 用完就切下一個，切了好幾個帳號，才把這次改版做完。
既然有剩，那就來把我的官網改一改吧。
風格我心裡早就有底了。很久以前在 X 上看到 Dan Koe 的這篇文章，封面是一張黑底白線的圖，線條很細、很密，我對它印象非常深刻，當時就存起來了。那時候不知道這叫什麼風格，把圖丟給 GPT 問，它說是古早的「木刻版畫」。
好，風格有了，那要畫什麼？
剛好上個月我和 Summer 去了一趟日本上高地，走在梓川旁邊，抬頭就是整排的穗高群峰，真的很壯觀。回來之後那個畫面一直記得，所以就想：網站能不能也是一片山？
想一想還真的滿合的。我的文章其實很像一路走過來的地形，有的篇幅很長、像一座大山，有的只是一篇小記；時間往前走，山就一座一座長出來。
每篇文章是一座山
橫軸是時間，山高是篇幅。寫越多，山越高（所以長文寫起來突然很有成就感）。
全畫面只有一顆光點
它標出最新的文章、你讀到哪裡，換頁時也是它在帶路。
只有線和點
照木刻版畫的規矩：不用陰影、模糊、漸層。夜晚是黑底白線，白天是米色紙上的墨線。
走一遍新的網站
首頁每個地標都是一個入口，基本上就是把上高地搬進來：
山群 → 文章
點進去是「文章全景」，可以沿著時間軸左右走。
山屋 → 關於我
森林邊亮著燈的那間小屋。
吊橋 → 好用工具
一座橫跨兩岸的吊橋，連到我做的小工具。
石堆 → 開發專案
河灘上的石堆，一個專案一顆石頭，一個一個疊起來。
點進文章之後，右邊會有一座屬於這篇的山，每個段落是一段稜線。你讀到哪，光點就爬到哪，讀完一篇等於爬完一座山（運動量 0，成就感 100）。
換頁動畫，被我自己打槍了四次
整個改版最花時間的不是畫山，是「換頁」。我想要從一頁到下一頁，感覺像同一個鏡頭在山裡移動，而不是這頁消失、下一頁跳出來。聽起來很簡單，結果前前後後改了四版：
-
第一版：鏡頭推進
點一座山，畫面就往那座山放大推進去。第一次看很有電影感，但用幾次就不行了，每換一頁都在 Zoom in、Zoom out，看到有點暈。
-
第二版：改成左右平移
我跟 AI 說不要縮放，我要一鏡到底那種左右移動。每一頁在這片山裡都有固定的位置，換頁就是鏡頭往左或往右走過去。
-
第三版：可是好粗糙
平移做出來之後，光點的動態整個不見了，就只是一張圖滑過去。我當下的反應是：「這樣哪需要做這麼久？」（AI：……）
-
第四版：光點領飛，鏡頭跟上
最後讓光點當主角。點下去之後，光點先在原地亮一圈，再拖著彗尾沿著弧線飛向下一頁；鏡頭晚半拍才跟上，像是被它拖著走。背景的山移得比較慢、前面的內容比較快，畫面就有了遠近。
做到第四版我自己覺得還不錯，但我是做的人，看久了一定有濾鏡。所以這裡我用了海總理的 prompt（下一段會介紹），讓另一個沒參與製作的 AI 當評審，只看逐格畫面打分數：
| 項目 | 分數 | 評審講了什麼 |
|---|---|---|
| 設計 | 7 | 線稿地景有質感，但換頁中間露出一刀直直的切邊，像兩張投影片在對推 |
| 易用 | 6 | 點下去之後快半秒畫面都沒動，像是沒反應 |
| 創意 | 8 | 光點每頁都有自己的落點，這套敘事成立 |
| 內容 | 6 | 部分畫面的焦點不夠清楚 |
結論：「再修一輪」。好喔，很誠實。所以兩頁的交界改成沿著山稜的形狀，點下去 0.2 秒內鏡頭就開始動，光點也放大了一點。你現在換頁看到的，就是被評審電完之後的版本。
推薦：海總理的 prompt，我打包成 /web-award
上面那個「照得獎標準一直改、一直審」的做法，來自海總理分享的一句 prompt。它短到不像 prompt，但非常好用：
海總理的 prompt
品質標準以 awwwards、webby awards、FWA 獲得獎項的程度為目標，透過自我檢查，反覆自行提升品質，直到達到該品質標準為止。
它厲害的地方是，你不用跟 AI 講「哪裡要改」，只要給它一個夠高的標準，它就會自己去找差距。我用了幾次之後，乾脆把它打包成 Claude Code 的 skill，叫 /web-award，順便加了一點分工：
-
Sonnet 負責改
對照得獎作品的水準找出差距，只改那些地方，改完真的打開畫面看，不是只讀程式碼。
-
Opus 負責審
另外派一個 Opus 唯讀審查，不給它看改了什麼、也不給自評，讓它自己判斷有沒有達標。
-
預設跑四輪
每一輪把 Opus 列的差距當成下一輪的輸入，跑完再老實報告哪些還沒達標，不准硬說達標。
重點是「改的人」和「審的人」分開。同一個 AI 自己改、自己審，很容易覺得自己很棒（跟人一樣 XD）。
有在用 Claude Code 的話，可以直接拿去用：在 ~/.claude/skills/ 底下建一個 web-award 資料夾，把下面整段存成裡面的 SKILL.md，之後在 Claude Code 打 /web-award 就能跑。
/web-award 完整內容 存成 ~/.claude/skills/web-award/SKILL.md
---
name: web-award
description: 以 Awwwards、Webby Awards、FWA 得獎作品的水準為目標，反覆改進目前的網站或前端成果，預設跑四輪。每一輪由 Sonnet 改進，由 Opus 審查是否達標。僅在使用者明確輸入 /web-award 時使用。
model: sonnet
disable-model-invocation: true
---
品質標準以 awwwards、webby awards、FWA 獲得獎項的程度為目標，透過自我檢查，反覆自行提升品質，直到達到該品質標準為止。
## 分工
- 每一輪的改進由你（Sonnet）自己做。
- 每一輪的審查，判斷品質是否達標，一律交給 Opus。用 Agent 工具派一個子代理，`model` 設為 `opus`，不要自己審自己。
## 執行方式
任務範圍：`$ARGUMENTS`。沒有給參數時，就是目前對話裡正在做的成果。
預設跑四輪。使用者在參數裡指定輪數時，照他指定的。每一輪依序做三件事：
1. 改進：你先對照得獎作品的水準，找出還差在哪裡，只改那些差距，不順手改其他東西。第二輪起，優先改上一輪 Opus 列出的差距。改完後真的開啟畫面或執行程式，不要只讀程式碼。
2. 審查：派 Opus 子代理唯讀審查。任務單要寫明成果所在的路徑或網址、上面那句品質標準，並要求它逐項指出具體差距（哪個畫面、哪段程式）和達標與否的結論。不要把你自己的改動說明或自評塞給它，讓它獨立判斷。
3. 收下結論：把 Opus 的差距清單原文記下來，作為下一輪的輸入。
## 結束
四輪跑完後，回報每一輪改了什麼、Opus 指出什麼。最後引用最後一輪 Opus 的結論，說明是否達標。沒達標的地方明確列出，不要硬說達標。手機版，乾脆另外做一套
桌機拿滑鼠在山裡拖來拖去很好玩，但拿到手機上，我發現這件事不太對：
原本：手機也是橫向地景
- 要左右拖曳才看得到整片山，但大家的拇指都是上下滑
- 左右滑很容易跟手機「返回上一頁」的手勢打架
- 螢幕太窄，遠近感幾乎看不出來
現在：手機改成直向
- 首頁第一屏是一整張山景，往下滑就是最新文章、工具、專案
- 文章全景變成直向的時間軸，往下走，就是往過去走
- 換頁改成上下推移，光點一樣會帶路
時間軸上每篇文章旁的小山，跟桌機全景裡是同一座山，所以從手機換到電腦，還是認得出來。
幕後：這次我怎麼跟 AI 一起做
這次改版的程式幾乎都是 AI 寫的，我主要的工作是看、決定、打槍（打槍很重要）。跟上次比，最大的差別是我把「寫」和「審」拆給不同的 AI：
Claude Code：規劃和實作
主控用 Opus，拆工作、派子代理寫程式，還會自己錄逐格畫面檢查動畫，做完一段就放到本機給我看。
Codex：獨立審查
動工前先審計劃，做完再審程式。它不寫，只負責挑毛病。
另一個 AI 評審：盲審
不看程式，只看畫面，用設計獎的標準打分數。
我：看、決定
方向對不對、好不好看、要不要上線，最後還是我拍板。
審查真的有抓到東西。上線前的程式審查跑了三輪，前兩輪各抓到兩個嚴重問題，第三輪才通過：
- 手機上點「更多」，選單沒出來，整頁卻被鎖住不能操作
- 在 MacBook Pro 這種高解析度螢幕上，全景停在某些位置會一直重畫同一批山，默默吃掉 CPU
- 換頁換到一半按上一頁，回來之後首頁的連結點不了
這些都是我自己點來點去不太會發現、但讀者一定會遇到的問題。
上線後還是踩到坑：快取
部署完我自己打開網站，咦？動畫不會動、舊的地圖還在，用無痕模式看卻是正常的。原因是瀏覽器還留著舊的樣式檔，新的網頁配上舊的樣式，畫面就半新半舊。後來讓每次建置都在樣式和程式的網址後面加上內容指紋，檔案一改網址就跟著變，之後部署就不會再這樣了。
花了多少：模型、token、時間、錢
每次分享 AI 開發，大家最常問的就是「這樣要花多少？」所以這次我把 Claude Code 和 Codex 的使用紀錄全部撈出來算了一遍：
| 模型 | 做什麼 | token 用量 | 照 API 牌價 |
|---|---|---|---|
| Claude Sonnet 5.5 | 子代理寫程式、畫圖、跑測試 | 約 11.9 億 | 約 US$407 |
| Claude Opus 5.5 | 主控、規劃、拆工作、派工 | 約 3.7 億 | 約 US$176 |
| GPT-6.1 Sol（Codex） | 計劃審查、程式審查 | 約 0.9 億 | 約 US$23 |
| Claude Haiku 5.5 | 零星小任務 | 約 27 萬 | 不到 1 美金 |
| 合計 | 約 16.4 億 | 約 US$607 |
時間
10/31 晚上開工，11/7 上線，橫跨 7 天。真正有在動的時間（中間停超過 10 分鐘就不算）大約 37 小時。
用 API 付
大約 US$607，換成台幣差不多 2 萬元上下。
用訂閱付
額外花費：0 元。這次用的全部是幾個訂閱帳號「用剩的額度」，下面解釋。
看到 16 億 token 我自己也嚇一跳，但仔細看會發現，絕大部分是「快取讀取」，也就是 AI 一直重讀同一份程式和上下文，這部分很便宜。真正貴的是寫出來的東西和第一次讀進去的內容。
不過就像開頭說的，這 600 美金我一毛都沒多花，全是好幾個帳號的「剩菜」收集起來，煮成一個網站（環保 XD）。
這些數字怎麼算的 資料來源、價格、哪些沒算進去
- token 數來自 Claude Code 的對話紀錄（含所有子代理）和 Codex 的 session 紀錄，期間是 2026/10/31 到 11/7，只算這個網站的專案。
- 價格用官方 API 牌價（每百萬 token）：Opus 5.5 輸入 $4、輸出 $20；Sonnet 5.5 輸入 $2、輸出 $10；兩者快取讀取都是 $0.20、快取寫入以 1 小時快取計算。GPT-6.1 Sol 輸入 $2、快取輸入 $0.10、輸出 $10。
- 台幣以 1 美金約 32 元粗估。訂閱是包月，這次用的是各帳號用剩的額度，所以沒有額外花費。
- 這次寫這篇文章本身的用量也算在裡面（因為它就是這個網站的一部分 XD）。
也想做一個？送你一段萬用 prompt
如果你只是想要一個長得跟我一樣的網站，那等我開源就好 XD 這段 prompt 想送的是這次我覺得真正有用的「做法」，風格和主題都換成你自己的。
這次做下來，我覺得重點其實就三件事：
一個隱喻
先想好「你的網站是什麼地方」。我的是一片山，你的可以是一座城市、一片海、一間書房，內容就是裡面的東西。
一套規矩
挑一種你喜歡的風格，然後定死它不能做什麼。我的規矩是只用線和點，限制越清楚，AI 做出來越統一。
一條動線
換頁時，讓讀者覺得是在同一個空間裡移動，而不是一頁消失、下一頁跳出來。
把下面這段丟給 Claude、ChatGPT 或任何會寫程式的 AI，【】裡面換成你的東西就好：
請幫我設計並做出一個網站的首頁原型（單一 HTML 檔，打開就能看）。
【我的網站】
- 這是一個：【部落格／作品集／店家／產品介紹……】
- 主要內容有：【例如：文章、作品、關於我、聯絡方式】
- 我想要的感覺：【例如：安靜、手作感、像在逛一座城市】
【視覺風格】
- 風格參考：【風格名稱，或貼一張你喜歡的圖。不知道叫什麼，可以先把圖丟給 AI 問「這是什麼風格」】
- 先幫我把這個風格整理成 5 條「可以做／不能做」的規矩（例如只能用線條、只能用兩種顏色、不准用陰影），整個網站都照這 5 條走。
【空間隱喻】
- 我的網站是一個：【一片山／一座城市／一片海／一間書房……】
- 請把我的內容對應成這個空間裡的東西（例如：一篇文章＝一棟房子，越新的越靠近入口），並先給我一張對照表確認。
- 讀者在首頁就要能一眼看出：內容有多少、最新的是哪個、可以往哪裡走。
【換頁的感覺】
- 換頁時要像在同一個空間裡移動（例如鏡頭平移、有一個東西帶路），不要整頁淡出淡入，也不要一直放大縮小。
- 動態要克制：讀者點下去馬上要有反應，整段控制在 1 秒內。
【基本功，不能省】
- 手機另外設計，不要把電腦版直接縮小：想想手機上用拇指怎麼逛這個空間。
- 系統開啟「減少動態」時要關掉動畫；沒有 JavaScript 也要看得到內容；所有入口都是真的連結，鍵盤可以操作。
【做法】
- 先給我 2 種不同的空間構圖草案，我選一個再做。
- 用 6–8 筆假資料做出第一版，做完自己打開畫面檢查，列出你覺得還不夠好的 3 個地方。
- 品質標準以 awwwards、webby awards、FWA 獲得獎項的程度為目標，透過自我檢查，反覆自行提升品質，直到達到該品質標準為止。一次不會到位，這很正常
我自己的換頁動畫就改了四版。第一版出來之後，看哪裡不順眼就直接講，像「太粗糙了」「不要縮放」這種話，AI 其實都聽得懂。最後那一句就是海總理的 prompt，有用 Claude Code 的話，也可以直接用我打包的 /web-award。
一些小彩蛋，和想聽你的感受
還有幾個做了但不太顯眼的地方：
- 滑鼠移到山上，那座山會微微放大，背光的那一面會多刻一層線，像版畫師回頭再補一刀
- 右上角可以切換白天和夜晚
- 覺得動態太多可以按暫停；如果你的系統開了「減少動態」，網站會直接停掉動畫，換頁也不轉場
說穿了，這次改版就是想把上高地的那個畫面，留在自己的網站上。好不好看、好不好用，還是要問讀者。換頁動畫會不會太多、手機上好不好讀、哪裡卡卡的，都歡迎留言或私訊告訴我，我會拿去繼續改（然後繼續燒 token XD）。
留言