unslop-components 是做什麼的？
AI 生成的應用程式共用同一種輪廓：一個頁面標題、一行四個 KPI 卡片、一個表格、一個附有下拉選單的表單。這個輪廓雖然正確，但過目即忘。元件應該由資料本身的形狀來塑造，而不是由元件庫提供了什麼來決定。
首先建立在基礎之上（unslop-foundation）：調色盤代碼、圖示風格、插畫系統、動態語言以及一份經批准的元件表。這裡的元件使用那些代碼及部件；它們不會自行發明顏色或樣式。
禁止清單（預設外觀）
優先思考元件：為產品命名構成區塊，建立並審查它們，然後再組合畫面。不要發布一個主要內容是以下任何一項的畫面，除非資料真的就是那樣：
-
以邊框和細線分隔的行或群組（請改用空間和色調來分隔）
-
一個加上標籤的表單（欄位網格加上「儲存」按鈕）作為編輯方式；請使用
unslop-foundation/references/designer-standard.md中的編輯模式 -
一行 KPI / 統計卡片（請改用一句話，或將數字顯示在其所測量的事物內部）
-
儲存格中含有編輯下拉選單的表格（表格用於比較多個行的多個屬性）
-
由相同卡片組成的統一網格
-
以表單作為主要介面（表單用於輸入資料，而非檢視資料）
-
狀態以純色文字或僅有名稱的藥丸形狀呈現（請賦予狀態具體形狀，請見下方說明）
-
用圓餅圖表示進度、量表、作為裝飾的甜甜圈環
流程（每個畫面）
- 命名資料形狀。 序列/旅程、整體的各部分、比較、關係、隨時間的變化、排序、位置、階層，或是一串需要關注的事物串流。
- 從
references/patterns.md中選擇符合形狀的形式。 寫下一行文字：「這個畫面是一個路線圖，因為資料是按區域排序的流程。」 - 每個畫面定義一個標誌性元件： 使用者會記住的那個東西。它承載了豐富性；它周圍的一切都是安靜的文字和細線條。
- 為狀態賦予視覺語言，至少使用兩個通道（形狀/填色和顏色，而不是只有顏色），並在每個畫面上一致使用。
- 先顯示，再編輯。 預設檢視是以閱讀為優先。編輯操作位於更深的層級（詳細資訊區塊、抽屜、詳細資料頁面），而不是在每一行中。
- 直接操作勝過控制項。 同樣也是圖例的篩選器。點擊事物本身，而不是「檢視」按鈕。只有在拖曳能取代下拉選單且速度更快時才使用拖曳。
- 變化密度。 一個大的亮點，一個安靜的中間段落，一些小的輔助細節。不要放入五個等大的方塊。
- 根據下面的關卡進行檢查。
關卡
- 畫面的主要元素不是表格、卡片網格、統計行或表單。
- 有一行理由將所選的元件與資料形狀聯繫起來。
- 狀態使用形狀/填色加顏色，並且在畫面間保持一致。
- 唯讀優先：在沒有點擊的情況下，任何畫面的可見下拉選單或輸入框不得超過少數幾個。
- 元件在 360 px 寬度下仍能正常運作（有目的地換行、堆疊或滾動），並且可以透過鍵盤操作且有可見的焦點指示。
- 尊重減少動畫設定：沒有僅為裝飾而進行的動畫。
- 你已經實際看過它了：使用 Playwright MCP 在 360 px 和 1280 px 下截圖（
claude mcp add playwright npx @playwright/mcp@latest）。如果你無法實際查看，請明確說明；不要僅憑程式碼就稱一個畫面具有創意或已完成。
何時適合使用表格
多行、多個可比較的欄位、排序很重要（稽核日誌、價格列表、匯出資料）。在這種情況下，設計表格：數字以表格方式對齊、欄位對齊、規則線條安靜、行懸停效果、無斑馬紋或框線儲存格，且儲存格中無控制項。
檔案
references/patterns.md- 資料形狀到元件目錄、狀態語言、範例作品（產品流程的路線圖）