叫 AI 做網頁，怎麼不像 AI 做的？

1 · 為什麼你叫 AI 做的網頁都長一樣↑ 回本頁選單

打開一批「AI 幫我做的網站」，字型十之八九落在同一批名字上，Inter 幾乎必然在列。這不是 AI 的審美選擇，是它根本沒有選——Inter 對網頁，等於 Roboto 對 Android、Arial 對作業系統，都是「沒有人特別交代」時留下的痕跡。AI 選字型不是憑品味，是抄它讀過最多次的答案。

這件事值得拆開看：「AI 做出來的東西長得一樣」背後疊了三種機制，不是同一件事講三次。第一種是多數決——抄訓練語料裡出現最多次的寫法，字型只是最好懂的例子，CORS 設定裡「能跑但不安全」的萬用字元寫法是後端版本，Svelte 4 舊語法蓋掉 Svelte 5 runes是框架版本，兩處已講過細節，這裡不重講。

第二種比較少人講，這段是我的推論，沒查到能直接引用的實測依據：AI 不只抄最多人寫的答案，訓練過程也把它推向「不容易出錯」的平均值——保守、不踩線，往往比大膽但正確更容易過關。這跟「抄最常見寫法」是兩件事，一個是統計多數，一個是被刻意拉向安全。第 8 節會回頭講代價：拉高地板的機制，也在把天花板往下壓。

第三種是你自己的 repo 造成的：AI 改網站先讀現有程式碼，挑出現最多次的寫法照抄。「地基本身混亂，AI 只會忠實複製這份混亂」——反過來也成立，地基乾淨，AI 一樣忠實複製那份乾淨。第 5、6 節的規範檔跟 token 檔，說穿了就是刻意汙染這個複製源，把 AI 抄的對象換成你要的方向。

vocus 作者 qkangber（2026-06-12 發布、06-28 更新）講過一句很準的話：「大型語言模型的本質是『機率預測』，它永遠在找統計上的『最大公約數』」🌐社群。WitFoo 的 Charles Herring 講舊系統現代化時用過一個更準的比喻——「地質記錄」：沒有明確的標準文件時，每次對話都做出稍微不一樣的決定，程式碼一層層疊起來，整個 codebase 慢慢變成一份「某個星期二的最佳實踐」的地層記錄（原文講的是後端 codebase，這裡借用到網站語境）。👤達人

所以這頁分兩半講。前半（第 2、3 節）講骨——技術棧怎麼選，要快、要果斷；後半（第 4 到 7 節）講肉——骨選對之後，風格要怎麼治理，才不會又長回同一張臉。

2 · 第一個岔路：這個網站到底需不需要 build↑ 回本頁選單

2.1 AI 的預設是推土機

被要求「做一個網頁」，AI 極高機率吐出 React + Tailwind + 一整包設定檔——即使你只要一頁自我介紹。這是第一個要點名的 AI 味，不是視覺上的，是架構上的：拿推土機種一盆花。連帶症狀：只要一個 HTML 檔，AI 卻常生出 vercel.json、netlify.toml、GitHub Actions workflow、甚至 Dockerfile——這些對「丟一個 HTML 檔上去」全是多的。

可直接複製的 prompt

不要用任何前端框架（不要 React、Vue、Svelte），也不要用 CSS 框架（不要 Tailwind、Bootstrap）。輸出一個單一 HTML 檔案與一個單一 CSS 檔案，不要產生 package.json 或任何建置、部署設定檔。

這句擋的是整個技術棧；同一招縮小到單一功能一樣管用——流量稽核儀表板那頁只針對兩件事下禁令（引外部圖表函式庫、色碼 hardcode），並指定用 vanilla JavaScript + inline SVG 手刻，範圍是元件不是整站。

2.2 2026 年不需要框架的門檻比你以為的高

過去要靠工具鏈才有的東西，瀏覽器現在原生就有：CSS 巢狀、:has()、subgrid、container queries、@layer、<dialog>、popover、@starting-style、clamp()，還有 ESM 配 import map 與 modulepreload。多數已經是「直接寫、不用想」的等級；popover 與 @starting-style 較新，老裝置要留退路，<dialog> 則點背景關閉（light dismiss）Safari 還沒有，那三行 JS 省不掉。原生 CSS 巢狀不是「2026 年才能用」——四引擎 2023 年底到齊（Firefox 117、Chrome/Edge 120、Safari 17.2）✅官方，連要不要顧兩年前舊裝置這個顧慮都消失了。

過去要 build 的理由也逐條消失：Sass 巢狀、變數原生都有了；autoprefixer 處理的前綴不再需要；bundler 消 waterfall 的功能 modulepreload 也有——但有但書：它要生效，得先在 HTML 列出整條相依圖，淺專案沒問題，一旦裝了真 npm 套件，列清單就得先有掃相依圖的工具，等於把想甩開的 build step 請回來一半。JSX 式元件化，custom elements 配 <template> 也做得到，開發體驗差距仍在。

2.3 什麼時候該收回「不准 build」這條限制

兩欄不是三選二讓你猜，是同一條軸線的兩端。收回限制的判準不是「別人都在用」，是自己的專案開始重複付代價——管到複製貼上第 4 次同一段 header，就是在用人工維護一件本該讓工具做的事。

中間地帶：只想要「版型加 Markdown」、不想學框架的人可以走輕的路——Astro 沒掛 UI 框架時輸出純 HTML，不送 client JS，這是「有 build、輸出仍純靜態」的甜蜜點。

3 · 選了 Vite + shadcn，你只拿到地板↑ 回本頁選單

骨這一半：2026 的決策樹（短、果斷）

你要做的網站分兩種：讓人讀東西，還是讓人操作東西。下表五條，對號入座，不用來回猶豫。

Astro 這格不借「壓倒性社群共識」撐腰——基於理由我建議它：沒掛 UI 框架時輸出純 HTML、不送 client JS；內建 Markdown 路由。（附帶一提：Astro 2026 年 1 月起由 Cloudflare 接手 stewardship、維持開源✅官方——這是背景資訊，不是我建議它的理由。）

Rolldown 之爭已結束：Vite 8（2026-03-12 起）把它訂為單一預設 bundler，沒有 opt-in✅官方，rolldown-vite 已被標成僅供從 v7 遷移用（原文，出自 npm registry 的 deprecated 欄位：Use this package to migrate from Vite 7 to Vite 8. For the most recent updates, migrate to Vite 8 once you're ready.）✅官方。AI 若還在幫你裝它，是 2025 年的舊資訊，該擋下來——這是「AI 餵你過期答案」最乾淨的實例。真正有感的不是「快幾倍」，是 dev 與 build 共用一顆引擎，少了「本機好好、build 壞掉」的鬼故事。

這張表的前提是從零開新專案；手上有舊專案要遷移，屬於另一種工程，完整七階段實測（10 秒→3 秒建置、17 個高風險漏洞降到 4 個低風險），這裡不重複。該頁也提到一個旁證：沒有 AGENTS.md 時，Codex CLI 對建置工具一樣會猜錯——治理方法留給第 6 節。

shadcn/ui 的預設值為什麼是「佔位符不是答案」

三個指令、5 分鐘裝完 shadcn/ui 三件套，操作步驟已經寫好，這裡不重貼指令——裝完之後才是問題開始的地方：三件套解決的是「AI 讀不讀得到專案上下文」，沒解決「上下文本身是不是只有預設值」。

shadcn/ui（把元件原始碼複製進你 repo 的 UI kit）官方文件開場就講明白：這不是元件庫，是「你要怎麼打造自己元件庫」的方法✅官方。五條原則之一就叫 Beautiful Defaults——官方寫下的是這個原則名稱，而 AI 味的張力就從這四個字裡長出來。

機械成因很單純：預設 baseColor 是 neutral，此設定下所有語意色 token 的 chroma（OKLCH 裡代表飽和度的數字）都是 0——--primary: oklch(0.205 0 0) 就是一片深灰✅官方。不是選得醜，是根本沒有顏色。（限定：--chart-1 到 --chart-5 是有彩色的；七個 baseColor 裡 Mauve、Olive、Mist、Taupe 是低彩度不是零彩度，零彩度只發生在 neutral 這條語意色路徑上。）

一個字能改全站：--radius: 0.625rem 是官方基準值，由它推導出一整組刻度✅官方。改成 0 得銳利瑞士風，999px 得藥丸感，都不用碰任何元件檔。

有社群文章說「到處都是 8px 圓角」（另一份點的是 16px），官方基準卻寫 0.625rem，兩個數字不衝突：md ＝ 80% × 0.625rem ＝ 0.5rem ＝正好 8px，而 md 正是 button、input、card 最常見的那個級距。你看到的 8px 不是誰硬寫上去的，是算出來的。

designdotmd（2026-04-28）逐字點破這種一致感：元件彼此看起來一致，感覺像設計系統，其實不是——它是一個起手包，而且是所有人拿到的同一個起手包👤達人。逐字原文如下：

designdotmd 逐字引用，非官方

The components are all consistent with each other, which feels like a design system. It is not. It is a starting kit, and the starting kit is the same starting kit everyone else got.

選 shadcn 不是設計決策，是配送決策。它把「元件原始碼送進你的 repo」做好了，但沒替你做任何一個設計決策。照著用還是有 AI 味，因為你只完成了配送，沒完成治理。

順帶：技術選型本身也會過時

2026 年 7 月起 Base UI 變成 shadcn/ui 預設，官方同時講明 Radix 不會被淘汰✅官方。技術選型本身也會過時：2025 年的教學說「shadcn 就是 Radix」，現在不是了。查無一手聲明證實「Radix 放緩是因為被 WorkOS 收購」；可查證的只有：Radix 現由 WorkOS 維護，2025-08 至 2026-06 近十個月無 release，2026-06 起恢復節奏（七週內四次 release）🌐社群。CLI v4 的 --base 原本只有 Radix 與 Base UI 兩個，2026 年 7 月 changelog 追加 React Aria（--base aria）後，現在是三選一✅官方。

4 · AI 味的清單會過期——所以要學的是怎麼自己更新清單↑ 回本頁選單

官方黑名單自己就換過一批

Anthropic 官方 frontend-design skill 現行版本（55 行、8,260 bytes，本地取樣於 2026-08-04）點名三種長相：奶油色學院風、暗黑單點螢光、報紙排版風✅官方。逐字原文如下：

frontend-design skill 逐字原文，官方

AI-generated design right now clusters around three looks: (1) a warm cream background (near #F4F1EA) with a high-contrast serif display and a terracotta accent; (2) a near-black background with a single bright acid-green or vermilion accent; (3) a broadsheet-style layout with hairline rules, zero border-radius, and dense newspaper-like columns.

2025-11-12 官方部落格當時的口徑是另一套：字型清單 Overused font families (Inter, Roboto, Arial, system fonts)，配色清單 Clichéd color schemes (particularly purple gradients on white backgrounds)✅官方。

更正一個常見誤解：不是「同一份 SKILL.md 在 9 個月內被改寫、紫漸層下架」。現行版依然把「大數字配小標籤、佐證統計、外加漸層 accent」列為範本答案✅官方。漸層沒下架，是清單擴充並換代，不是舊項目被否定。官方部落格那串黑名單另有歸屬，沒有版本歷史證明是同一份文件被改寫。也不能說官方明文禁用 Space Grotesk，查無來源。官方的態度是「這些是預設，不是選擇」——照著做，沒管到的地方才留給你發揮。完整黑名單項目、skill 安裝法、Cookbook 四維度展開，web-design 那頁已經展開，這裡不重貼；這裡要講的是那頁沒處理的角度：黑名單本身也有版本，會過期。

社群端：2024 的解藥是 2026 的病徵

兩份 2026 年的清單都把同一批字型列進 slop 名單——一份是技術部落格（Developers Digest，2026-04-22，逐字 The same font combos over and over: Space Grotesk, Instrument Serif, and Geist🌐社群），一份是 AI 味偵測器的產品說明頁（Impeccable，逐字 Inter, Geist, Space Grotesk, and the newest reflex, Instrument Serif🌐社群），兩份都不是研究，但它們點名的字型重疊得很整齊。Developers Digest 指出主導指紋來自 shadcn/ui 預設值加上 glassmorphism：the library is explicitly designed to be copy-pasted by AI agents🌐社群。

繁中在地清單（vocus 作者 qkangber🌐社群）：圓角卡片、預設 icon 組、漸層按鈕、藥丸形按鈕、badge 主導設計、三欄式卡片版面、置中漸層文字標題、細線 icon 系統（Lucide）、置中訂閱卡。後五項是站內黑名單沒涵蓋的——清單一直在長。

所以清單的用法是「今天的樣本」，不是「規則」

三條可以自己更新清單的判準，取代背清單：是不是某個工具鏈的預設值？是，就換掉。你講不講得出選它的理由，而且那個理由跟這個專案的內容有關？講不出來，就換掉。第三，官方 skill 自己給的判準最好用✅官方：拿計畫回去對簡報，跑一次類似的 prompt，看你會不會走到同一個地方——會，就改掉，並說出為什麼。這個判準有現成的官方逐字提示詞可以直接抄——Prompt Library「Design」區第 6 則：implement this design, then take a screenshot of the result, compare it to the original, and fix any differences，本來是設計稿比對用，拿來對照 AI 是不是走回同一個地方一樣管用。

純文字指引到底有沒有用，已有人實測過：solodesign.cc（2026-06-06）測出把純文字設計指引打開，六個元件裡有五個的表現跟完全沒開 skill 打平或更差🌐社群。在 prompt 裡寫「不要做得像 AI」沒有用——那什麼管得住？答案在下一節：把品味變成結構。

5 · 五個施力點：改哪幾行，整站溫度就變了↑ 回本頁選單

骨架的仗打完了，這節換打肉的仗——五個都是「改幾行 CSS」的動作，不必重寫元件、不必換框架。表格依成本由低到高排列，最後一欄指向對應小節。

5.1 圓角、灰色、accent（token 層最便宜）

三個數字，整站不一樣。改 --radius，全站圓角語彙全變。中性灰的色度（chroma，飽和程度）預設常是 0，是死灰；拉到 0.01–0.02、色相（hue）給一個值，例如 oklch(0.97 0.01 80)，灰色就有了暖色骨頭。第三，給 accent 一個真正飽和的值——灰色 accent 正是「沒人做決定」的訊號。

這裡在講的其實是換一個色彩空間，不是換一個寫法。HSL 的「亮度」只是數學插值，同一個 L 值換一個色相，人眼看到的實際亮度可能差很多——這是很多深色主題裡藍色看起來比同 L 值的黃色暗一截的原因。OKLCH 的亮度是感知均勻的：固定亮度只轉色相，整組色票在人眼裡才是真的一樣亮，換品牌色不必再靠肉眼一路重調。Tailwind v4 已經把整套預設色盤從 rgb 換成 oklch，官方原文是「We've upgraded the entire default color palette from rgb to oklch」✅官方——這是新專案現在的預設起點，不是實驗性選擇。

改兩個數字，整站換色

:root {
  --brand-h: 265;
  --brand-c: 0.22;
  --color-500: oklch(0.58 var(--brand-c) var(--brand-h));
  --n-50:  oklch(0.98 0.005 var(--brand-h));
  --n-900: oklch(0.20 0.020 var(--brand-h));
}

這就是「把品味變成一個可以被 code review 的變數」的具體形狀。要拿同色相的淺深變體，color-mix(in oklch, var(--color-500) 80%, white) 比手動再調一組數字省事；動態推導色階也能寫成 oklch(from var(--color-500) calc(l + 0.1) c h)，但這個 from relative-colors 語法瀏覽器支援度只有 88.4%（caniuse，StatCounter 2026-06 使用量），明顯低於 OKLCH 本身的 91.56%——關鍵色階還是用變數 + calc() 手動算，from 語法留給非關鍵的裝飾性推導🌐社群。避開：紫轉藍、靛轉紫漸層；emerald green（indigo 被擋掉後常見的第二選擇）；amber 配 cream 洗色；彩色 box-shadow——陰影一旦帶顏色，本身就是 AI 指紋。

誠實說一句：本站自己的 token 系統走的是 HSL 三數值（hsl(var(--token))），不是 OKLCH——這是建站當時照 shadcn 慣例走的結果，不是刻意權衡後的技術選擇。若今天重新起頭會選 OKLCH，理由就是上一段那句：換品牌色不必重新目測亮度。這不影響本站現有色票能不能用，只是提醒一件事：這節教的作法跟這頁自己的作法不是同一套，攤開講比藏著好。

5.2 字型：中文站的解法跟英文站不一樣

思源黑體（Noto Sans TC）結構上就是「中文的 Inter」——Google Fonts 的繁中黑體預設就是它，AI 產中文網頁幾乎必然選它，理由跟選 Inter 一樣：安全的預設，不是決定。

但結論不同：中文免費選項少很多，思源仍是內文正解，不必換掉。真正的問題是「整站只有思源、標題跟內文同一支字」。務實配方：內文不動，標題換一支有台灣語感的字——台北黑體、jf open 粉圓、源流明體——並拉開標題與內文的字重差距。jf open 粉圓限制：極度不適合長文閱讀與正式文件；字形較胖，小字號易糊——只用在標題或短句。

自訂字型若不在 Google Fonts 上，得自己做 subsetting（子集化，裁掉字型檔裡用不到的字），否則等於叫訪客下載十幾 MB。量級示意：完整 Noto Sans CJK 約 16 MB，只留拉丁子集約 30 KB——中文字集怎麼切、切多細是另一個題目，這裡沒有查證過可靠的具體做法，不編。

自己 host 字型檔，格式只用 woff2——現行瀏覽器都吃，壓縮率也最高，不用再考慮 ttf/otf。@font-face 一定要帶 font-display：swap 是先用系統字型頂著、字型載入完再換上去，代價是換字瞬間的跳動；optional 是給瀏覽器一個時間窗，逾時就整頁維持系統字型不再換，沒有跳動但可能有訪客從頭到尾沒看到你選的字。標題字用量小，swap 通常划算；內文字也自己 host 的話，optional 比較保守。

5.3 版面：先建格線，再破一次

AI 版面的問題不是醜，是構圖只有一種：置中 hero、三張一樣的 icon 卡、見證、定價表、footer。AI 不會破格，因為它沒有格線可破，它只有 flex 置中——這裡只講這一件事：卡片與版型構圖怎麼從單一形狀變出好幾種。資訊該怎麼排優先序、色彩什麼時候該承載功能訊號而不是裝飾，流量稽核儀表板那頁用一個真實案例講過（F/Z 型掃描路徑、資料墨水比），是資料視覺化的版面問題，跟這裡的卡片構圖問題不是同一格，這裡不重複。

對照：text-align: center 換成 12 欄 grid，標題佔 grid-column: 2 / 8、圖佔 7 / 13，刻意重疊一欄；膠囊小標改成上緣一行小字；三張等寬卡改成一大兩小、或乾脆不用卡片。最省力的路是「不用卡片」：黑字白底、一個大標題、不放圖——拿掉裝飾後排版反而不像 AI 做的，因為 AI 的預設動作是「加東西」。

再加一條：clamp() 換掉三個固定斷點，版面在任何寬度都連續。無障礙注意：中間項要混 rem，例如 clamp(1rem, 0.8rem + 1.2vw, 1.5rem)——純 vw 會讓瀏覽器縮放失效。

5.4 質感細節：改動最小、觀感差異最大的那一步

AI 產出的陰影通常單層、貼在每張卡上。換成分層陰影，是改動最小、觀感差異最大的一步——層數是可調參數（Ahlin 示範從 4 到 6 層，Comeau 的產生器則隨高度輸出 3／4／8 層），關鍵是模糊與位移逐層放大。下面這組是 Tobias Ahlin 2019 年那篇分層陰影文裡的 blog-shadow-dreamy 配方（6 層、opacity 恆定 0.07）👤達人。陰影顏色擋的是彩色光暈／glow，不是所有帶色相的陰影——Comeau 的做法是與背景同色相、壓低飽和與亮度的暗色陰影，那不是 AI 指紋，是更講究的做法👤達人。要避開的是把陰影當發光體用。

Tobias Ahlin · blog-shadow-dreamy 逐字：6 層，opacity 恆定 0.07

box-shadow:
  0 1px 2px rgba(0,0,0,0.07),
  0 2px 4px rgba(0,0,0,0.07),
  0 4px 8px rgba(0,0,0,0.07),
  0 8px 16px rgba(0,0,0,0.07),
  0 16px 32px rgba(0,0,0,0.07),
  0 32px 64px rgba(0,0,0,0.07);

字距：AI 幾乎不調 letter-spacing——在 H1 加一行 letter-spacing 是最便宜的「有人管過這頁」訊號。這件事有可算的依據：Inter 的 dynamic metrics 給的是一條隨字級收斂的曲線（16px 約 -0.011em、24px 約 -0.0195em、48px 以上壓在 -0.0223em；規範頁已 404，僅存封存版可查），大尺寸 display 標題收 -0.02em 上下是安全起點，內文不動。全大寫給 0.05em 到 0.1em、標題 line-height 收到 1.1–1.25，這兩項查不到出處，是實務起點不是標準。outer ring 取代實色邊框這個技巧，18 條技巧清單已經點過名，這裡補它沒講的原因：border 佔盒模型空間，會造成 layout shift（版面被意外推移）；box-shadow 做的 ring 不佔空間，focus ring 該用 ring，不要用 border。

5.5 動態：不要全站同一個 fade-in

AI 動效的訊號有兩種極端：要嘛完全沒有，要嘛所有元素套同一個 fade-in、同一個 timing，bounce 或 elastic 被濫用在按鈕與卡片上。官方 Cookbook 的 Motion 維度也點過同一個病徵——集中在 page load 的 staggered reveal，不要四散的微互動（官方 Cookbook Motion 維度）；這裡把它拆到操作層級，因為「不要亂加動效」要真的落地，得知道每個具體 CSS 屬性怎麼用，不是知道原則就夠。

反制：動效要有理由，傳達狀態改變或引導注意力；不要全站同一個 duration，進場、hover、狀態切換是不同量級的動作（毫秒數字是實務起點，不是標準）；bounce 留給真的有實體隱喻的元件，像抽屜或開關。@starting-style 搭配 transition-behavior: allow-discrete 能取代大量 JS 進場動畫，且不進 bundle；它是 Baseline newly，老裝置留個退路——不支援就是元素直接出現，不會壞。prefers-reduced-motion 必須要有——AI 產出的頁面常漏掉這段。

相容性瓶頸在 Firefox，不是 Safari：scroll-driven animations 需要 Firefox 156，現行穩定版 153 完全不支援；Safari 已於 26.0（2025 年 9 月）補齊——26 這個版本號大，只是因為 Apple 改用年份版號，不代表比較新或落後。結論不變：一律漸進增強，包進 @supports，理由是「Firefox 還沒到」，不是「Safari 太舊」。

6 · 把品味變成結構：規範檔、token 檔、閘門↑ 回本頁選單

第 4 節說「純文字指引沒用」——那怎麼辦？四家官方 CLI 答案形狀不同，但打的是同一個結構：治 AI 味最有效的不是規則多，是流程插一道非過不可的關卡。

6.1 四家官方機制長得不一樣，但都在做同一件事

Codex 的 frontend-app-builder（openai/plugins repo 下 build-web-apps 套件）完工閘門逐字寫死兩條：

Codex frontend-app-builder 完工閘門，逐字兩條

Final handoff is blocked until you use view_image on both the accepted concept and the latest browser screenshot
Hero eyebrow, kicker, pretitle, badge, or pill labels above the main heading are prohibited by default

第二條禁的正是「標題上方膠囊小標」——AI hero 版面的招牌長相。Copilot 的 anti-ui-slop（收在 github/awesome-copilot）更直接：動工前先逼你寫一份設計契約，裡面有一欄要你自己填「這個專案禁用什麼」；交件前另有 Finish Gate 逐項驗收，逐字先講："Clean," "modern," "intuitive," and "premium" are not design decisions.

6.2 規範檔該寫什麼、不該寫什麼

第一原則：不要把 token 值抄進 markdown。抄進去就會漂——CSS 改了、markdown 沒改，AI 照著過期的值寫，你以為它在讀規範，其實在讀化石。規範檔該寫指標與約束，不是資料本身。

第二原則：寫「禁止什麼」比寫「有什麼」有效。Anthropic 點名三種預設長相、Codex 逐字禁掉膠囊小標、Copilot 逼你自己填一欄禁用清單，殊途同歸：AI 缺的不是選項，是邊界。

第三提醒關乎「放哪」：同一份 design token 規則丟給不同 CLI，生效方式不同——Copilot 多份指示檔案全部合併，官方明講不定義優先順序；Codex 則沿「全域 → 根目錄 → 子目錄」串接，衝突時近者覆寫遠者。放對檔案只是第一步，還要知道會不會被別的檔案蓋掉。

6.3 skill 能不能帶著走：三層折扣疊起來看

Skill 可攜性常被簡化成「檔案能複製＝能用」，實際要打三折：檔案能複製（本站「25 個 Skill 系統」已講）→ 複製不代表會被觸發（本站「無障礙稽核常踩的坑」案例：同一份 skill 從召回率 0% 改到 100%，靠的是改寫觸發描述）→ 觸發了，同一份 skill 換harness 也未必長一樣。三折疊起來，複製 SKILL.md 到新專案，離真的管用還差兩步。

6.4 token 檔的形狀：標準格式不是給 AI 讀的形狀

W3C Design Tokens Community Group 發布了 Design Tokens Format Module 的第一個穩定版 2025.10——這是社群組規格的第一個穩定版，不是正式標準（社群組報告不在 W3C 的 Recommendation 軌道上），連工具鏈都還在追。實務上分三層比較好用：

有一種說法說 DTCG 的 JSON 對 LLM 既貴又不可讀——這是推論，沒有實測數據，方向合理但不算事實。比推論更硬的是結構性隔離：把高風險目錄設成不可覆寫，比寫在 markdown 裡的提醒還硬——AI 想改也改不動。

7 · 叫 AI 自己看畫面：什麼驗得到、什麼驗不到↑ 回本頁選單

7.1 快照比截圖便宜，但也比截圖看得少

官方逐字：Playwright MCP uses accessibility snapshots instead of screenshots✅官方，token 成本約 200–400，截圖是 3000–5000——差一個數量級。效能除錯那頁引過一個對照：有工程師實測幾次涉及頁面導覽與截圖的查詢累計燒掉約 500 萬 token👤達人——那是整批工作的總量，不是單次截圖的價碼，因為完整 DOM 樹、computed style、metadata 都會一起塞進 context。省錢是真的，代價藏在沒說的地方。

a11y snapshot 是一棵樹，裡面沒有「長什麼樣子」。驗證要分三層：結構／語意／可及性交給 snapshot；跑版、對比不足、字型沒載入交給截圖配可量斷言；但字距密不密、陰影分不分層、光學對齊準不準——兩者都救不了，這是「有沒有花心思」的品味判斷，只能人眼收尾。

7.2 問法決定可靠度：不要打分，要排序

AI 判「好不好看」意外地準，判「好不好用」從靜態截圖判不準——對照 UICrit 那份 1,000 個專家標註畫面（Springer HCII 2026 的評測論文所用，資料集本身出自 ACM UIST 2024），視覺判斷幾乎一致、可用性判斷不可靠🧪未驗證，但只讀得到摘要，confidence medium。反過來它也常自信地說「修好了」，其實還壞著——兩位開發者交叉印證過👤達人。

直接打分有兩個實測失效模式（MobileForge，arXiv 2607.28645）🧪未驗證：scale drift——同一張圖不同時間問，拿到不同分數；ties-in-the-middle compression——接近的候選塌成同一個整數分。解法是給參考錨點、要求排序：嚴格 Kendall τ 0.716、Top-1 命中 83.6%、Top-2 重疊 80.4%。換成一句可執行的話：別問幾分，要求排序——具體問法見下方步驟。

但「別打分」不是只有一種藥方。Hamel Husain 與 Shreya Shankar 給的是另一個方向——不是排序，是二元 pass/fail：Binary evaluations force clearer thinking and more consistent labeling.👤達人。這頁的處方是排序，Hamel 的處方是二元，診斷相同、藥方不同——兩條不要壓成同一句，那正是第 8 節自己提醒過的失真。

7.3 怎麼問才問得到真話

「模型說沒問題」不是證據——「別信模型講的，收斂到證據」與四級升級閘門，打的都是同一件事：給它一個能回傳通過／失敗的東西，不要用嘴巴驗收。下面五步是這件事在「驗視覺」這個場景裡的具體問法：

1. 1

   先讓它真的跑一次

   別聽模型講「應該可以了」，接上瀏覽器工具實際跑一次，看真實輸出再回報。

2. 2

   顯式要求截圖

   至少 375 / 1440 兩個斷點，記得關掉 prefers-reduced-motion，否則動效驗不到。

   ✅ 預期會看到

   拿到兩張真實截圖，不是一份 a11y snapshot 摘要。

3. 3

   用排序不用打分

   準備一頁你認可的參考頁，跟候選版本一起丟給 AI：「A、B、C 三版和參考頁，照不像 AI 做的程度排序，說每版輸在哪」——不要問幾分。

4. 4

   量可查驗的視覺事實

   對比度、觸控目標尺寸、行長 ch 值、字級級距比、格線吸附殘差——寫得成腳本斷言的，交給程式量，不交給模型的嘴。

5. 5

   人眼收尾

   前面幾步只證明沒壞，不證明好看，這一眼永遠是你的——而且這一眼不只收尾：先自己標一批基準判斷（ground truth），才有東西可以比對 AI 判得準不準👤達人。

8 · 誠實的邊界：AI 拉高地板，天花板還是你的↑ 回本頁選單

前面幾節在講怎麼把 AI 的預設值逼開，但有些事它真的做不到。二手評測點名四個「skill 治不了」的毛病：跨畫面一致性（各自漂移）、品牌整合（沒有你的 token 存取權）、可辨識的單調（skill 自己也會長出可辨識的花樣）、沒有審查介面。結論句講得準：這四項是workflow problems, not prompt problems🌐社群。

更麻煩的是結構性張力：AI 對齊的是「專家共識」，共識的平均值正好是罐頭的來源。叫 AI 當美感評審，只會把作品往共識中心拉，跟「不要像 AI 做的」正好相反。

Figma MCP 常被講成「讓 AI 讀懂設計稿」，其實是傳真機不是設計師：忠實複製你已經做的決定，決定得你自己先做。部落格一句話講得很白：A file styled with loose hex codes produces code with loose hex codes.🌐社群。讀變數、auto layout 要 Dev 或 Full seat，動手前的準備門檻已經講過；這裡補它沒算的帳——Code Connect 除了同一道 seat 門檻，還得團隊掛在 Organization 或 Enterprise 方案下✅官方。對個人或小團隊，讀稿買得到，元件重用那一半是公司採購層級的方案，碰不到。

收尾看一個真人案例。Leon Furze 是教育顧問與作者、不是前端工程師（依據他的 About 頁），2026 年 2 月中發表、自述用了幾個週末做出 5 個完整網站外加一個複雜互動頁👤達人：最快一站 20 分鐘內上線（他自己也說這站不如第一個精緻）、另一站花了 23 分鐘；技術棧 Astro 5 + TypeScript 資料檔 + Cloudflare Pages，(no Tailwind, no frameworks)👤達人。他第一句 prompt 就在做風格治理：Choose your own design but avoid obvious 'tech' colours and fonts.👤達人——治理發生在第一句話，不是事後補救。最節制的一句反而最有份量：

Leon Furze 原文逐字

Claude Code didn't create the content, the ideas, or the pedagogical framework behind any of them.

這句話也是這頁自己的提醒：第 5 節教你「區塊留白 ÷ 元件留白要 ≥3 倍」，這頁自己的節奏 token 是 80:48:16（≥768px）／64:32:16（行動版）——桌機的 h3 那階剛好壓在 3 倍線上，行動版更只有 2 倍，直接跌破這條規則。不是漏改，是不因自己的內容主張就去動站內既有 token；攤開講比藏著好。

9 · 來源與查證範圍↑ 回本頁選單

本頁沿用站內既有的四級料源標記——{official}／{practice}／{community}／{experimental} 怎麼分、怎麼用，why-cli 已經講過，這裡不重講一次。下表只列本頁實際引用、且經查證的來源。

表格內容超出可視範圍時，可在表格區域按左右方向鍵橫向捲動。

查證日一律 2026-08-04。免費額度、瀏覽器支援率、npm 版本號這三類數字最容易過期——下表來源目前部分已附官方頁連結可直接點開核對，其餘仍待補上連結，請自行檢索查證，別把這頁的數字當成不會變的真理。