跳到文件正文
oh-my-design
AI slop 判定

判定方式

我們把缺少產品判斷的重複模式稱為 AI slop

這裡不判斷作者,也不猜使用了哪一種工具。只有當熟悉的預設模式取代產品目標與依據,進而削弱資訊層級與信任時,我們才會標記為 AI slop。

01 — 單一視覺特徵不足以下結論

圓角卡片、紫色、置中的主視覺和短標題,都可能是合理選擇。我們檢查的是:缺少理由的預設模式是否在同一個頁面反覆堆疊,讓產品原有的資訊結構與品牌特色消失。

無法只看頁面就知道製作工具。我們能檢查的是設計決定是否有跡可循:為什麼這個結構與這句文案適合目前的產品?

每一項發現都遵守四個原則

  1. 01

    先讀產品

    目標使用者、主要任務、既有行為與 DESIGN.md,優先於通用的反模式清單。

  2. 02

    綜合多個模式判斷

    一個圓角或一種顏色不會直接構成問題。必須綜合出現頻率、相鄰模式與實際影響後再判斷。

  3. 03

    品質問題另外標示

    對比、焦點、內容溢出與異常狀態屬於品質問題,不用「看起來像 AI」一語帶過。

  4. 04

    只修改必要範圍

    保留產品行為與內容。先拆掉影響最大的重複模式,不再蓋上一套新風格。

檢視生成式 UI 的十個角度

把它們當作設計審查問題,而不是禁用清單。每一項都列出容易趨同的預設做法、設計師通常會保留的判斷,以及該模式仍然合理的條件。

01

由優先順序決定構圖

讀完所有標籤以前,能否先看出什麼最重要?

趨同的預設做法
每個區塊使用相同的標題、卡片數量、對齊與視覺重量。
設計師會保留的判斷
把主要任務放在最有力的位置,輔助資訊依實際重要性降低存在感。
仍然適用的條件
重複確實代表步驟、比較項目或同類型物件時。
LAYOUT-01LAYOUT-05TYPE-01
02

容器用來說明邊界

每個方框是否代表物件、操作、選擇或圖層?

趨同的預設做法
區塊外套卡片,裡面的面板與說明又再套一層卡片。
設計師會保留的判斷
先使用留白、對齊、字級與分隔線;只有邊界本身有意義時才加容器。
仍然適用的條件
這個表面能單獨移動、選取、關閉或重複使用時。
LAYOUT-02LAYOUT-03VISUAL-03
03

文字層級說明閱讀方式

這個頁面用來瀏覽、閱讀、比較,還是操作?

趨同的預設做法
流行字型、相近字級、重複的小標與滿版展示字讓層級變平。
設計師會保留的判斷
依任務調整行寬、字重、行距與對比,並讓同一區域的文字角色保持穩定。
仍然適用的條件
單一字型仍有清楚層級,且符合產品語氣時。
TYPE-01TYPE-02TYPE-03
04

色彩與深度各有工作

每個強調色、表面、陰影與圓角都能說明用途嗎?

趨同的預設做法
漸層文字、發光、玻璃、大圓角與擴散陰影同時爭奪注意力。
設計師會保留的判斷
把色彩對應到品牌、操作、狀態或選取;同一層級只採用一種邊界或 elevation 方式。
仍然適用的條件
材質與配色有品牌依據,同時保有對比與狀態辨識時。
COLOR-01VISUAL-04VISUAL-05
05

用實際內容取代裝飾

頁面上的什麼能證明產品主張?

趨同的預設做法
通用圖示、虛構指標、模糊光球與佔位儀表板取代產品內容。
設計師會保留的判斷
盡可能展示真實流程、素材、資料形態、狀態變化或已確認的限制。
仍然適用的條件
插圖承載品牌敘事,或補充產品介面難以直接說明的內容時。
EVIDENCE-01VISUAL-02VISUAL-06
06

密度配合任務

相關內容是否靠近,不同群組是否清楚分開?

趨同的預設做法
設定、表格、行銷文案與行動裝置控制項都使用同樣寬鬆的留白。
設計師會保留的判斷
群組內緊密、群組間清楚;操作型畫面優先比較效率,不追求展示型留白。
仍然適用的條件
寬鬆留白能降低專注流程或編輯閱讀的認知負擔時。
LAYOUT-05DENSITY-01DENSITY-02
07

把不完美的狀態也納入產品

成功以前、之後和失敗時會看到什麼?

趨同的預設做法
只有精緻的成功狀態,沒有空白、載入、錯誤、權限與長內容狀態。
設計師會保留的判斷
把狀態變化納入資訊架構,並為每個狀態提供可執行的下一步。
仍然適用的條件
明確說明它只是靜態視覺研究,且不宣稱已可上線時。
STATE-01STATE-02COPY-04
08

響應式需要重新安排優先順序

空間縮小時,哪些內容應移動、堆疊、收合或減少?

趨同的預設做法
只把桌面欄位縮小,直到文字截斷、控制項亂換行、在地化內容撐破版面。
設計師會保留的判斷
保留閱讀順序與主要任務;原本關係放不下時,直接改變構圖。
仍然適用的條件
橫向捲動是有明確提示的資料或媒體瀏覽方式時。
LAYOUT-06RESPONSIVE-01LOCALE-02
09

動效用來解釋變化

移動是在說明回饋、起點、連續性,還是空間關係?

趨同的預設做法
為了讓靜態頁面顯得高級,所有元素都淡入、漂浮、彈跳或依序出現。
設計師會保留的判斷
只選一個編排重點;回饋快速、可中斷,並尊重減少動態效果設定。
仍然適用的條件
環境動效屬於產品體驗,且不干擾閱讀與操作時。
MOTION-01MOTION-02MOTION-03
10

控制項遵守一致的互動約定

控制項的外觀、名稱與結果是否符合實際動作?

趨同的預設做法
沒有行為差異,卻不斷增加 pill、badge、button、tab 與 modal 變體。
設計師會保留的判斷
用具體動詞命名操作,必要時讓 URL 保存狀態,只把短而封閉的任務放進彈窗。
仍然適用的條件
變體區分已驗證的狀態、權限、風險或專業工作流程時。
COMP-01COMP-02COMP-03

Anti-slop 不等於極簡主義

設計師並沒有暗中偏愛某一種外觀。他們更在意方向是否符合任務、內部邏輯是否一致,以及執行是否超越模板。

表現型編輯頁面

以探索和敘事為目標時,大字、獨特構圖、影像與有節奏的留白都可以合理。

視覺特色來自主題本身,而不是當下流行的著陸頁套件。

高密度產品工具

需要反覆比較與操作時,表格、緊密控制項、持續導覽與節制字級更適合。

密度中仍有清楚群組與穩定瀏覽路徑,也能容納真實資料與狀態。

聚焦式服務流程

信任與完成更重要時,安靜的單欄、熟悉控制項與直接文案更適合。

簡潔用來降低使用者的不確定,不是掩蓋缺少的產品判斷。

保留原本意圖,讓產品判斷更清楚

切換三個例子,查看修改前後的差異。每個修改後版本都保留原本要完成的工作,只把慣用裝飾換成更明確的產品決定。

預設模式

由裝飾決定版面的頁面

漸層主視覺、圖示方塊、卡片層層包覆、左側強調線和重複三欄,比內容本身的用途更搶眼。

OmD 方向

由使用者任務決定版面的頁面

品牌表現只留一個重點。步驟按順序呈現,比較內容放在兩側,只有獨立項目才使用卡片。

LAYOUT-02LAYOUT-03VISUAL-01VISUAL-02

修改原因這不是換上另一種流行風格,而是移除無法說明項目或操作的容器。

三種標籤不能混在一起

把模式趨同、產品品質與個人偏好分開,檢查結果會更精準,也不會把審美偏好包裝成共同標準。

SLOP

缺少脈絡的模式群組

沒有產品依據的預設模式反覆疊加,削弱資訊層級、信任與品牌辨識度。

QUALITY

可量測或可重現的缺陷

無障礙、內容溢出、異常狀態、效能或互動沒有通過檢查,或不符合產品約定。

PREFERENCE

合理的設計選擇

這項選擇符合設計需求與 DESIGN.md。即使有其他做法,也不表示目前的設計有缺陷。

不用推翻整套風格,也能找出、修正並複查

檢查從產品依據開始,以最小修改結束。不會先挑一種更流行的視覺風格。

  1. 01

    閱讀產品頁面

    先記下目標使用者、主要操作、必須保留的行為與設計依據。

  2. 02

    收集可量測的依據

    記錄 DOM、CSS、重複次數、程式碼位置與瀏覽器結果,再結合產品脈絡判斷。

  3. 03

    確認模式群組

    對照頻率、相鄰模式、DESIGN.md 例外與頁面影響,刪掉缺少依據的結論。

  4. 04

    聚焦修正

    只修改恢復產品層級所需的容器、文案與視覺處理。

  5. 05

    回到同一個頁面複查

    使用修改前相同的桌面、行動裝置、互動、無障礙與語言條件完成驗證。

判定方式參考了哪些研究

分類架構由 OmD 定義。保留語意、判斷模式群組與依據優先的原則,參考了以下公開專案。

im-not-ai辨識韓語翻譯腔,並在保留原意的前提下局部修改。Humanizer以多項訊號共同判斷,不因單一詞彙重寫整段內容。stop-slop減少填充語、制式對比和缺少細節的泛化文案。Impeccable Slop Detector將 slop 模式與一般品質問題分開的公開目錄。Taste Skill先讀設計需求與目標使用者,再限制生成時的預設模式。Anthropic frontend-design從具體主題決定方向,只保留一個有依據的特色,並在實作前後自我檢查。Vercel Web Interface Guidelines針對正式環境檢查互動、長內容、響應式、狀態、動效與多語內容。Carbon Design System依任務調整密度、空間群組、網格節奏,以及操作型與表現型字體。W3C Cards優先安排內容順序,並讓卡片邊界具有無障礙的結構意義。GOV.UK Design System可讀行寬、小螢幕優先構圖、明確操作與元件適用條件。Apple Human Interface Guidelines優先順序、群組、自適應層級、漸進揭露與平台脈絡。Atlassian Elevation讓表面深度對應真實層級與互動;不需要抬升時優先使用留白或邊界。Microsoft Language Style Guides將韓語、日語、簡體中文與繁體中文分別視為獨立的在地化版本。Primer 產品 UI 模式把空狀態、載入、降級、導覽與儲存放進實際產品流程中說明。Carbon 資料表依任務選擇列密度、對齊表頭和工具列,並判斷何時該用表格而不是卡片。Fluent 2 卡片卡片對應單一概念或物件,內部層級與互動方式也應遵循這個邊界。Fluent 2 形狀區分矩形、圓形、膠囊形與浮層指示形,並依尺寸和脈絡選擇圓角。USWDS 卡片卡片用於集合中的模組化摘要,不應取代裝飾、單一操作、表格或連續內文。Primer 空狀態與載入把狀態說明、復原操作、進度範圍與載入時機視為產品介面的一部分。