防止在生成前端程式碼時出現通用的 AI/Codex UI 模式。在產生 HTML、CSS、React、Vue、Svelte 或任何前端 UI 程式碼時，使用此技能來強制採用乾淨、人類設計的美學，靈感來自 Linear、Raycast、Stripe 和 GitHub，而非典型的 AI 生成 UI。
Uncodixify
這份文件旨在教你如何在建立 UI 時，盡可能表現得不像 Codex。
Codex UI 是預設的 AI 美學：柔和的漸層、浮動面板、眉毛標籤、裝飾性文案、儀表板中的英雄區塊、過大的圓角、變形動畫、戲劇化的陰影，以及過度追求高級感的佈局。這是一種視覺語言，一看就知道「這是 AI 做的」，因為它遵循了最小阻力路徑。
這份文件是你的指南，用來打破這種模式。以下列出的都是 Codex UI 預設會做的事。你的任務是辨識這些模式，完全避免它們，並建立出感覺像人類設計、功能導向且誠實的介面。
當你閱讀這份文件時，你正在學習什麼是「不該做」的。禁止的模式是你的紅旗。正常的實作是你的藍圖。嚴格遵循它們，你就能創造出像 Linear、Raycast、Stripe 或 GitHub 的 UI，而不是另一個通用的 AI 儀表板。
這就是 Uncodixify。
保持正常（Uncodexy-UI 標準）
- 側邊欄：正常（240-260px 固定寬度，實色背景，簡單的右邊框，無浮動外殼，無圓角外框）
- 標題：正常（簡單文字，無眉毛標籤，無大寫標籤，無漸層文字，僅使用 h1/h2 搭配適當層級）
- 區塊：正常（標準內距 20-30px，儀表板內無英雄區塊，無裝飾性文案）
- 導航：正常（簡單連結，微妙的懸停狀態，無變形動畫，除非功能性需要否則無徽章）
- 按鈕：正常（實色填充或簡單邊框，最大圓角 8-10px，無膠囊形狀，無漸層背景）
- 卡片：正常（簡單容器，最大圓角 8-12px，微妙的邊框，陰影模糊不超過 8px，無浮動效果）
- 表單：正常（標準輸入框，欄位上方的清楚標籤，無花俏的浮動標籤，簡單的焦點狀態）
- 輸入框：正常（實色邊框，簡單的焦點環，無動畫底線，無變形形狀）
- 模態框：正常（置中覆蓋層，簡單的背景遮罩，無滑入動畫，直接的關閉按鈕）
- 下拉選單：正常（簡單列表，微妙的陰影，無花俏動畫，清楚的選中狀態）
- 表格：正常（乾淨的行，簡單邊框，微妙的懸停，除非需要否則無斑馬紋，文字靠左對齊）
- 列表：正常（簡單項目，一致的間距，無裝飾性項目符號，清楚的層級）
- 分頁：正常（簡單的底線或邊框指示器，無膠囊背景，無滑動動畫）
- 徽章：正常（小文字，簡單邊框或背景，圓角 6-8px，無發光，僅在需要時使用）
- 頭像：正常（簡單圓形或圓角方形，無裝飾性邊框，除非功能性需要否則無狀態環）
- 圖示：正常（簡單形狀，一致尺寸 16-20px，無裝飾性圖示背景，單色或微妙色彩）
- 排版：正常（系統字型或簡單無襯線字體，清楚層級，無混合襯線/無襯線組合，內文可讀尺寸 14-16px）
- 間距：正常（一致的比例 4/8/12/16/24/32px，無隨機間隙，無過度內距）
- 邊框：正常（1px 實線，微妙色彩，無厚裝飾邊框，無漸層邊框）
- 陰影：正常（微妙 0 2px 8px rgba(0,0,0,0.1) 最大，無戲劇化下拉陰影，無彩色陰影）
- 轉場：正常（100-200ms ease，無彈跳動畫，無變形效果，簡單的透明度/色彩變化）
- 佈局：正常（標準 grid/flex，無創意不對稱，可預測的結構，清楚的內容層級）
- 網格：正常（一致欄數，標準間距，無創意重疊，響應式斷點）
- Flexbox：正常（簡單對齊，標準間距，無創意的 justify 技巧）
- 容器：正常（最大寬度 1200-1400px，置中，標準內距，無創意寬度）
- 包裝器：正常（簡單的容器 div，無裝飾用途，僅功能性）
- 面板：正常（簡單背景區分，微妙邊框，無浮動分離面板，無玻璃效果）
- 工具列：正常（簡單水平佈局，標準高度 48-56px，清楚的操作，無裝飾元素）
- 頁尾：正常（簡單佈局，標準連結，無裝飾區塊，最小高度）
- 麵包屑：正常（簡單文字搭配分隔符，無花俏樣式，清楚層級）
想想 Linear。想想 Raycast。想想 Stripe。想想 GitHub。它們不試圖吸引注意力。它們只是運作良好。別再故作姿態。做出正常的 UI。
- 登陸頁面需要它的區塊。如果英雄區塊需要完整區塊，如果儀表板需要完整區塊搭配側邊欄和其他一切正確佈局。不要發明新的佈局。
- 在你的內部推理中，假裝你沒看到這個，列出所有你會做的事，然後不要做！
- 嘗試複製 Figma/設計師製作的元件，不要自己發明。
嚴格禁止
-
所有你習慣做且對你來說是基本「YES」的事。
-
沒有過大的圓角。
-
沒有過度使用膠囊形狀。
-
沒有浮動玻璃擬態外殼作為預設視覺語言。
-
沒有用來偽裝品味的柔和企業漸層。
-
沒有通用的深色 SaaS UI 構成。
-
沒有裝飾性側邊欄色塊。
-
沒有「控制室」角色扮演，除非明確要求。
-
沒有襯線標題 + 系統無襯線後備字體的組合，作為通往「高級」的捷徑。
-
沒有
Segoe UI、Trebuchet MS、Arial、Inter、Roboto或安全預設字型堆疊，除非產品已經在使用它們。 -
沒有固定的左側導覽列，除非資訊架構真的需要。
-
沒有指標卡片網格作為第一直覺。
-
沒有僅為填滿空間而存在的假圖表。
-
沒有隨機發光、模糊暈影、磨砂面板或圓錐漸層甜甜圈作為裝飾。
-
沒有內部 UI 中的「英雄區塊」，除非有真實的產品理由。
-
沒有為了看起來昂貴而產生死角的對齊方式。
-
沒有過度內距的佈局。
-
沒有行動裝置折疊後只是把所有東西堆成一個長條米色三明治。
-
沒有裝飾性標籤如「即時脈衝」、「夜班」、「操作員檢查清單」，除非來自產品語調。
-
沒有通用的新創文案。
-
沒有因為容易生成而做出的樣式決定。
-
沒有任何形式的標題
<div class="headline">
<small>Team Command</small>
<h2>One place to track what matters today.</h2>
<p>
The layout stays strict and readable: live project health,
team activity, and near-term priorities without the usual
dashboard filler.
</p>
</div>
這是不允許的。
-
<small>標題是不允許的 -
圓角
span是大忌 -
顏色往藍色方向走 — 不行，不好。 深色柔和顏色最好。
-
任何類似這張卡片結構的都是 大忌。
<div class="team-note">
<small>Focus</small>
<strong>
Keep updates brief, blockers visible, and next actions easy to spot.
</strong>
</div>
這一個是 最大的禁忌。
特別禁止（基於過去的錯誤）
- 所有元素的邊框半徑在 20px 到 32px 之間（某處到處使用 12px - 太多）
- 在側邊欄、卡片、按鈕和面板上重複相同的圓角矩形
- 側邊欄寬度約 280px，頂部有品牌區塊，下方有導航連結（某處：248px 含品牌區塊）
- 浮動分離的側邊欄，帶有圓角外殼
- 在玻璃卡片中放置 Canvas 圖表，沒有產品特定理由
- 甜甜圈圖表搭配模糊的百分比
- 使用發光而非層級的 UI 卡片
- 混合對齊邏輯，部分內容靠左邊緣，部分內容浮在置中區塊中
- 過度使用柔和灰藍色文字，削弱對比和清晰度
- 「高級深色模式」實際上是指藍黑漸層背景加上青色強調色（某處背景有徑向漸層）
- 感覺像模板而非品牌的 UI 排版
- 眉毛標籤（某處：「MARCH SNAPSHOT」大寫加字母間距）
- 儀表板內的英雄區塊（某處有完整的英雄條帶搭配裝飾性文案）
- 裝飾性文案如「Operational clarity without the clutter」作為頁面標題
- 到處都是區塊註解和小註解解釋 UI 的功能
- 懸停時的變形動畫（某處：導航連結上的 translateX(2px)）
- 戲劇化的盒子陰影（某處：0 24px 60px rgba(0,0,0,0.35)）
- 使用 ::before 偽元素建立彩色圓點的狀態指示器
- 大寫加字母間距的柔和標籤（某處過度使用此模式）
- 帶有漸層填充的管道條（某處：linear-gradient(90deg, var(--primary), #4fe0c0)）
- 網格中的 KPI 卡片作為預設儀表板佈局（某處有 3 欄 kpi-grid）
- 「團隊焦點」或「近期活動」面板，帶有裝飾性內部文案
- 每個狀態都使用標籤徽章的表格（某處過度使用 .tag 類別）
- 側邊欄中的工作區區塊，帶有行動呼籲按鈕
- 帶有漸層背景的品牌標記（某處：linear-gradient(135deg, #2a2a2a, #171717)）
- 顯示計數或「Live」狀態的導航徽章（某處有 nav-badge 類別）
- 帶有進度條的配額/使用量面板（某處有三個配額區塊）
- 帶有 meta 資訊的頁尾行（某處：「Northstar dashboard • dark mode • single-file HTML」）
- 帶有彩色文字的趨勢指標（某處：trend-up, trend-flat 類別）
- 右側的導覽列面板，帶有「Today」行程（某處有完整的右側導覽列）
- 多個巢狀面板類型（panel, panel-2, rail-panel, table-panel）
規則
如果一個 UI 選擇感覺像是預設的 AI UI 動作，就禁止它，並選擇更困難、更乾淨的選項。
-
顏色應保持平靜，不要互相衝突。
-
你不擅長選擇顏色，請依照以下優先順序選擇顏色：
- 最高優先級： 如果使用者專案提供了現有顏色，則使用它們（你可以透過閱讀幾個檔案來搜尋）。
- 如果專案沒有提供色板，從以下預定義色板之一獲取靈感。
- 除非明確要求，否則不要發明隨機的顏色組合。
你不必總是選擇第一個色板。在汲取靈感時隨機選擇一個。
深色配色方案
| 色板 | 背景 | 表面 | 主要 | 次要 | 強調 | 文字 |
|---|---|---|---|---|---|---|
| Midnight Canvas | #0a0e27 |
#151b3d |
#6c8eff |
#a78bfa |
#f472b6 |
#e2e8f0 |
| Obsidian Depth | #0f0f0f |
#1a1a1a |
#00d4aa |
#00a3cc |
#ff6b9d |
#f5f5f5 |
| Slate Noir | #0f172a |
#1e293b |
#38bdf8 |
#818cf8 |
#fb923c |
#f1f5f9 |
| Carbon Elegance | #121212 |
#1e1e1e |
#bb86fc |
#03dac6 |
#cf6679 |
#e1e1e1 |
| Deep Ocean | #001e3c |
#0a2744 |
#4fc3f7 |
#29b6f6 |
#ffa726 |
#eceff1 |
| Charcoal Studio | #1c1c1e |
#2c2c2e |
#0a84ff |
#5e5ce6 |
#ff375f |
#f2f2f7 |
| Graphite Pro | #18181b |
#27272a |
#a855f7 |
#ec4899 |
#14b8a6 |
#fafafa |
| Void Space | #0d1117 |
#161b22 |
#58a6ff |
#79c0ff |
#f78166 |
#c9d1d9 |
| Twilight Mist | #1a1625 |
#2d2438 |
#9d7cd8 |
#7aa2f7 |
#ff9e64 |
#dcd7e8 |
| Onyx Matrix | #0e0e10 |
#1c1c21 |
#00ff9f |
#00e0ff |
#ff0080 |
#f0f0f0 |
淺色配色方案
| 色板 | 背景 | 表面 | 主要 | 次要 | 強調 | 文字 |
|---|---|---|---|---|---|---|
| Cloud Canvas | #fafafa |
#ffffff |
#2563eb |
#7c3aed |
#dc2626 |
#0f172a |
| Pearl Minimal | #f8f9fa |
#ffffff |
#0066cc |
#6610f2 |
#ff6b35 |
#212529 |
| Ivory Studio | #f5f5f4 |
#fafaf9 |
#0891b2 |
#06b6d4 |
#f59e0b |
#1c1917 |
| Linen Soft | #fef7f0 |
#fffbf5 |
#d97706 |
#ea580c |
#0284c7 |
#292524 |
| Porcelain Clean | #f9fafb |
#ffffff |
#4f46e5 |
#8b5cf6 |
#ec4899 |
#111827 |
| Cream Elegance | #fefce8 |
#fefce8 |
#65a30d |
#84cc16 |
#f97316 |
#365314 |
| Arctic Breeze | #f0f9ff |
#f8fafc |
#0284c7 |
#0ea5e9 |
#f43f5e |
#0c4a6e |
| Alabaster Pure | #fcfcfc |
#ffffff |
#1d4ed8 |
#2563eb |
#dc2626 |
#1e293b |
| Sand Warm | #faf8f5 |
#ffffff |
#b45309 |
#d97706 |
#059669 |
#451a03 |
| Frost Bright | #f1f5f9 |
#f8fafc |
#0f766e |
#14b8a6 |
#e11d48 |
#0f172a |
