二十四個範例照規則生，風格都一樣；七個網站照一個參考改，樣子各不相同
八月底我的個人品牌網站樣板補到二十四份範例，加了美學族譜、檢查器也全修過，滑完還是覺得風格都一樣，最後砍到剩三個。九月底的週三直播換了做法：拿一個喜歡的開源網站整個當底，只把資料換成我的。同樣三句話換七個參考，做出來的樣子各不相同。
先講結論：叫 AI 照一套規則生網站，做出來很容易長得一樣，而且我那時的檢查器量不出來。直接拿一個喜歡的開源網站當底，只把資料換成自己的，做出來的樣子就各不相同。
這兩件事隔了一個月，可以放在一起看。
八月底：二十四份範例
personal-brand-site-starter 是一份給 AI 代理人照著跑的作業流程，把一個人的話問出來，做成一頁式的個人品牌網站。包裡有一面範例牆，放各行業的範例站。
範例不是憑空亂生的。8/27 樣板裡就有參考站清單；8/28 我指出範例全是同一種美學，叫它去看我做過的其他網站、上網找參考，它掃了我二十個 repo，拆出三族，再從外面補兩族，寫成七族的「美學族譜」，每個範例照其中一族的配色和動畫性格生。
八月三十一號早上，我對這個 repo 只講了一句話：還缺什麼行業。之後的兩個多小時，AI 補了十個行業，二十個行業全部有範例，總共二十四份。範例、檢查器、修正都是 AI 做的，這段時間的 commit 裡沒有再出現我。
過程中 AI 寫的檢查器抓到一批我眼睛看不到的缺陷：
- CSS 的
ch單位量的是「0」的寬度，所以max-width: 34ch排中文只有 18.9 個字，AI 設的時候以為是三十四字。 - 桌機溢出 27px、手機溢出 40px 跟 17px，縮圖上看不出來。
- 對比檢查器量錯顏色。AI 做了一頁陷阱頁，真實對比 1.60:1，幾乎讀不到，舊的檢查器量出 17.15:1，直接判通過。
這些都修好了。
九月二號：滑完那面牆
我把範例牆從頭滑到尾，滑到後面就審美疲勞，因為二十四張的風格都一樣。
疲勞是感覺，講不出所以然。我叫它再深入研究、改到好，它先去量：第一屏最大字級的中位數只有 49px，二十二個第一屏完全沒有視覺，字體全部同一種。配色其實每個都不一樣，但救不回風格。檢查器 check.mjs 裡沒有任何一條規則在看這個。
它提議留花店、律師、vj 三個，我回了一句對，其餘二十一個刪掉。留下來的三個又退了兩次，第二次是：花店的 CSS 沒有花香氣質，律師像個人接案不像事務所，vj 看完對這個人完全沒印象。
九月三十號：拿一整個網站當底
這場週三直播講個人網站，這次換了做法：先找一個喜歡的開源網站，整個拿來當底，再叫 AI 把資料換成我的。
示範品是參考 Bruno Simon 的 3D 作品集，開一台車在島上逛作品。我給 agent 的資料就是部落格網址，作品、角色、直播場次都是它自己去抓的。9/29 早上 10:16 開始，半小時先做出 2019 版；下午看了 2025 版改做它，4:56 上線，照我逛完回報的問題修到 6:48。
直播當天傍晚開播前後，同一份資料清單、同樣三句話，換七個參考網站，每個交給全新的 agent 從零做到可以部署，再推上線：
| 參考的網站 | 樣子 | 從零到上線 |
|---|---|---|
| DevPortfolio | 簡潔的單頁履歷 | 7.5 分 |
| WebShell | 終端機，上方有可以點的指令 | 8 分 |
| vCard | 名片式，分頁切換 | 10 分 |
| LiveTerm | 終端機，打指令看內容 | 10 分 |
| VSCode 作品集 | 長得像 VS Code | 11.5 分 |
| Developer Portfolio v2 | 開發者風格，附貪食蛇小遊戲 | 14.5 分 |
| 復古電腦 | 3D 的 CRT 終端機 | 23 分 |
資料一模一樣，七個做出來的樣子各不相同，連兩個終端機風格的操作方式都不一樣，因為長相是從參考來的。
直播時我講到為什麼一定要先找參考：「憑空想像的，其實我之前有試過了，就是用描述比較做，但是其實做起來效果都蠻差的，因為你的描述都會比較匱乏。」接著是：「反而不是說 AI 做不出來，是你用言語難以形容出你要什麼東西。」
像開車逛作品的 3D 場景，只說「3D 場景、可以開一台吉普車」，AI 做出來可能也不是心裡想的樣子。找到一個範例給它，後面要換車、換場景、換配色都很自由。
八月那二十四份沒有拿一個網站整個照著改，是照樣板裡的族譜和規則各自生的。量得到的缺陷都修了，風格還是都一樣。
兩把尺還是都要
換了做法，還是要自己驗收。AI 每次說做好了，我就開車逛一圈，下面這幾條 AI 交件時都沒提：
- 黑洞先生被寫成「格莉奇的製作人，什麼都吃」，沒給設定的地方 AI 自己補了。
- 角色圖被調暗，白底不見了。
- repo 城市的樓離得很遠、沒有馬路，看起來像沙漠。
- 選單預覽圖還寫著 BRUNO SIMON；AI 順著查下去，連分享圖也寫著 Bruno’s。
反過來也有。9/29 晚上另外拿一個沒看過我們版本的 agent 從零重做一次，它自己截圖巡過，抓到我們版本漏掉的原作痕跡：背景音樂的檔名是原作者寵物的名字。
八月那次，機器量到欄寬差一半、對比量錯，我眼睛看不到；我看得到的風格都一樣，機器那把尺上沒有那一格。九月這次，有的是我開車才看到，有的是 AI 截圖才抓到。兩把尺都要。
想自己做一個
- 特效與個人網站蒐集站，37 個開源個人網站，每個附 Demo、原始碼、授權：https://yazelin.github.io/web-effects-collector/
- 9/30 直播的錄影、簡報、講義（含完整的三句咒語）：活動頁
- 我的個人網站：https://yazelin.github.io/drive-folio-2025/
- 個人品牌網站樣板：https://github.com/yazelin/personal-brand-site-starter