什麼是 flawless-ui-ux？
flawless-ui-ux 是一個 UI/UX 設計技能與本地檢查 CLI，專為編碼代理設計。它協助代理圍繞產品的目標受眾、內容與品牌識別，來建立、重新設計、優化及審查介面。
該技能指導網頁、原生行動裝置及桌面介面的版面、字體、色彩與互動決策。CLI 會檢查指定的原始碼檔案與瀏覽器介面，提供代理可用於發現問題並驗證修正的觀察結果。您只需描述任務；您的編碼代理便會在您現有的專案中套用這些指導方針。
無技能 vs. 有技能
在 Codex 中使用 GPT 6.1 Sol (低) 建立，然後使用相同模型與推理設定，透過 flawless-ui-ux 進行優化。
安裝
在您的專案目錄中，使用偏好的套件管理器執行一個指令：
# npm
npx flawless-ui-ux@latest install
# pnpm
pnpm dlx flawless-ui-ux@latest install
# Bun
bunx flawless-ui-ux@latest install
需要 Node 22.12+。在終端機中，選擇專案或全域範圍，選取一個或多個代理，並在複製前確認目標目錄。使用 Space 鍵選取，Enter 鍵繼續。在安裝檔案寫入前，可按 Ctrl+C 取消。
明確的旗標可直接執行：
npx flawless-ui-ux install --codex
npx flawless-ui-ux install --codex --devin
npx flawless-ui-ux install --claude-code --global
npx flawless-ui-ux install --project ./app
npx flawless-ui-ux install --yes
--yes 旗標會跳過選單，並在未提供其他旗標時使用預設值：目前專案中所有支援的代理。JSON 輸出、CI 與非終端機執行環境將保持非互動模式。使用 --format json 可取得機器可讀的輸出。
npx skills add smokeeaasd/flawless-ui-ux --skill flawless-ui-ux
這將透過 Skills CLI 安裝技能。其執行環境需求與代理選擇方式遵循該安裝程式。檢查 CLI 可透過本指南中的 npm 指令單獨取得。
bash /absolute/path/flawless-ui-ux/install.sh --codex --project
Bash 替代方案需要使用 --project 進行本地安裝；其預設值為全域安裝。Windows 使用者需要 Git Bash 或 WSL。
使用技能
描述您需要的介面並提及技能名稱：
使用 flawless-ui-ux 技能為自由工作者建立一個金融儀表板。
在 Codex 中，呼叫 $flawless-ui-ux。支援斜線指令的主機使用 /flawless-ui-ux；Pi 則使用 /skill:flawless-ui-ux。您也可以透過主機的技能機制，依名稱請求該技能。如果發現清單需要重新整理，請在安裝後啟動一個新的對話。
在介面開發過程中，可在同一個對話中繼續提出要求：
| 任務 | 範例請求 |
|---|---|
| 建立 | 為一個協調部署與事件交接的應用程式建構 Landing Page。 |
| 重新設計 | 使用提供的品牌色板，為行動裝置重新設計此帳戶畫面。保留其內容與行為。 |
| 優化 | 在保留頁面視覺特性的同時，賦予主要操作更強的存在感。 |
| 專注 | 改善字體與間距。保留用詞、色彩與功能。 |
| 審查 | 審查此儀表板的可讀性、導覽、無障礙性與重複的通用模式。回報發現結果，但不編輯檔案。 |
運作方式
該技能引導設計與實作。 它將產品脈絡與構圖、字體、色彩、密度、圖像及互動連結起來。聚焦的參考資料支援在您現有技術棧中進行建立、重新設計、優化與審查。
對於新介面與大規模重新設計，代理在實作前會先在內部考慮至少三種有意義的不同構圖，然後為產品與任務選擇一種方法。聚焦的優化則會保留授權的範圍與已建立的決策。
設計指導適用於網頁、原生行動裝置及桌面介面。CLI 的渲染檢查涵蓋瀏覽器介面；原生驗證則使用適當的平台與專案工具。
優化可以發展出預期的特性。 一個介面可能需要更強的存在感、更少的競爭強調，或更一致的完成度。正確的介入取決於內容與任務。通用文案、重複的裝飾及常見模式會在其脈絡中，與可用性及無障礙性一同被審查。
CLI 檢查實作結果。 收集專案脈絡、檢查選定的原始碼檔案或執行中的介面，並在修正後比較結果。您的代理進行修改；CLI 提供觀察結果，並記錄實際檢查的內容。
產品脈絡與工作流程
將產品事實與設計決策保留在您現有的 Markdown 文件中。代理會在跨任務中重複使用它們；脈絡檔案為選擇性。使用 context --source docs/brief.md 選擇傳統位置之外的文件。
若要準備遺失的記錄，請執行：
npx flawless-ui-ux init
CLI 會建立產品/設計 Markdown 範本，或重複使用支援的現有文件，並保留其內容。您的代理會從專案與您的決策中填寫這些記錄。之後可使用 context 讀取它們；初始化不會產生摘要，也不會選擇視覺風格。
使用重複的 --url 輸入與 --consistency 來檢查相關畫面，以建立脈絡化的樣式庫。在允許的測試環境中，使用 --flow flows/edit-member.json 來執行明確定義的 UI 動作、預期結果與命名狀態。驗證需要再次選取未變更的流程檔案。請參閱工作流程範例與限制。
檢查與驗證
直接使用 CLI，或要求您的代理在其工作中納入這些檢查。將 npx 替換為 pnpm dlx 或 bunx。
從脈絡與原始碼開始
npx flawless-ui-ux context --project . --format json
npx flawless-ui-ux inspect --project . --source src/App.tsx --format json
檢查執行中的介面
啟動您的應用程式並準備瀏覽器：
npx [email protected] install chromium
# 或：pnpm dlx [email protected] install chromium
# 或：bunx [email protected] install chromium
檢查實際的開發伺服器 URL 並儲存基線：
npx flawless-ui-ux inspect --project . --source src/App.tsx --url http://localhost:5173 --output ../app-before --format json
修正後，重複已儲存的檢查範圍：
npx flawless-ui-ux verify ../app-before/run.json --output ../app-after --format json
比較結果會分離出持續存在、新增與不再觀察到的發現。遺漏的確認目標與變更的條件將保持未驗證狀態。
| 領域 | 收集的證據 |
|---|---|
| 無障礙性 | 選定的 axe 對比度與 accessible-name 規則，包括待審查的不完整結果 |
| 文字與版面 | 在取樣寬度下計算的字型大小與水平溢出 |
| 資源與執行環境 | 可見的損壞圖片與... |
…
[已截斷以利翻譯]