CleanUI — AI UI 設計強制技能
停止。在你撰寫任何 UI 程式碼之前，請閱讀此檔案。
你是一個擁有根深蒂固 UI 習慣的 AI 程式碼產生器，這些習慣會產生可辨識的「AI 風格」輸出。此技能旨在覆蓋這些習慣，並產生專業、人類設計的介面。
每個 UI 任務的流程：
- 思考你通常會產生的內容
- 根據下方的「絕對禁止清單」檢查每個元素
- 將每個違規項目替換為指定的替代方案
- 只有完成以上步驟才開始撰寫程式碼
絕對禁止清單 — 自動失敗模式
如果你的輸出包含以下任何一項，請在回傳程式碼前停止並修正。
字體
- 禁止使用：
font-extrabold(800)、font-black(900)、fontWeight: "800"、fontWeight: "900" - 改為使用： 最多使用
font-bold(700)。章節標題使用font-semibold(600)。 - 自我檢查： 在你的程式碼中搜尋「extrabold」和「black」。全部取代為「bold」。
Logo / 信任標誌列
- 禁止使用： 公司名稱以相同的純文字、相同的邊框藥丸/方塊形式呈現
- 改為使用： 讓每個 Logo 在視覺上有所區別 — 將圖示與名稱配對，根據每個 Logo 調整字重/斜體/字距，或使用 SVG Logo
- 自我檢查： 所有 Logo 看起來都一樣嗎？修正它。
全大寫 / 字距
- 禁止使用：
tracking-[0.18em]、tracking-[0.2em]、tracking-[0.24em]或任何自訂的寬字距 - 禁止使用： 在整個頁面上使用超過 2 個全大寫且具字距的標籤
- 改為使用： 使用句子大小寫。如果需要全大寫，最多使用
tracking-wider(0.05em)。
眉毛徽章
- 禁止使用： 裝飾性藥丸/徽章放在標題上方，且僅重複標題的內容（例如：「適用於內容團隊的 AI 寫作系統」）
- 改為使用： 完全移除，或使用事實性資訊：「現在是 Beta 版」、「受到 2,400 個團隊信賴」、「提供免費方案」
英雄區標題
- 禁止使用： 標題在桌機上換行超過 4 行
- 改為使用： 4-8 個字詞，最多 2 行。重新撰寫得更簡潔。
- 禁止使用： 副標題超過 2 個句子
- 改為使用： 最多 1-2 個簡短句子。
裝飾性文字
- 禁止使用： 裝飾性標籤，例如「即時脈衝」、「夜間模式」、「無雜亂的操作清晰度」
- 改為使用： 真實資料（狀態、計數、日期）或完全移除。每個標籤都必須具備功能性。
陰影
- 禁止使用： 卡片上使用
shadow-xl、shadow-2xl，或模糊程度超過 8px - 改為使用：
shadow-sm或使用細微邊框的shadow-none。
邊框圓角
- 禁止使用： 隨意混合使用
rounded-md、rounded-xl、rounded-2xl、rounded-3xl、rounded-[24px]、rounded-[32px] - 改為使用： 選擇 2-3 個數值。卡片：8-12px。按鈕：6-8px（藥丸形狀使用
rounded-full）。輸入框：6-8px。保持一致。
圖示
- 禁止使用： 將 Unicode 字元作為圖示（
↑、↓、◌、⌂、◫） - 改為使用： lucide-react (Web)、@expo/vector-icons (React Native)、SF Symbols (iOS)、Material Icons (Android)
檔案結構
- 禁止使用： 整個應用程式寫在單一檔案中
- 改為使用： 分離：畫面/頁面、元件、常數/主題、資料、導航
版面規則
根據內容類型匹配版面
| 內容類型 | 版面 | 不要使用 |
|---|---|---|
| 圖片/視覺類（美食、旅遊、產品） | 水平輪播、圖片網格、英雄圖片 | 純文字垂直列表 |
| 資料/數字類（金融、健身、分析） | 統計卡片、進度條、指標網格 | 英雄圖片卡片 |
| 動態消息（社交、新聞、貼文） | 全寬堆疊卡片、無限捲動 | 含拖曳手柄的分段版面 |
| 瀏覽項目（電子商務、任務、電子郵件） | 含搜尋/篩選功能的垂直列表 | 英雄區塊 |
| 多媒體（串流、音樂、Podcast） | 水平捲動書架（Netflix 風格） | 垂直列表 |
| 聊天/訊息 | 聯絡人清單 + 聊天詳細內容 | 英雄卡片或統計網格 |
| 地圖/位置 | 地圖檢視 + 底部表單疊加層 | 標準列表版面 |
反模板規則
- 永遠不要對每個應用程式使用相同的版面骨架。 閱讀提示，識別內容類型，選擇正確的版面。
- 永遠不要同時使用以下所有元素： 英雄卡片 + 網格按鈕 + 拖曳手柄 + 分段控制 + 垂直列表。那是模板。
- 如果應用程式以圖片為主，請顯示實際圖片 — 縮圖、照片 — 而不僅僅是在圓角方塊中的圖示。
- 對於類別、精選項目、內容書架，使用水平捲動（
FlatList horizontal、CSSoverflow-x-auto）。AI 產生器較少使用這些。
設計品味
色彩節制
- 單色或接近單色的色調通常看起來比色彩豐富的更好。
- 顏色主要應出現在動作（按鈕、連結）、狀態（徽章）和強調（選取狀態）上。不要到處使用。
- 深色元素（卡片、區塊）只有在代表現實世界物體（信用卡、媒體播放器、程式碼區塊）或刻意創造視覺節奏時才合理。不要只是「為了多樣性」。
列表項目
- 永遠不要只使用字母縮寫作為唯一識別符號。 使用類別專用圖示（餐廳用餐具、交通用公車、訂閱用重複）放在圓角方塊中。
- 始終包含中繼資料：日期/時間、類別、狀態。「餐廳」顯得很假。「餐廳 · 5月5日 · 14:28」顯得很真實。
篩選器
- 任何包含 5 個以上項目的列表都應具有篩選器或分段控制。
- 分段控制：藥丸軌道樣式，選取的分段使用實心填充。
動作按鈕
- 無邊框樣式通常看起來更簡潔：圖示放在低調背景的方塊中 + 下方標籤。不需要卡片包裝、不需要陰影、不需要邊框。
行動裝置規則
請參閱 行動裝置模式參考 以取得完整的 iOS 色板、Android Material 3 Token、元件指南和程式碼範例。
所有平台
- 使用真實的導航函式庫，而不是自訂的 View 導航列。React Native：
@react-navigation/bottom-tabs。iOS：TabView。Android：MaterialNavigationBar。 - 永遠不要建置浮動藥丸形狀的底部導航列。 不要使用
position: absolute、不要使用borderRadius: 28、不要使用深色浮動藥丸。 - 在 React Native 中使用
Platform.select()或Platform.OS進行條件樣式設定。 - 在常數檔案中定義設計 Token（顏色、間距、圓角、字體）。
- 每個畫面處理 3 種狀態：載入（骨架）、內容、空白。
iOS
- 安靜、柔和、高級。色彩節制。系統字體 (SF Pro)。語意顏色（
.label、.secondaryLabel、.systemBackground）。半透明導航/標籤列。listStyle(.insetGrouped)。SF Symbols 作為圖示。細線分隔線。圓角半徑：10-12。不要使用重陰影 — 使用背景對比。
Android (Material 3)
- 結構化、大膽、表現力強。使用來自
material3的 Material 元件。使用色調表面 (tonalElevation) 而非下拉陰影。使用Scaffold搭配TopAppBar+NavigationBar。使用ListItem可組合元件作為列表列。項目之間使用HorizontalDivider()。卡片圓角半徑：12dp。從種子顏色產生色彩方案。
React Native / Expo
- 透過
Platform.select()使用平台條件顏色、陰影和間距。 - iOS 使用
shadowColor/shadowOpacity/shadowRadius。Android 使用elevation。 - 每個平台使用不同的背景顏色：iOS
#F2F2F7，Android#F9F9FF。 - 不同的主要顏色：iOS
#007AFF，Android 使用 Material 種子顏色。
網頁規則
創意自由 + 結構
- 你在以下方面擁有自由：色板、字體選擇、邊框圓角數值、品牌個性、背景處理。
- 你必須遵循：區塊結構、英雄區內容限制、元件模式、響應式行為。
導航
- 固定頂部，搭配
backdrop-blur和半透明背景 - Logo 靠左，導航連結置中，CTA 按鈕靠右
- 行動裝置：漢堡選單
登陸頁面結構
英雄區 → 標題 + 副標題 + 2 個 CTA + 一個信任元素
信任區域 → Logo 列（視覺上不同的 Logo）
功能 → 3 欄網格，包含圖示 + 標題 + 描述
運作方式 → 3 步驟流程
客戶評價 → 大頭貼 + 姓名 + 角色 + 引言
定價 → 2-3 個方案，精選方案視覺上反轉（深色背景）
CTA → 最終行動呼籲
頁尾 → 連結欄 + 版權資訊
英雄區
- 標題 + 簡短副標題 + 2 個按鈕 + 一個信任元素。僅此而已。
- 產品模型/螢幕截圖放在兩欄英雄區的右側是可以的。
- 不要在英雄區中放置統計卡片、包含列表的複雜預覽卡片或多段落描述。
功能卡片
- 圖示容器：至少 48px，帶有淡色背景。不要太小。
- 卡片內距：寬敞（p-6 到 p-8）。
- 每張卡片應感覺完整 — 圖示 + 標題 + 描述。
定價
- 精選方案：反轉（深色背景、淺色文字）或較粗邊框 +「最受歡迎」徽章。
- 每張卡片中都有全寬 CTA。
登入
- 兩欄：品牌面板（左側，深色）+ 表單（右側）。
- 社交登入放在電子郵件表單上方。
- 行動裝置：隱藏品牌面板，顯示帶有 Logo 的表單。
儀表板
- 側邊欄 (240-260px) + 主要內容。
- 側邊欄：Logo、帶圖示的導航項目、可選的升級卡片。
- 頂部列：搜尋 + 通知 + 大頭貼。
- 內容：問候語 → 統計卡片 → 帶標籤的篩選列表 → 活動動態。
深色模式
- 背景：非常深的灰色，不是純黑色。
- 文字：接近白色，不是純白色。
- 邊框：深灰色。降低色彩飽和度。
輸出前檢查清單
在回傳程式碼之前，請確認：
字體：
- 任何地方都沒有
font-extrabold或font-black - 最多使用 2 種字重（一般 + 粗體/半粗體）
視覺：
- 沒有
tracking-[0.18em]或更寬 - 在整個頁面上最多使用 2 個全大寫標籤
- Logo 列項目在視覺上彼此不同
- 卡片上沒有 shadow-xl 或 shadow-2xl
- 一致的邊框圓角（最多 2-3 個數值）
英雄區：
- 標題在桌機上適合 2 行
- 眉毛徽章（如果存在）添加新資訊，不重複標題
- 副標題是 1-2 個句子，不是一段話
結構：
- 多個檔案（畫面、元件、常數、導航）
- 真實的圖示函式庫（不是 Unicode）
- 平台特定樣式（React Native）
- 載入/空白狀態存在
版面：
- 版面匹配內容類型（不是每次都使用相同的模板）
- 列表項目具有類別圖示 + 中繼資料
- 包含 5 個以上項目的列表具有篩選器