yonathan-boop/Claude

antislop-ui

Anti Slop：AI 編碼代理程式規則。UI 與視覺技能

屬於 antislop 系統的一部分。請與 antislop.md（核心）一同閱讀。此技能深入探討 UI 與視覺相關領域：色彩、佈局、元件、裝飾、結構流程與動態。它透過編號引用核心規則，且絕不重複或重新編號。當任務是建立或編輯網站、網頁應用程式或任何介面時，請載入此技能。

如何使用此技能

• 請與 antislop.md 一同載入，每當任務涉及 UI 或視覺工作時。核心技能包含機制（目的測試、三個層級、交付關卡）；此技能則包含 UI 特定深度內容。
• 每個條目都具有相同的結構：Tell（模式）、Why（為何看起來像 AI 味）、Fix（正確做法），並引用對應的核心規則編號 R-XX。
• 核心技能中的「交付關卡」仍然是主要關卡。此檔案結尾的「UI 技能檢查清單」是與之並行的 UI 特定補充檢查項目。

視覺與色彩

泛藍紫色漸層

• Tell： 採用藍色到紫色、藍色到青色或紫色到粉紅色的漸層作為主要色彩處理方式，或使用全頁面的彩色發光效果。
• Why： 這是訓練資料中最過度呈現的色彩處理方式。它傳達的是「沒有品牌識別」而非「我們的色板」，並且一眼就能看出這是由 AI 生成的設計。
• Fix： 從 DESIGN.md 或產品自身的識別中提取色板。僅在具有明確書寫原因的情況下，才將漸層保留為層級功能（R-01）。用來區分一個層級與另一個層級的漸層是工藝；但每個區塊都使用同樣的漸層則是一種預設行為。
• 相同的預設系列： 粗糙或彩虹漸層、紫色與黑色配色、霓虹或粉彩調色板，以及英雄區域後方的模糊放射狀光暈。它們是穿著不同外衣的相同線索：色彩來自模型的預設值，而非來自品牌。所有這些在沒有目的的情況下都禁止作為預設（R-01）。

過度玻璃擬態

• Tell： 同時在導航欄、卡片、模態框和側邊欄上使用模糊效果或 backdrop-filter。
• Why： 模糊效果移除了紋理，並將所有表面置於相同的磨砂層中，從而壓平了層級結構。當每個表面都是玻璃時，就沒有前景可言了。
• Fix： 將玻璃效果視為強調重點，而非主要特徵。使用上限：最多 1-2 個元素（R-10）。需要獲得關注的表面才使用玻璃效果；其他所有元素保持實心。

過度圓角

• Tell： 每個元素都是藥丸形狀：按鈕、輸入框、卡片、徽章、模態框。
• Why： 統一的藥丸形狀抹去了「這是輸入框，這是卡片」的視覺語意。圓角半徑變成了裝飾，而不是層級結構的工具。
• Fix： 在設計系統中設定一組有限的半徑值，並有目的地應用它們（R-11）。主要 CTA 上使用一個較大的圓角半徑看起來是有意為之；但所有元素都使用相同的圓角半徑則看起來像是預設值。

過度柔和的陰影

• Tell： 每個元件都帶有巨大的陰影，使得整個頁面感覺像是漂浮在空中。
• Why： 當所有東西都浮起時，浮起就無法傳達任何層級訊息。頁面失去了它的基面，變得千篇一律的柔和。
• Fix： 僅將陰影用作浮起層級的標記，並寫下使用浮起層級的原因（R-12）。大多數元素應該保持貼地平放；需要從頁面浮起的一兩個元素才使用陰影。

處處發光

• Tell： 同時在卡片、按鈕、圖示、徽章、背景和邊框上使用發光效果。
• Why： 發光效果是一種注意力放大器。到處使用它就等於沒有放大任何東西，而且這是最快讓設計看起來像是「由 AI 製作」的方式之一。
• Fix： 保留發光效果，最多用於 1-2 個重要元素作為焦點強調（R-13）。其他所有元素保持霧面。

背景網格

• Tell： 在內容背後使用網格方塊、藍圖線條、方格紙、點狀網格或細微重複線條。
• Why： 這是一種讓扁平頁面感覺「技術性」的預設方式，但實際上並沒有做任何實質工作。它讀起來像是沒有意圖的紋理。
• Fix： 僅在紋理或圖案能真正支持產品識別時才使用，並寫下使用原因（R-07）。一個真實的識別主題（核心第 3 部分）每次都勝過普通的網格。

無理由的深色模式預設

• Tell： 整個頁面之所以是深色，僅僅是因為它看起來很「科技」，完全沒有考慮品牌。
• Why： 深色是一個決定，而不是預設值。強制使用深色讀起來像是跟隨趨勢，而不是服務於產品。
• Fix： 根據品牌識別、產品類型和目標受眾來選擇主題（R-21）。開發者和創意工具通常有充分的理由使用深色模式；但內容優先的產品通常沒有。如果沒有強烈的理由使用固定主題，則建立一個可用的淺色/深色切換功能。

色板中顏色過多

• Tell： 在一個頁面上使用 5-7 種不同的顏色，且沒有清晰的設計系統。
• Why： 分散的色板沒有層級。當每個元素都可以是任何顏色時，就沒有任何東西能被區分出來。
• Fix： 將作用中色板限制在 2-3 種核心顏色 + 1 種強調色（R-29），並讓其中一種核心顏色作為中性基色。節制才是讓強調色凸顯的關鍵。

過度使用強調色

• Tell： 同時在按鈕、圖示、徽章、連結、線條、背景和發光效果上使用同一種強調色。
• Why： 當強調色無所不在時，它就不再是強調色了。它只是變成了另一種顏色，而設計失去了它的焦點。
• Fix： 強調色只應在關鍵時刻使用（一次有意的強調，核心第 3 部分）。零個強調色會顯得單調；到處都是強調色則是 AI 味。選擇對它而言重要的一兩個地方。

呆板的預設

• Tell： 純白或接近白色、細灰色邊框、小圓角、無紋理、通用字型、無識別。
• Why： 這是在沒有方向的情況下過度過濾的「安全」結果。它不是 AI 味，但也不是設計：這是一個設計應該存在卻空著的地方。
• Fix： 這是方向問題，而非過濾問題。加入 DESIGN.md 或解決設計審查（核心第 3 部分），然後調高活力刻度。解決方案絕非增加更多禁令；而是陳述目的並加入能量。

佈局與元件

千篇一律的模板佈局

• Tell： 英雄區、副標題、2 個 CTA、截圖、功能網格、推薦、常見問題、CTA、頁尾，每次都按照這個順序。
• Why： 這個順序是訓練資料的預設值，而不是產品的敘事。區塊的出現是因為模板中有它們，而不是因為內容需要它們。
• Fix： 根據實際的內容需求來建構結構（R-05、C-3）。如果產品沒有推薦，就沒有推薦區塊。區塊順序應遵循產品的故事。配合 RHYTHM 刻度：如果它是 3，區塊之間就會有明顯變化。

複製貼上的功能卡片

• Tell： 所有功能卡片的尺寸、高度、圖示、佈局和內邊距都相同。
• Why： 統一的卡片會壓平內容。當每個功能都是一個帶有圖示的卡片時，真正重要的功能和一般的功能看起來一模一樣。
• Fix： 建立反映內容層級結構的變化，並寫下原因（R-14）。並非每個功能都需要做成卡片。旗艦功能可能值得用全寬度處理，而輔助功能則可以使用列表。

Bento Grid

• Tell： 一個由大小不同的卡片組成的區塊，有些跨兩列或兩行，像儀表板磁磚一樣填滿空間。
• Why： 這是過去幾年「應用程式風格」著陸頁的預設佈局，因此無法傳達任何關於產品的資訊。當每個區塊都可能使用 Bento Grid 時，這個佈局就是一個模板，而不是一個決定。
• Fix： 僅在內容確實包含不同尺寸的元素需要展示時，才使用 Bento Grid（R-05）。如果每個區塊的大小都差不多，那麼使用簡單的網格或列表會更誠實。RHYTHM 刻度決定區塊之間是否有所變化。

統一的間距

• Tell： 每個區塊的內邊距、外邊距和間距都相同。
• Why： 節奏是一種工具，而單一的間距值會消除它。區塊之間不再相互關聯；頁面讀起來像是一條平坦的帶子。
• Fix： 將空白用作結構（核心第 3 部分），並根據 RHYTHM 刻度加以變化。建立一個間距尺度，然後使用不同的層級來分隔和連接。統一的節奏只有在刻度如此指示時才是一個刻意的選擇（R-05）。

「運作方式」總是 3 個步驟

• Tell： 圓形圖示 + 數字 1、2、3 + 簡短文字，總是三個步驟，總是相同的形狀。
• Why： 產品的真實流程很少是整齊的三步驟列表。模板強迫流程符合它的形狀，而不是反過來。
• Fix： 按照流程的實際樣子呈現（R-05）。如果流程確實是三個步驟，那麼使用圓形圖示是可以的；否則，即使用兩個步驟或五個步驟，也要採用真實工作流程所應有的任何形狀。

「受信任」的 Logo 條

• Tell： 在英雄區正下方放置一排通用公司標誌。
• Why： 這是一個沒有證據的信任聲明：通用的標誌、沒有提到真實客戶、沒有使用證明。
• Fix： 僅展示真實、可驗證的標誌（R-18、R-36、C-5）。如果產品還沒有這類客戶，就不要偽造一個 Logo 條。真實的社會證明每次都勝過通用的社會證明。

「最受歡迎」的定價卡片

• Tell： 中間的定價層級總是帶有膠囊徽章高亮。
• Why： 這是預設模式，這意味著它不是一個決定。當每個定價區塊都這麼做時，被高亮的層級就不再有任何意義。
• Fix： 高亮真正服務於產品目標的層級，並寫下原因（R-31）。如果沒有層級值得強調，就一個都不高亮。
• 三欄是線索的一部分： 無論實際結構如何，定價總是顯示為三個層級，中間一個被高亮。這種形狀是預設值，所以它不是一個決定（R-05）。使用產品實際擁有的層級數量，並高亮能服務於產品的那一個。

沒有產品的示範

• Tell： 頁面銷售一個從未展示過運作情況的產品：沒有真實的示範、沒有服務條款、沒有隱私權政策，只有承諾。
• Why： 這是一個穿著產品外衣的示範。每一個聲明都是沒有根據的信任，而缺失的法律頁面則是「尚無任何真實產品」的安靜線索。
• Fix： 展示真實的產品正在運作，或者誠實地說它尚未發布（R-38、C-5）。如果頁面要求註冊或付款，則必須存在服務條款和隱私權政策。一個誠實的「即將推出」勝過一個令人信服的示範。

4 欄模板頁尾

• Tell： 產品 / 公司 / 資源 / 法律 欄位，且沒有變化。
• Why： 這些欄位的存在是因為模板有它們，而不是因為網站有那麼多鏈接群組。
• Fix： 根據產品實際連結到的內容來建構頁尾結構（R-05）。單一欄位的鏈接可能比四個半空的欄位更有用。

統一的區塊節奏

• Tell： 每個區塊都是置中標題 + 副標題 + 相同的卡片網格，沒有任何變化。
• Why： 相同的構成會使區塊模糊不清，頁面感覺重複且平淡。
• Fix： 根據 RHYTHM 刻度來變化構成（R-05）。交替使用文字為主和視覺為主的區塊、不對稱和對稱的佈局。每個區塊都遵循相同模板的頁面是一個由模板設計的頁面。

裝飾元素

通用 AI 圖示

• Tell： 使用火花、星星、魔法、閃電、鑽石、立方體、機器人或 AI 球體作為功能圖示。
• Why： 這些圖形是「AI 產品」的通用詞彙。它們無法傳達關於特定功能的任何資訊。
• Fix： 使用與內容真正相關的圖示，並在圖形為通用時寫下其相關性（R-04）。如果沒有合適的圖示，則不使用任何圖示。功能標籤本身就足夠了。

Lucide 圖示

• Tell： 每個圖示都來自同一個細筆畫、圓角圖示庫（Lucide 或其視覺複製品），因此所有圖示共享一種可識別的外觀。
• Why： 單一的預設圖示庫使所有 AI 網站的圖示看起來都一樣，因此圖示無法再告訴你任何關於產品的資訊。圖形本身可能相關；但統一的圖示庫外觀才是線索。
• Fix： 圖示集是一種視覺選擇，而不是預設值（R-04）。首先根據相關性選擇圖示；然後再決定該圖示庫的粗細和筆畫是否符合產品的特性。如果圖示集是一個決定，而不是一個匯入動作，那麼兩個看起來「相似」的圖示仍能呈現你的風格。

將 Emoji 用作裝飾

• Tell： 在文案、標題、徽章和按鈕中散佈字面意義上的 emoji：標題中的 🚀、每個功能項目符號旁的 ✅、CTA 上的 🔥、圖表標題上方的 📈。
• Why： Emoji 是「這是生成的，不是寫的」最響亮的簡寫。在使用者介面中，它會與內容競爭注意力，並將產品的聲音扁平化為與其他所有 AI 網站相同的愉快預設值。
• Fix： 從 UI 文字中移除 emoji。如果一個概念需要標記，請使用真實、相關的圖示，並寫下原因（R-04），或者不使用任何標記。文案承載意義；emoji 則毫無貢獻。

每個按鈕上的小箭頭

• Tell： 幾乎每個按鈕上都放置了 → 或 ↗ 作為純粹的裝飾。
• Why： 箭頭變成了一種模式，而不是一種信號。當每個 CTA 都有一個箭頭時，就沒有任何箭頭指向任何特定方向。
• Fix： 箭頭不是按鈕的預設識別（R-08）。將它們保留給真正需要方向提示的動作，並按比例調整大小，且寫下目的。

彩色左側條

• Tell： 在卡片、列表行或區塊標題的左邊緣放置一條細的彩色垂直條，用作裝飾。
• Why： 這條色帶增加了色彩，但沒有增加意義。這是最便宜的讓卡片「看起來有設計感」的方式，因此它到處出現，卻什麼也沒說。
• Fix： 色帶是裝飾；它必須承載資訊，否則就移除（R-01、R-31）。標記真實狀態（作用中、警告、新項目）的左邊緣是一個信號。一個為了看起來有設計感而存在的色帶則是一種預設值。

AI 膠囊徽章

• Tell： 藥丸形狀、細邊框、發光、小點、大寫字母，內容為「AI Powered」、「Beta」、「New」。
• Why： 膠囊加發光加小點的組合是一個自我指涉的徽章，它在說「由 AI 製作，關於是由 AI 製作的」。

…

[為翻譯而截斷]