出海圈都說好用的 Claude Skills，我用 Codex 試了一遍：UI/UX 直接起飛
整理版優先睇
用 Codex 試玩 Claude Skill「ui-ux-pro-max」：UI/UX 質感即刻提升，去 AI 味嘅關鍵喺設計規約同 Checklist
呢篇文章係由孟健寫嘅，佢本身係一個出海技術人，成日研究 AI 工具。最近佢留意到一個好紅嘅 Claude Skill「ui-ux-pro-max」，GitHub Star 已達 12.7k，專門用嚟改善 AI 生成頁面嘅 UI/UX 質量。由於 Claude 近排封號嚴重，佢就改用 Codex 嚟測試呢個 Skill，發現效果順滑，而且 UI 直出質素明顯提升。
作者嘅核心論點係：呢個 Skill 唔係單純嘅提示詞，而係一個「設計智能體」，將設計、工程、審美同組件生態結合埋一齊。佢拆解咗個 Skill 嘅結構，包括角色定義、前置依賴、使用條件、需求結構化、BM25 搜索召回、兜底策略，同埋最關鍵嘅通用設計規約同質量 Checklist。成篇文章嘅結論係：只要將常見嘅 AI 設計坑變成硬規則，再配合可執行嘅驗收清單，就可以令 AI 輸出嘅頁面更似人手設計。
文章仲提供咗具體操作步驟，例如安裝命令同體驗案例，好適合做出海站點、落地頁、SaaS 官網嘅人參考。作者強調，呢個 Skill 嘅核心價值唔係工具本身，而係背後嗰套「將經驗寫死」嘅方法論。
- 核心結論：ui-ux-pro-max 係一個設計智能體，透過結構化流程同硬規則，大幅提升 AI 生成 UI 嘅質量，去 AI 味嘅關鍵喺通用設計規約同質量 Checklist。
- 安裝方法：用 npm 全域安裝 uipro-cli，再初始化到 Codex 嘅 skill 目錄，只需 3 條命令就搞掂。
- 運作差異：有別於一般提示詞，呢個 Skill 強製做需求結構化（產品、風格、行業、技術棧），並用 BM25 搜索本地設計知識庫進行召回，確保設計維度對齊。
- 啟發位：將「AI 常見坑」變成硬規約，例如強制用 SVG icons、規定 hover 狀態、統一最大寬度等，係提升質素嘅關鍵。
- 可行動點：下載個 Skill 之後，可以複製佢嘅 Design Rules 同 Checklist 去自己團隊嘅規範入面，直接套用到任何 AI 設計工具。
ui-ux-pro-max Skill 倉庫
GitHub 倉庫，有完整源碼同說明
點解要揀 Codex 試？
Claude 最近封號太兇，好多朋友都中招。作者就乾脆喺 Codex 上試呢個 Skill，發現 Codex 完全支援 Skills，體驗好順滑。如果你都係做出海站點、落地頁、產品官網，想將 UI 質量推高一檔，呢條路好值得試。
Codex 完全支援 Skills，而且體驗順滑
安裝同驗證：3 條命令搞掂
- 1 全域安裝 CLI：npm install -g uipro-cli
- 2 進入個人根目錄初始化：cd ~ && uipro init --ai codex
- 3 如果安裝成功，~/.codex/skills 會出現新 Skill 目錄
安裝成功後，Codex 做設計時會自動調用呢個 Skill
快速體驗：做咗個 pngtosvg 站點
作者叫 Codex 整一個常見嘅出海站點：pngtosvg 工具站（Landing Page + 核心功能頁）。生成過程明確顯示調用咗呢個 Skill，產物嘅直觀感受係：整體比 AI 直出強啲，組件間距、排版、層級關係更乾淨，hover、邊框、卡片陰影、按鈕狀態呢啲小細節更完整，好多常見嘅「AI 設計坑」被提前規避咗。
拆解核心結構：點樣做到「去 AI 味」？
呢個 Skill 唔係提示詞，而係一個設計智能體，複合咗設計 × 工程 × 審美 × 組件生態
作者拆解咗幾個關鍵步驟。第一步係強製做需求結構化，從用戶輸入提取 Product type、Style keywords、Industry、Stack 呢 4 類信息。
需求結構化令設計要素對齊，避免後面部份跑偏
第二步係用 search.py 做本地 BM25 搜索，從設計知識庫 CSV 入面召回相關特徵，搜索優先級係：Product → Style → Typography → Color → Landing → Chart → UX → Stack。呢個流程似資深設計師嘅工作方式。
第三步係兜底：如果用戶冇指定技術棧，預設用 HTML + Tailwind。另外，資源清單覆蓋 50 styles、21 palettes、50 font pairings、20 charts、9 大 UI 技術棧，確保風格化輸出。
- 產品決定整體設計方向
- 樣式決定視覺語言
- 字體排版決定氣質
- 配色方案唔係隨便揀主色
- 落地頁結構決定信息架構
最精華：通用設計規約 + Checklist
如果話前面嘅內容係「檢索 + 選型」，咁真正拉開質量差距嘅，係通用設計規約（Design Rules）同質量 Checklist。呢兩塊係去 AI 味嘅精華。
規約專門針對 AI 常見坑：例如強制用 SVG icons、hover 狀態必須完整、logo/icon 比例合理、玻璃質感唔好髒、文字亮度對比夠、邊框可見、導航欄間距一致、最大寬度統一
呢啲都係人類會下意識注意而 AI 成日忽略嘅細節。作者將呢啲坑變成硬規則，令 AI 自動避開。
作者建議，如果你做緊出海站點、落地頁、SaaS 官網，好應該親自跑一次呢個 Skill 嘅流程，並且將呢套規約同 Checklist 抄入自己團隊嘅設計規範。
大家好，我係孟健。
最近我研究咗一個出海圈好多人用、口碑好好嘅 Claude Skill：ui-ux-pro-max。
倉庫地址（先收藏）：
https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
佢而家 Star 數已經好高（我見到嘅時候係 12.7k），核心作用一句講曬：
將「AI 直接出頁面陣時嗰種 AI 味」壓低，用一套更工程化、更靚、更可以重用嘅流程，令UIUI/UX 設計質素明顯提升。
我呢篇文章會做兩件事：
帶你快啲體驗嚇佢有咩效果（同埋點樣喺 Codex 上用）
拆解佢嘅思路：佢究竟靠咩令 UI 「更加似人手整」
1）點解我揀 Codex 嚟試：Claude 封號太犀利
唔少朋友都知道，Claude 最近封號封得好緊，我索性喺 Codex 上面試咗嚇，結果發現：Codex 都完全支援 Skills，而且體驗好順。
所以如果你都喺度做出海網站、登陸頁、產品官網呢類，想將 UI 質素推高一個層次，呢條路好值得試下。
2）安裝同驗證：3 條指令就搞掂
安裝方法好簡單，作者提供咗 CLI。
先全局安裝：
npm install -g uipro-cli然後入個人根目錄初始化（呢度我用 Codex）：
cd ~
uipro init --ai codex如果安裝成功，入去 ~/.codex/skills 會見到一個新嘅 Skill 目錄。
之後你就可以叫 Codex 做設計/實現時自動叫佢嚟用。
3）快速體驗：我叫佢做咗一個 pngtosvg 站點
我叫佢做咗個好簡單但好常見嘅出海站點需求：整一個 pngtosvg 工具站（Landing Page + 核心功能頁）。
可以見到佢喺生成過程中會明確顯示叫咗呢個 Skill，出嘅嘢如下：
我嘅直接感覺係：
整體比 AI 直接出好少少
組件之間嘅間距、排版、層級關係更加乾淨
Hover、邊框、卡片陰影、按鈕狀態呢啲細節更加完整
好多常見嘅「AI 設計陷阱」預先避開咗
4）拆解呢個 Skill：佢係點樣做到「去 AI 味」㗎？
跟住我哋拆一拆 ui-ux-pro-max 嘅核心結構，你會發現佢其實唔神秘，只係將流程抽象化咗。
4.1 先定角色：佢唔係「提示詞」，佢將自己定義做「設計智能體」
Skill 嘅 Description 第一段就好關鍵：佢明確話自己係一個 UI/UX 設計智能體。
而且強調呢個唔係單一維度嘅「審美提示詞」，而係一個複合體：
設計 × 工程 × 審美 × 組件生態
佢將能力拆成幾塊：設計語言、視覺系統、技術棧、組件能力、行為動作、應用場景。
設計資源嘅覆蓋亦都好廣（呢個都係佢可以穩定輸出風格化頁面嘅根本原因）：
50 styles（設計風格）
21 palettes（配色方案）
50 font pairings（字體組合）
20 charts（圖表類型）
9 大 UI 技術棧/生態
覆蓋幾乎所有常見產品型態
組件 + UI 設計維度（唔係淨係出一張「圖」，而係可以落地嘅頁面結構）
4.2 主體內容：佢要求先有 Python 依賴
Skill 主體入面寫明咗前置依賴：Python 技術棧。
4.3 How To Use：幾時應該叫佢？
How To Use 入面，作者將觸發範圍寫得好清晰：當你要做 UI/UX 相關工作時，例如：
design
build
create
implement
review
fix
improve
呢個都好符合我哋日常：由「做新頁面」到「改舊頁面」，佢都可以介入。
4.4 Step 1：強製做需求結構化（由人話入面提取 4 個關鍵資訊）
佢先做需求分析：由用戶輸入入面強制提取 4 類關鍵資訊：
Product type（產品型態）
Style keywords（視覺風格）
Industry（行業）
Stack（技術棧）
你可以理解為：先將「設計元素」對齊，如果唔係之後全部會走樣。
4.5 Step 2：用 search.py 檢索到「上下文足夠」為止（關鍵在「召回」）
第二步係檢索：用 search.py 搜幾次，一直搜到「上下文足夠」。
佢嘅實現方式亦都好有趣：唔係上網搜，亦唔係叫外部向量數據庫。
作者寫咗個本地嘅 BM25 搜索算法，去匹配知識庫（CSV）入面嘅相關特徵做召回。
如果你對工程實現有興趣，可以睇嚇源碼，會有好大啟發：將「設計知識庫」變成可以檢索嘅結構化數據，呢個係佢穩定輸出嘅核心。
搜索仲有明確嘅優先次序（呢點好似資深設計師嘅工作流程）：
Product（產品）
Style（樣式）
Typography（字體排版）
Color（顏色）
Landing（登陸頁結構）
Chart（圖表）
UX（用戶體驗）
Stack（技術棧）
呢一步其實就係：將頁面「設計系統」嘅各個維度定落嚟。
4.6 Step 3：兜底策略（冇指定技術棧就用 HTML + Tailwind）
第三步係兜底：如果用戶冇指定技術棧，佢預設用 html + tailwind。
4.7 資源清單：每個維度都係一份獨立 CSV
Skill 跟住列出曬所有可以搜嘅資源（每個都係獨立 CSV）。
總體可以理解為：
product：決定產品整體設計方向
style：決定視覺語言
typography：字體搭配同排版氣質
color：完整配色方案（唔係隨便揀個主色）
landing：登陸頁結構（資訊架構/模塊組織）
chart：圖表類型同呈現方式
ux：互動展現嘅最佳實踐
prompt：最佳提示詞（更加似「工作指令集」）
5）最精華嘅地方：通用設計規約 + Checklist（將「經驗」寫死）
如果話前面嘅內容係「檢索 + 揀嘢」，咁真正令頁面質素拉開差距嘅，係後面兩部分：
1）通用設計規約（Design Rules）
2）質量 Checklist（逐項自檢）
呢兩部分我認為係去 AI 味嘅精華，值得你反覆睇、甚至抄到自己嘅團隊規範入面。
5.1 規約：專門針對 AI 嘅「常見陷阱」
例如 AI 好鍾意生成 emoji 圖標，呢度直接規定：用 SVG icons。
仲有一大堆「人類會下意識留意，但 AI 成日忽略」嘅細節：
Hover 狀態一定要完整
Logo/icon 嘅比例要合理
滑鼠手勢、可點擊反饋要明確
動畫要順、唔好刺眼
玻璃質感唔好污糟
文字亮度對比要夠
邊框要睇到（唔好隱形）
導航欄之間嘅間距、內容之間嘅間距要一致
最大闊度要統一（唔好一時 1200 一時 1440）
呢啲基本上都係我哋用 AI 直接出頁面之後，需要「第二次人手改」嘅地方。
而作者做嘅嘢係：將呢啲陷阱預先變成硬規則。
5.2 Checklist：五個維度逐項檢查
Checklist 進一步將驗收流程寫成可以執行嘅清單，由五個維度檢查：
視覺質素
交互
亮色/暗色模式
佈局
可訪問性
結語
好啦，今日嘅 Skill 分享同行分析就到呢度。
如果你喺做出海網站、登陸頁、SaaS 官網，我好建議你親身行一次呢個 Skill 嘅流程。
大家睇完有咩得著、或者你想我下集拆解邊個 Skill / 邊套工作流程，歡迎留言。
我地下次再見。
👉 推薦一個我一直有睇嘅公眾號：哥飛
如果你都喺做 AI / 技術出海 / 個人項目，哥飛嘅好多思路都好實戰，值得睇嚇。
🚀 想同更多 AI 愛好者交流，一齊進步嗎？
精選文章
我終於將 AdSense 提現到國內銀行卡（PIN 信/税務/電匯/結匯全流程）
AI 出海市場洞察#3｜Grammarly：老牌巨頭嘅流量同變現全鏈路拆解
出海需求點樣挖？我用 Google 「新詞」揾到 0-1 嘅機會（附 122 個詞根）
大家好，我是孟健。
最近我研究了一下出海圈很多人都在用、並且口碑很好的一個 Claude Skill：ui-ux-pro-max。
倉庫地址（先收藏）：
https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
它目前 Star 已經非常高（我看到的時候是 12.7k），核心作用一句話總結就是：
把「AI 直出頁面的那股 AI 味」壓下去，用一套更工程化、更審美化、更可複用的流程，讓UI/UX 設計質量顯著提升。
我這篇文章會做兩件事：
帶你快速體驗它能帶來什麼（以及如何在 Codex 上用起來）
拆解它的思路：它到底靠什麼把 UI 做得“更像人做的”
1）為什麼我選 Codex 來試：Claude 封號太兇了
不少朋友都知道，Claude 最近封號很嚴，我就乾脆在 Codex 上試驗了一下，結果發現：Codex 也完全支持 Skills，而且體驗很順滑。
所以如果你也在做出海站點、落地頁、產品官網這一類，想把 UI 質量往上抬一檔，這條路非常值得試一下。
2）安裝與驗證：3 條命令就搞定
安裝方式非常簡單，作者提供了 CLI。
先全局安裝：
npm install -g uipro-cli然後進入個人根目錄初始化（這裏我用的是 Codex）：
cd ~
uipro init --ai codex如果安裝成功，進入 ~/.codex/skills 會看到一個新的 Skill 目錄。
接下來你就可以讓 Codex 在做設計/實現時自動調用它了。
3）快速體驗：我讓它做了一個 pngtosvg 站點
我讓它做了個很簡單但很常見的出海站點需求：做一個 pngtosvg 工具站（Landing Page + 核心功能頁）。
可以看到它在生成過程中會明確顯示調用了這個 Skill，產物如下：
我的直觀感受是：
整體比 AI 直出要稍微強一點
組件間距、排版、層級關係更乾淨
hover、邊框、卡片陰影、按鈕狀態這些小細節更完整
很多常見的“AI 設計坑”被提前規避了
4）拆解這個 Skill：它是怎麼做到“去 AI 味”的？
接下來我們拆一下 ui-ux-pro-max 的核心結構，你會發現它其實不神秘，只是把流程抽象了。
4.1 先定角色：它不是“提示詞”，它把自己定義成“設計智能體”
Skill 的 Description 第一段就很關鍵：它明確說自己是一個 UI/UX 設計智能體。
並且強調這不是單一維度的“審美提示詞”，而是一個複合體：
設計 × 工程 × 審美 × 組件生態
它把能力拆成了幾塊：設計語言、視覺系統、技術棧、組件能力、行為動作、應用場景。
設計資源的覆蓋也非常廣（這也是它能穩定輸出風格化頁面的根本原因）：
50 styles（設計風格）
21 palettes（配色方案）
50 font pairings（字體組合）
20 charts（圖表類型）
9 大 UI 技術棧/生態
覆蓋幾乎所有常見產品形態
組件 + UI 設計維度（不是隻生成一張“圖”，而是可落地的頁面結構）
4.2 主體內容：它要求先有 Python 依賴
Skill 主體裏寫明瞭前置依賴：Python 技術棧。
4.3 How To Use：什麼時候應該調用它？
How To Use 裏，作者把觸發範圍寫得很清晰：當你要做 UI/UX 相關工作時，比如：
design
build
create
implement
review
fix
improve
這也很符合我們日常：從“做新頁面”到“改老頁面”，它都能介入。
4.4 Step 1：強制做需求結構化（從人話裏提取 4 個關鍵信息）
它先做需求分析：從用戶輸入裏強制提取 4 類關鍵信息：
Product type（產品形態）
Style keywords（視覺風格）
Industry（行業）
Stack（技術棧）
你可以把它理解為：先把“設計要素”對齊，否則後面全部會跑偏。
4.5 Step 2：用 search.py 檢索到“上下文足夠”為止（關鍵在“召回”）
第二步是檢索：用 search.py 多次搜索，一直搜索到「上下文足夠」。
它的實現方式也很有意思：不是聯網搜，也不是調用外部向量數據庫。
作者寫了一個本地的 BM25 搜索算法，去匹配知識庫（CSV）裏的相關特徵進行召回。
如果你對工程實現感興趣，可以去翻源碼看看，會很有啓發：把“設計知識庫”變成可檢索的結構化數據，這是它穩定輸出的核心。
搜索還有明確的優先級順序（這點很像資深設計師的工作流）：
Product（產品）
Style（樣式）
Typography（字體排版）
Color（顏色）
Landing（落地頁結構）
Chart（圖表）
UX（用戶體驗）
Stack（技術棧）
這一步其實就是：把頁面“設計系統”的各個維度定下來。
4.6 Step 3：兜底策略（沒指定技術棧就用 HTML + Tailwind）
第三步是兜底：如果用戶沒有指定技術棧，它默認用 html + tailwind。
4.7 資源清單：每個維度都是一份獨立 CSV
Skill 接下來列出了所有可搜索的資源（每個都是獨立 CSV）。
總體可以理解為：
product：決定產品整體設計方向
style：決定視覺語言
typography：字體搭配與排版氣質
color：完整配色方案（不是隨便挑個主色）
landing：落地頁結構（信息架構/模塊組織）
chart：圖表類型與呈現方式
ux：交互展現的最佳實踐
prompt：最佳提示詞（更像“工作指令集”）
5）最精華的地方：通用設計規約 + Checklist（把“經驗”寫死）
如果說前面的內容是“檢索 + 選型”，那真正把頁面質量拉開差距的，是後面的兩塊：
1）通用設計****規約（Design Rules）
2）質量 Checklist（逐項自檢）
這兩塊我認為是去 AI 味的精華，值得你反覆讀、甚至抄到自己的團隊規範裏。
5.1 規約：專門針對 AI 的“常見坑”
比如 AI 很愛生成 emoji 圖標，這裏直接規定：用 SVG icons。
還有一堆“人類會下意識注意，但 AI 經常忽略”的細節：
hover 狀態必須完整
logo/icon 的比例要合理
鼠標手型、可點擊反饋要明確
動畫要平滑、別晃眼
玻璃質感不要髒
文字亮度對比要夠
邊框要可見（別隱形）
導航欄間距、內容間距要一致
最大寬度要統一（別一會兒 1200 一會兒 1440）
這些基本都是我們拿 AI 直出頁面之後，需要“二次人工修”的地方。
而作者做的事情是：把這些坑提前變成硬規則。
5.2 Checklist：五個維度逐項檢查
Checklist 進一步把驗收流程寫成了可執行的清單，從五個維度檢查：
視覺質量
交互
亮色/暗色模式
佈局
可訪問性
結語
好了，今天的 Skill 分享和分析就到這裏了。
如果你在做出海站點、落地頁、SaaS 官網，我強烈建議你親自跑一遍這個 Skill 的流程。
大家看完有什麼收穫、或者你希望我下一期拆解哪個 Skill / 哪套工作流，歡迎留言。
我們下期再見。
👉 推薦一個我一直關注的公眾號：哥飛
如果你也在做 AI / 技術出海 / 個人項目，哥飛的很多思路都很實戰，值得一看。
🚀 想要與更多AI愛好者交流，共同成長嗎？
精選文章
我終於把 AdSense 提現到國內銀行卡了（PIN 信/税務/電匯/結匯全流程）
AI 出海市場洞察#3｜Grammarly：老牌巨頭的流量與變現全鏈路拆解
出海需求怎麼挖？我用 Google “新詞”找到 0-1 的機會（附 122 個詞根）