Slopless UI
「Slop」是指機器生成的模樣：預設的漸層主視覺、脈動的圓點、每個標題旁都有圖示、每個操作旁都有按鈕、文案充滿破折號和形容詞，而且沒有一個決定是你能在審查中辯護的。現代生成的介面很少會因為標記錯誤而失敗。它們失敗在於可互換性：稱職、精美，卻令人難以記住。
這個技能存在的目的，就是讓AI代理的輸出不再如此。它在任何程式碼之前提供書面方向，在建構過程中提供紀律，並在向任何人展示結果之前進行驗證。它不會增加更多樣式。它增加決策，然後完成。
方法
按此順序進行。每個步驟都有單一任務，每個步驟的細節都存在於一個參考檔案中。僅在到達需要該步驟時才閱讀參考檔案。
1. 觀察現狀
在撰寫任何程式碼之前，先找出已經存在的決策：DESIGN.md 或 tokens 檔案、專案的 CSS 變數、tailwind.config.* 或 @theme 區塊、現有的元件。如果專案已有既定風格，請嚴格遵循。你的首要任務是一致性，其次才是品味。除非使用者要求重新設計，否則不要重新設計任何東西。
2. 撰寫簡報
在撰寫任何程式碼之前，寫下四行。它們是與自己的約定，後續步驟會以此為依據進行檢查。
- 受眾：誰會使用這個，他們在十秒內會在這裡做什麼。
- 感受：一兩個你可以在審查中辯護的形容詞（冷靜、密集、溫暖、精確）。
- 標誌性特徵：一個陌生人會記住的東西。如果你說不出來，結果就會是平庸的。選擇一個：一個不尋常的字體、一個大膽的數字、一個意想不到的顏色、一個強烈的構圖。
- 模式：說服（登陸頁、定價頁）、操作（儀表板、應用程式）、閱讀（文件、文章）或體驗（作品集、畫廊）。模式會改變之後的每個決定。
完整指南、四種模式以及針對常見網站類別的二十八種起始方向庫：references/direction.md。
3. 將決策轉為令牌
將簡報轉化為實際數值，而非形容詞：兩個字體系列及其粗細和後備堆疊、一個帶有職責的強調色、一個間距尺度、一個圓角尺度、動畫持續時間和緩動函數。將它們寫成 CSS 變數或框架的令牌格式。「乾淨現代」不是一個決定。--accent: #8E3B2F 才是。
4. 順應紋理進行建構
然後在建構時套用紀律規則：
- 法則優先。 一個網格、一個欄位、4 或 8 點間距、每個視圖一個焦點、所有八個元件狀態、鍵盤與對比度底線。這些不是風格；它們是每個設計系統都同意的物理法則：references/foundations.md。
- 每個視圖一個焦點、一個主要操作。 層級來自大小、粗細和空間，而非來自方框。
- 按鈕是承諾。 每個視圖一個填滿按鈕是正常的。次要操作使用連結或靜音按鈕。如果一個區域顯示超過兩個按鈕，重新設計它：references/icons-and-buttons.md。
- 圖示是傢俱。 文字更清晰。當圖示贏得一席之地時，使用同一套、同一粗細、一致的大小：references/icons-and-buttons.md。
- 文案即設計。 短句、具體名詞、動詞優先按鈕、無破折號、無行話：references/copy.md。
- 每個狀態都存在：空白、載入、錯誤、長內容。五個完美的行和一個快樂路徑並非一個完成的畫面。
- 頁面有脈搏。 控制項在按下時回應，轉場動畫以進場方式退場，一個進場動畫編排了第一秒，且各個區塊在滾動時揭示一次。最多一個在簡報中命名的標誌性環境動畫。動畫預算及其所需的所有曲線：references/motion.md。
- 文字區塊靠左對齊。 僅對短、單行元素置中。
5. 在交付前完成
永遠不要展示你沒有看過的 UI。完成的檢查，按順序：
python3 scripts/foldcheck.py <已更改的檔案>並修復它報告的所有錯誤。- 對於你引入的每個文字配對，執行
python3 scripts/contrast.py <前景色> <背景色>。正文文字需要 4.5:1 或更高；大字型和邊界需要 3:1。 - 在真實瀏覽器中渲染，並截取桌面和手機寬度的螢幕截圖（如果 Playwright 可用，使用
node scripts/finish.mjs <網址或檔案>，否則使用你環境提供的任何瀏覽器工具）。 - 瞇眼看螢幕截圖：模糊你的眼睛或將圖像縮小。層級和焦點必須仍然可見。
- 修復，僅重新檢查更改過的視圖，並在三次修復後停止。
完整協議、誠實標籤和報告格式：references/verification.md。
不可協商事項
這些模式看起來像是機器生成的。將其視為預設禁止，即使教學顯示它們也一樣：
- 閃爍、脈動、彈跳或浮動的圓點和裝飾，包括「正在輸入」指示器和沒人要求的發光狀態圓點。
- 賽博龐克、霓虹、故障、合成波、蒸氣波、矩陣和全息風格。發光沒有來源，所以無法說服任何人。
- 紫到藍和靛到洋紅的漸層主視覺、漸層文字、內容後方的模糊彩色球體。
- 任何使用者可見文字中的破折號。使用句號、逗號或括號。references/copy.md 中的 AI 行話清單也一樣。
- 表情符號用作圖示、項目符號或 UI 裝飾。
- 每個標題旁都有圖示，每個操作旁都有按鈕。
- Lorem ipsum、「即將推出」、虛構的推薦或呈現為真實的指標。
- 預設使用 Inter、Roboto、Arial 或系統字體堆疊作為識別字體。
- 一個從不移動的頁面。靜態輸出讀起來像組裝好的模板；references/motion.md 中的動畫預算是完成的一部分，而非裝飾。
完整的目錄及修復方法：references/anti-slop.md。
瞇眼測試
模糊你的眼睛（或將螢幕截圖縮小到縮圖大小）再看一次。有三件事必須在模糊中存活下來：焦點、閱讀順序和主要操作。如果頁面變成灰色糊狀，問題是層級，再多的潤飾也無法解決。先修復間距、大小和粗細。這個測試只需十秒，而且比任何檢查清單都能抓到更多糟糕的設計。
如果使用者要求禁止的模式
有時有人確實想要霓虹、重漸層或賽博龐克主題。不要與他們爭論，也不要說教。把它做好：真實的對比度、真實的層級、可操作的狀態、克制的動畫。說一次，一行話，說明該技能預設反對這樣做，但你遵循了他們的偏好。禁止清單是為了防止無引導的輸出，而非反對表達的偏好。
參考文件地圖
| 檔案 | 何時閱讀 |
|---|---|
| references/direction.md | 步驟 2，每個新頁面或重新設計時 |
| references/typography.md | 步驟 3，選擇或檢查字體時 |
| references/color.md | 步驟 3，選擇或檢查顏色時 |
| references/motion.md | 步驟 3 獲取令牌，步驟 4 進行動畫檢查（預算、進場、揭示、環境動畫、減少動畫） |
| references/foundations.md | 步驟 4，針對佈局、間距、層級、狀態及命名法則 |
| references/copy.md | 步驟 4，每當撰寫文字時 |
| references/icons-and-buttons.md | 步驟 4，針對操作、控制項和圖示 |
| references/anti-slop.md | 當輸出感覺有種不好的熟悉感時，或在審查時 |
| references/verification.md | 步驟 5，在說任何事情完成之前 |
報告
結束 UI 工作時附上一份簡短報告：建構了什麼、簡報的一行感受、來自 references/verification.md 的驗證標籤（已視覺驗證、已靜態驗證或未驗證，並附上原因）以及任何未完成的事項。永遠不要稱結果為「像素完美」或「全面測試」。說出你做了什麼。
腳本
零依賴、無網路呼叫、無遙測。路徑相對於此檔案所在的資料夾。
python3 scripts/foldcheck.py src/ # 靜態審查機器生成模式
python3 scripts/contrast.py "#201B12" "#F6F1E5" # WCAG 對比度檢查配對
node scripts/finish.mjs ./index.html # 瀏覽器檢查：螢幕截圖、控制台、溢出（需要 Playwright）
foldcheck 和 contrast 總是執行。finish 是可選的，並且當缺少 Playwright 時會優雅降級；請改用你環境提供的任何瀏覽器工具，因為重點是查看，而不是工具。