反 slop 網頁設計
原則：模型的預設行為會收斂到它所見過的一切的平均值。這個技能打破了這種收斂，強制要求在建構之前先做決定，並在之後用證據進行驗證。
何時觸發
- 建立或重新設計頁面、區段、Hero、卡片、導覽或任何 UI 時。
- 審計一個網頁或截圖，並提出「這看起來像是 AI 做的嗎？」這個問題時。
- 為新專案選擇字體、調色盤、間距或動態效果時。
Design DNA（在觸碰程式碼之前必須完成）
每個專案都必須先宣告以下項目：
- 命名調色盤（例如「控制室」）：1 個墨水/基底色、1 個表面色、1 個信號強調色、1 個資料強調色、1 個警報色。使用 HEX 或 OKLCH，並驗證 AA 對比度。
- 字體配對及角色：顯示用、正文用、技術用等寬字型、數字用字型。絕對不能全專案只用一種字體。
- 主要區段的骨架，以 ASCII 表示。
- Hero 版面構成：在 1280x720 筆電上不需要滾動就能看到的內容。
- 簽名元素：這個網站獨有的東西（一個動態圖形、一個網格模式、一個游標、一個獨有的過渡效果）。
- 動態等級（0-10）以及對
prefers-reduced-motion的因應行為。
以上內容須寫入專案的 docs/design-dna.md，並且不能在建構過程中隨意更改。
兩項反 slop 測試
- 測試 1： 是否有人僅憑產品類別就能猜出調色盤？如果是，重做。
- 測試 2： 是否有人能用產品類別加上反參考清單就猜到整體美學風格？如果是，重做。
硬性禁用（如果出現任何一項，該軸向就必須重做）
字體領域：Inter、Roboto、Open Sans 或任何系統預設字體被用作主角；所有區段使用相同大小的標題。
色彩領域：紫色/靛藍/紫羅蘭色漸層；純 #fff 或 #000；在黑色背景上使用螢光綠來呈現「開發者作品集」；奶油色 + 陶土色 + 襯線字體；每頁使用超過一個裝飾性漸層。
版面領域：置中堆疊的 Hero（預告 + H1 + 副標題 + 2 個按鈕）；三欄等寬並帶有圖示；卡片內還有卡片的 Bento 版面；卡片側邊的強調色邊框；毛玻璃效果；帶有裝飾性 Sparklines 的假儀表板；所有元素進場時都使用淡入上移效果；結構完全相同的區段連續出現。
視覺內容領域：假截圖或漂浮的 Mockup；圖庫圖片；用 AI 生成的圖片代替真實產品；用表情符號當作功能圖示；沒有上下文的「信任我們的品牌」Logo 列。
文案領域：「Elevate your...」、「Unlock」、「Supercharge」、「Take your X to the next level」、「The future of...」、「Seamlessly」、「Effortless」等行銷套話；裝飾性的長破折線；附帶綠點的「Available for work」標籤；使用超過 2 種不同的按鈕樣式。
建構規則
- 文字必須是真實的 HTML（可被索引），絕不能放在 Canvas、SVG 或圖片內。
- Grid 要有意圖：不同內容類型使用不同的寬度，刻意打破對齊，透過大小與粗細建立層級，而不是靠外框。
- 間距要根據宣告的（4/8）比例尺，不能使用隨機值。
- 真實的互動：包含 Hover、Focus、鍵盤操作、載入狀態與空狀態。沒有任何裝飾性元素是不做回應的。
- 動態要有目的：只進入一次，不循環；動畫只作用在
transform和opacity上；明確地尊重prefers-reduced-motion。 - 可近性優於原創性：AA 對比度、可見焦點、44px 觸控區域、375px 最小寬度。
反 slop 審計（附截圖）
- 使用 Playwright CLI 分別擷取桌面（1440）與手機（375）的截圖（絕不能在不看截圖的情況下發表意見）。
- 逐一檢查禁用清單，找出具體的違規模式，並提供證據（選擇器 / 截圖）。
- 套用兩項測試。
- 檢查焦點、鍵盤操作、計算後的對比度以及 reduced-motion。
- 輸出格式：模式 → 證據 → 具體修復方案。0 個違規模式 = 通過。
輔助工具
- Playwright CLI：用於擷取截圖與驗證，請參考技能
web-qa-visual。 - 真實素材與 Logo：請參考技能
web-assets-reales。 - 文案：請使用閘門
no-ai-slop。 - 記錄先前的建構，避免重複骨架/調色盤：專案的
docs/design-dna.md（僅能附加，不能覆蓋）。