如何從 AI 感的網站，演進到個人品牌延伸感的網站？網站開發流程跟 harness 方式分享。
把 AI 做的網站從「AI 感」拉到「個人品牌延伸感」，我的關鍵四件事：
- 用 AI 快速做一版鷹架
- 用 taste skill 快速優化邊排、字句、大方向
- 選符合自己品牌的字體、對比、排版以及給明確的動畫、元件互動的參考
- 可自動測試、迭代的 Harness
流程：骨架 → 方向 → 品味 → 驗證
- 先讓 AI 產一版骨架 — 先把這站「要幹嘛」講清楚就好。我實際跟 AI 講的是：「一條時間軸記錄我的人生、一個文章頁存我寫過的東西、一個精選專案 show case、再放些 Hero、Hobby 之類個人網站常見的區塊」。整站定位是我的個人延伸、一個樞紐站。AI 很快給我第一版架構，AI 感也沒關係，馬上推進下一步
- 導入 taste-skill 選方向 — 一個 Claude 的 skill，先幫我抓大方向。實務上什麼前端 taste skill 都可以，重點是順手叫它把常見的 AI 罐頭 emoji、罐頭排版先清掉（這我就 skill 加減用看看，有些人到這一步就很滿意，我是完全不買單）
接下來是關鍵步驟。
- 餵實際案例給 AI 當參考（這是品味導入的位置）— 直接給參考站網址，連你要的動畫、進場、排版都指名。不要用太抽象的形容詞，什麼「現代」、「精簡」，AI 做出來你也不會喜歡（這個邏輯是基於 AI 的逆向工程能力很強，所以才會有 Lovable 服務以及 design-extract skill）
- 注入我的身份 — 我喜歡的色碼、換上個人品味的字體與排版，別用 AI 預設。我會從 lawsofux 網站找排版靈感。打開瀏覽器去找靈感就對了，不要反問 AI，他接龍不出什麼厲害的東西，看得到才算
- 套上 UX 讓整個網站「活起來」 — grouping（資訊分區）、對比（大小拉層次）、feedback（要不要動畫？滑鼠移過去要不要反應？），把參考站喜歡的進出場直接抄過來。網路上很多人分享動畫設計或是直接問 AI 你想要什麼動畫效果，當成剪影片過場來做
- 搭一套可隨時隨時隨地驗證的 harness — 用 Tailscale 把本機 dev server 開成遠端網址（手機、真機隨時開來看）＋ Playwright MCP 自動驗證、讓 AI 自己截圖確認回傳給我
- 把設計鎖進
DESIGN.md＋spec_lock— 不讓 AI 下次又漂移回通用樣式（後面講）
整體來說就是：快速搭不怎麼樣的第一版鷹架、用 taste-skill 注入大方向、給 AI 實際 UI /UX 的參考站、建構可迭代的開發循環 harness。
下面是一些細節。
字體：導入自己的品味
如果只能改一件事，我選字體，因為它大概佔設計感六成。AI 預設永遠是那幾種字體，換成你自己的字體檔，立刻就不像別人。
找網路上常見的字體（我愛手寫體），還寫了一個字體變換實驗台即時比對，丟三個 font 進去輪流試：Rocky Billy（毛筆）放 Hero 名字、辰宇落雁體放大標、Eagle Horizon 放英文內文。我的毛筆英文名字在首頁出現，我認為我這個人就站出去了。
UX：讓整個網站「活起來」
字體排版定下來之後，下一個關鍵環節是 UX — 這是「一張好看的靜態圖」跟「一個活的網站」之間的差別，超重要，但很多人直接跳過。
先講兩個靜態基本功（仍是推薦讀 Laws of UX，整理得很完整）：grouping 是把相關的資訊分到同一區，讓人一眼知道哪些是一組的、不用動腦；對比則是用大小拉出層次 — 標題夠大、內文夠小，視線才有先後（我個人超吃對比）。
再來是 feedback（UX 領域的），這塊直接對應互動設計，也是讓畫面活起來的核心。你要一個一個去問自己：這裡要不要有動畫（進場、退場、捲動時的反應）？滑鼠移到這個東西上面，要不要給回饋（放大、變色、浮起來）？這些很細，但就是 AI 網站跟「人做的網站」最直接的差別。
具體怎麼拿到好的 feedback？我的做法是叫 AI 去找「有感官體驗」的參考站 — 注意我參考的是 UX、不是 UI：UI 是長相，UX 是它怎麼動。看到喜歡的進場、滑過去的反應，就直接叫 AI 抄。我自己加了打字機效果、Lenis 平滑捲動、自訂游標（小圓點即時跟、外圈用 spring 延遲），整個畫面立刻就有了呼吸感。
harness：先部署再抓蟲
Tailscale 把本機 dev server 開成一個遠端網址，手機、平板、任何裝置隨時開來看；Playwright MCP 給 agent 長手腳，能讀 HTML 每個節點、自己截圖、對照設定值，精準指出哪裡要改，而不是看一張截圖瞎猜；最後讓 AI 自己截圖回報，我只負責看對不對。
另外，我很喜歡 Apple 毛玻璃風格，一開始在做的時候是讓 AI 自己用 CSS 做，但後來我加了一個 harness 的規則，就是未來只要導入新的元件或是功能，都要先確認有沒有現成函式庫可用。未來如果有新功能，他就會參考這樣子的設計脈絡「優先找現成來用」。
DESIGN.md 跟 spec_lock：把 taste 鎖成規格
這一步是當你想把整套東西系統化、不想每次重講時才需要的（理想上 DESIGN.md 一開始就先設計好）。因為對話一長 AI 就會漂移 — 隔幾輪又忘了色碼、又跑去亂選字體。spec_lock 就是用來鎖住設計語言、不讓它每次重新發明樣式。
做法是兩層文件，差別在裡面實際「存什麼」：
DESIGN.md— 存的是理念跟敘事：為什麼整站走暖色單色調、為什麼用毛筆字當主視覺、accent 為什麼要配給制。回答的是「為什麼」spec_lock.md— 存的是可以直接套用的數值：色碼（bg#f5f1e8／ink#1a1714／accent#b1502f）、每個字型負責哪裡（Rocky Billy 放首頁大字、辰宇落雁體放中文大標、內文 Noto Sans TC 20px）、間距跟動態的 token（Loader 2100ms、打字機 95ms 一個字），再加一份禁令清單，回答「用什麼、不准用什麼」（以 harness 角度來看，也可以併進去DESIGN.md）
機器層有效靠三件事：開頭寫死「生成任何新元件前先重讀本檔」對抗記憶漂移；數值是用腳本從線上真實畫面抽出來（design-extract skill 就可以用看看）；還有禁令清單區 — 不只說該用什麼，更明確說不准做什麼，例如：不准用預設字體、手機上的毛筆字不准套 mask／filter（WebKit 會切掉墨韻）、SVG 不准沒 width/height。
spec_lock 就是把我一路用眼睛抓到的 taste，一條條翻譯成機器每次都讀得到的規格，不會一改東西就偷偷回退成通用 AI 樣式。它也剛好是 developer 跟 designer 的協作接口：有 designer 一起時，就用 DESIGN.md（給人讀）＋ spec_lock（給機器）分工。
我這次是做到很後面才補這兩份，下次必須反過來，第一個 prompt 一次注入完，polish 留到最後。
試試看
先用 AI 確認第一版架構，把想要的大東西先架出來，醜，沒關係。給 AI 明確的色碼、字體、排版、風格、UX 動畫，才進細修，同時持續更新 DESIGN.md 與 spec_lock。
培養設計美感，看設計書跟我推薦的網站是很有幫助的，建立一個美感的直覺，往遠離 AI 感的方向前進，可以延伸到音樂跟影像領域（文字就別鞭我了，畢竟我不是大文藻，能整理個文章出來就精疲力竭了