測了18個Codex UI Skill，踩了7個坑，最後1個保留
整理版優先睇
實測18個Codex UI Skill，最後只留shadcn：一個產品界面嘅救星
呢篇文章係一個獨立開發者（OPC一人公司）分享佢用Codex做前端UI嘅實戰經驗。佢發現Codex雖然寫到代碼，但UI設計永遠似「開盲盒」，按鈕圓角唔統一、顏色亂用、交互狀態缺失。為咗解決呢個問題，佢花咗3個禮拜測試咗18個Codex UI Skill，踩咗7個坑，最後只保留一個：shadcn skill。整體結論係：shadcn能幫Codex由「後端工程師隨手糊嘅管理台」提升到「可用嘅產品界面」，令組件樣式統一度由30%升至95%，開發效率由1.5日/頁面降到0.5日/頁面。
文章先列出Codex前端翻車嘅4個經典坑：組件唔似組件（同一項目出現3種按鈕樣式）、頁面冇信息層級、顏色隨緣發揮、交互狀態缺失。然後用對比數據證明shadcn嘅效果，再詳細講安裝步驟（包括踩坑提示）同埋18個Skill嘅對比表。最後畀出建議：如果你係OPC一人公司，shadcn + Codex可以慳外包成本、快速驗證原型、降低技術債務。
- Codex本身UI零約束，經常出按鈕圓角唔統一、顏色亂用、缺交互狀態等問題。
- shadcn skill係唯一保留嘅解決方案，能將組件統一度由30%提升到95%。
- 安裝shadcn後必須重啓Codex，仲要喺個性化配置寫明「use Shadcn skill for UI work」。
- shadcn嘅工作流係：先用現成組件，再用組件組合表達結構，用語義化顏色，補齊交互狀態。
- 對一人公司嚟講，shadcn + Codex可慳800-1500蚊/頁面外包成本，一日內完成原型。
Codex前端翻車嘅4個經典坑
好多人用Codex做前端，成日覺得界面好似「開盲盒」，功能係有但審美全靠運氣。作者用過Codex做「A股市場掃描器」，數據全鋪上去，結果界面似後端工程師隨手糊嘅管理台。以下係佢總結嘅4個經典坑：
坑1：組件唔似組件
按鈕、輸入框、卡片、彈窗各寫各嘅，冇統一邊距、圓角、字號。失敗案例：登錄頁嘅「提交」按鈕圓角4px，註冊頁嘅「確認」按鈕圓角8px，同一個項目出現3種按鈕樣式。
坑2：頁面冇信息層級
大標題、小標題、說明文案、操作按鈕放埋一齊，視覺上分唔出邊句重要。失敗案例：管理後台首頁標題同正文都係16px加粗，用戶一眼睇唔到重點。
坑3：顏色隨緣發揮
一時藍色，一時綠色，一時灰色，狀態色同品牌色撈埋一齊。失敗案例：表單校驗錯用紅色，成功提示用藍色，警告用橙色，用戶睇到懵。
坑4：交互狀態缺失
保存冇toast，加載冇skeleton，空數據冇empty state。失敗案例：刪除操作冇任何提示，用戶㩒咗掣唔知有冇成功。
shadcn skill實測效果
作者讓Codex用shadcn重新設計一個「個人知識庫管理後台」，效果即刻上咗一個台階。前後對比數據：
- 1 組件樣式統一度：30% → 95%
- 2 交互狀態完整度：20% → 90%
- 3 視覺層級清晰度：40% → 85%
- 4 開發效率提升：1.5日/頁面 → 0.5日/頁面
shadcn讓Codex嘅UI工作流變成：
- 1 先揾現成組件，唔好急住手搓：Button、Card、Dialog、Sheet、Tabs、Table、Badge、Sidebar、Form、Toast呢啲常見UI都用shadcn組件。
- 2 用組件組合表達結構：卡片唔係隨便加邊框嘅div，而係CardHeader + CardTitle + CardDescription + CardContent組合出嚟。
- 3 用語義化顏色：用bg-background、text-muted-foreground、bg-primary呢類token，唔好隨手寫bg-blue-500。
- 4 交互狀態更完整：保存用toast，加載用skeleton，空數據用empty state，危險操作用alert dialog。
shadcn係一個完整嘅UI約束系統，唔係單一組件庫
安裝步驟（實測踩坑版）
以下係作者實測後嘅安裝步驟，留意踩坑提示。
- 1 步驟1：安裝skill。安裝shadcn skill（來源：shadcn/ui，路徑：skills/shadcn）。踩坑提示：安裝後必須重啟Codex，否則skill唔生效。
- 2 步驟2：寫進個性化配置（最關鍵）。將呢句寫入Codex嘅Custom Instructions / Personalization："use Shadcn skill for UI work."踩坑提示：唔寫嘅話，Codex依然會按老習慣手搓div。
- 3 步驟3：實戰測試。用呢個Prompt測試係咪生效：「請用shadcn嘅組件同約束，設計一個管理後台首頁。要求包含：Sidebar、統計卡片、任務隊列表格、最近日誌、空狀態同保存反饋。先畀設計計劃，再實現。」
實測18個Skill最後只留shadcn
18個Skill實測對比（重點選出）
作者測試咗18個Skill，下表係其中幾個重要對比：
Skill | 適用場景 | 學習成本 | 效果評分 | 推薦度
shadcn | UI設計 | 低 | 9.5/10 | ⭐⭐⭐⭐⭐
Tailwind | 樣式約束 | 中 | 7/10 | ⭐⭐⭐
Radix UI | 組件庫 | 高 | 8/10 | ⭐⭐⭐⭐
Headless UI | 組件庫 | 中 | 7.5/10 | ⭐⭐⭐
Chakra UI | 組件庫 | 中 | 6/10 | ⭐⭐⭐如果你用緊Codex做前端，即刻裝上shadcn skill，唔好再賭Codex今次審美在線唔在線喇。
shadcn係唯一保留嘅Skill
花咗3個禮拜，測試咗18個Codex UI Skill，踩咗7個坑，最後淨係留低咗1個。
以前用Codex做前端，每次開個界面都好似開盲盒——功能係實現咗，但係審美全靠運氣。掣好似臨時擺上去咁，間距一時大一時細，顏色就好似從Tailwind調色盤隨手拈嚟咁。
最慘嗰次：叫Codex做咗個「A股市場掃描器」，數據全部鋪曬上去，結果個界面好似「後端工程師收工前隨手亂整嘅管理台」——掣嘅圓角唔統一、卡片層層疊疊、狀態色混到一鑊泡。
後來試咗shadcn skill，直接將Codex由前端小白拉到咗「用得嘅產品界面」。
❌ Codex前端炒車嘅4個經典坑
坑1：組件唔似組件
掣、輸入框、卡片、彈窗各自寫各自嘅，冇統一嘅邊距、圓角、字型大小。
- • 失敗例子：登錄頁面嘅「提交」掣圓角4px，註冊頁面嘅「確認」掣圓角8px，同一個項目入面出現咗3種掣嘅樣式。
坑2：頁面冇資訊層級
大標題、細標題、說明文案、操作掣擺埋一齊，視覺上分唔出主次。
- • 失敗例子：管理後台首頁，標題同正文都係16px加粗，用戶一眼睇唔出重點喺邊。
坑3：顏色隨心發揮
一陣藍色，一陣綠色，一陣灰色，狀態色同品牌色溝埋一齊。
- • 失敗例子：表單校驗錯誤用紅色，成功提示用藍色，警告用橙色，用戶睇到懞咗。
坑4：互動狀態缺失
儲存冇toast，載入冇skeleton，空數據冇empty state。
- • 失敗例子：刪除操作冇任何提示，用戶㩒咗掣唔知有冇成功。
呢個唔係Codex唔識寫代碼，而係佢欠一個明確嘅UI約束系統。
✅ shadcn skill實測效果
我叫Codex用shadcn重新設計咗一個「個人知識庫管理後台」，效果直接上咗一個台階：
前後對比數據：
- • 組件樣式統一度：30% → 95%
- • 互動狀態完整度：20% → 90%
- • 視覺層級清晰度：40% → 85%
- • 開發效率提升：1.5日/頁面 → 0.5日/頁面
shadcn令到Codex嘅UI工作流程變成：
- 1. 先揾現成組件
- ，唔好急住自己搓
- • Button、Card、Dialog、Sheet、Tabs、Table、Badge、Sidebar、Form、Toast呢啲常見UI，都優先使用shadcn組件
- 2. 用組件組合表達結構
- • 卡片唔係隨便加邊框嘅div，而係
CardHeader + CardTitle + CardDescription + CardContent組合出嚟 - 3. 用語義化顏色
- • 用
bg-background、text-muted-foreground、bg-primary呢類token，而唔係隨手寫bg-blue-500 - 4. 互動狀態更完整
- • 儲存用toast，載入用skeleton，空數據用empty state，危險操作就用alert dialog
🔧 安裝步驟（實測踩坑版）
步驟1：安裝skill
請安裝 shadcn skill。
來源：shadcn/ui
路徑：skills/shadcn踩坑提示：安裝之後一定要重啟Codex，如果唔係skill唔會生效。
步驟2：寫入個人化配置（最關鍵！）
將呢句話寫入Codex嘅Custom Instructions / Personalization入面：
- use Shadcn skill for UI work.踩坑提示：如果唔寫呢句話，Codex都係會按返老習慣手搓div。
步驟3：實戰測試
用呢個Prompt測試係咪生效：
請用shadcn的組件和約束，設計一個管理後台首頁。
要求包含：Sidebar、統計卡片、任務隊列表格、最近日誌、空狀態和保存反饋。
先給設計計劃，再實現。📊 測試嘅18個Skill對比
💡 我嘅建議
如果你係OPC一人公司，shadcn + Codex嘅組合價值：
- • ✅ 節省前端外包成本（1個頁面可以慳800-1500蚊）
- • ✅ 快速驗證產品原型（由想法到可用界面，1日內完成）
- • ✅ 降低技術債務（shadcn組件落到源碼入面，唔係黑盒庫）
如果你在用Codex做前端，即刻裝上shadcn skill，唔好再賭Codex今次審美在唔在線啦。
添加微信AI55416951 加入「AI編程實戰羣」，獲取shadcn skill完整配置包 + 我嘅Codex前端工作流SOP
花了3周，測試了18個Codex UI Skill，踩了7個坑，最後只留了1個。
以前用Codex做前端，每次打開界面都像開盲盒——功能是實現了，但審美全靠運氣。按鈕像臨時擺上去的，間距忽大忽小，顏色像從Tailwind調色盤裏隨手抓的。
最慘的一次：讓Codex做了一個「A股市場掃描器」，數據全鋪上去了，結果界面像"後端工程師下班前隨手糊的管理台"——按鈕圓角不統一、卡片層層套娃、狀態色混成一鍋粥。
後來試了shadcn skill，直接把Codex從前端小白拉到了"能用的產品界面"。
❌ Codex前端翻車的4個經典坑
坑1：組件不像組件
按鈕、輸入框、卡片、彈窗各寫各的，沒有統一邊距、圓角、字號。
- • 失敗案例：登錄頁面的"提交"按鈕圓角4px，註冊頁面的"確認"按鈕圓角8px，同一個項目裏出現了3種按鈕樣式。
坑2：頁面沒有信息層級
大標題、小標題、說明文案、操作按鈕放在一起，視覺上分不出主次。
- • 失敗案例：管理後台首頁，標題和正文都是16px加粗，用戶一眼看不出重點在哪。
坑3：顏色隨緣發揮
一會兒藍色，一會兒綠色，一會兒灰色，狀態色和品牌色混在一起。
- • 失敗案例：表單校驗錯誤用紅色，成功提示用藍色，警告用橙色，用戶看懵了。
坑4：交互狀態缺失
保存沒有toast，加載沒有skeleton，空數據沒有empty state。
- • 失敗案例：刪除操作沒有任何提示，用戶點了按鈕不知道有沒有成功。
這不是Codex不會寫代碼，而是它缺一個明確的UI約束系統。
✅ shadcn skill實測效果
我讓Codex用shadcn重新設計了一個「個人知識庫管理後台」，效果直接上一個台階：
前後對比數據：
- • 組件樣式統一度：30% → 95%
- • 交互狀態完整度：20% → 90%
- • 視覺層級清晰度：40% → 85%
- • 開發效率提升：1.5天/頁面 → 0.5天/頁面
shadcn讓Codex的UI工作流變成：
- 1. 先找現成組件
- ，不急着手搓
- • Button、Card、Dialog、Sheet、Tabs、Table、Badge、Sidebar、Form、Toast這些常見UI，都優先用shadcn組件
- 2. 用組件組合表達結構
- • 卡片不是隨便加邊框的div，而是
CardHeader + CardTitle + CardDescription + CardContent組合出來 - 3. 用語義化顏色
- • 用
bg-background、text-muted-foreground、bg-primary這類token，而不是隨手寫bg-blue-500 - 4. 交互狀態更完整
- • 保存用toast，加載用skeleton，空數據用empty state，危險操作用alert dialog
🔧 安裝步驟（實測踩坑版）
步驟1：安裝skill
請安裝 shadcn skill。
來源：shadcn/ui
路徑：skills/shadcn踩坑提示：安裝後必須重啓Codex，否則skill不生效。
步驟2：寫進個性化配置（最關鍵！）
把這句話寫進Codex的Custom Instructions / Personalization裏：
- use Shadcn skill for UI work.踩坑提示：如果不寫這句話，Codex還是會按老習慣手搓div。
步驟3：實戰測試
用這個Prompt測試是否生效：
請用shadcn的組件和約束，設計一個管理後台首頁。
要求包含：Sidebar、統計卡片、任務隊列表格、最近日誌、空狀態和保存反饋。
先給設計計劃，再實現。📊 測試的18個Skill對比
💡 我的建議
如果你是OPC一人公司，shadcn + Codex的組合價值：
- • ✅ 節省前端外包成本（1個頁面能省800-1500元）
- • ✅ 快速驗證產品原型（從想法到可用界面，1天內完成）
- • ✅ 降低技術債務（shadcn組件落到源碼裏，不是黑盒庫）
如果你在用Codex做前端，立刻裝上shadcn skill，不要再賭Codex這次審美在線不在線了。
添加微信AI55416951 加入「AI編程實戰羣」，獲取shadcn skill完整配置包 + 我的Codex前端工作流SOP