uix-skill 是做什麼的？
建立看起來經過設計、而非生成的 UI。一次決定外觀（DESIGN.md），從中建構，並透過腳本檢查結果。
路徑：以下所有 references/、data/ 和 scripts/ 路徑都是相對於包含此 SKILL.md 的資料夾。請從使用者的專案根目錄以 node <該資料夾>/scripts/<名稱>.mjs 執行腳本。腳本需要 Node 22。
指令
| 指令 | 工作 |
|---|---|
/uix init | 讀取專案，詢問 3 個問題，提供 3 個方向，撰寫並 lint DESIGN.md。 |
/uix build | 從 DESIGN.md 建構頁面、畫面或元件，檢查並修正。預設指令。 |
/uix audit | 執行檢查並報告。不編輯任何內容。 |
/uix polish | 修正主要的審計問題。保留邏輯、路由和文案含義。 |
/uix motion | 在回答 4 個問題後，審閱或加入動畫。 |
動詞可以以 /uix-skill <動詞>、uix <動詞> 或純文字請求（「製作設定頁面」、「審計這個畫面」）的形式出現。將純文字請求對應到最接近的動詞。若無明確匹配：則為 build。
嚴格規則
- 如果
DESIGN.md存在：優先讀取它並據此建構。跳過初始導入和方向選取。絕不發明它未定義的顏色、字型或圓角。 - 在
scripts/rules.mjs執行完畢前，且對於 Web 技術棧，在scripts/check.mjs也執行完畢前，絕不報告完成。如果無法執行檢查（參閱檢查章節），則報告unverified: <原因>。 - 檢查後最多進行 2 輪修復。然後報告剩餘問題。
- 圖片：優先使用專案資源，然後是 Openverse/Wikimedia（需標註來源），最後是 CSS/SVG 藝術。絕不使用空白佔位符。
- 僅使用免費工具。不使用付費 API，不需要金鑰。
- 不編輯請求 UI 範圍之外的檔案。
/uix audit不編輯任何內容。 - 只載入下方表格中命名的檔案。載入一個技術棧檔案，但
shadcn和nuxt-ui除外：載入該指南以及主機框架的指南。
執行順序
- 讀取專案：package.json、設定檔、現有樣式、DESIGN.md、
public/或assets/。 - 偵測技術棧（下方表格）。載入其指南。
- 初始導入。在同一個訊息中一併詢問 3 個問題：目標受眾、畫面的功能、調性。行動端技術棧：調性也會詢問「平靜或有活力的動畫？」；將答案記錄為 DESIGN.md 中的動畫層級（
references/design-md.md）。跳過使用者或專案已回答的任何問題。 - 從
references/directions.md提供 3 個在調性、密度和色溫上明顯不同的方向。等待選擇。如果擁有者已提前選定方向，則跳過提供步驟。 - 撰寫 DESIGN.md（
references/design-md.md）並對其進行 lint。修正每個 lint 錯誤。 - 從
references/layouts-web.md（行銷、內容）或references/layouts-app.md（已登入畫面）中選擇一個結構。 - 建構第一個區塊。使用真實文案、真實圖片、所有元件狀態。
- 檢查（如下）。先修正錯誤，再修正警告。最多 2 輪。
- 報告。
步驟 3 到 5 屬於 init 指令。build 使用現有的 DESIGN.md；若無，則先執行 init。
現有設計系統優先
DESIGN.md存在：讀取它、對其 lint、從中建構。- 沒有
DESIGN.md，但專案有自己的設計記號或主題（Tailwind 設定檔、CSS 變數、主題檔案）：/uix init會從這些記號撰寫一個DESIGN.md（在專案根目錄）。除非使用者要求新的外觀，否則不要提供新的方向。 - 兩者皆無：執行完整的
init。 - 「自己的設計記號」意指超出框架預設起始值的顏色、字型或間距，這些記號存在於 Tailwind v4 的
@theme區塊、Tailwind 設定檔、CSS 自訂屬性或平台主題檔案中。create-next-app 的預設--background/--foreground不計入。
應載入的內容
除非必要，否則不載入其他內容。
| 時機 | 載入 |
|---|---|
| 任何建構、打磨或審計 | references/anti-slop.md、references/components-a11y.md |
init，或任何 DESIGN.md 的撰寫 | references/design-md.md |
init（提供方向時） | references/directions.md，然後是 data/fonts.csv、data/palettes.csv、data/styles.csv 中選定的行 |
| 行銷、內容、目錄頁面 | references/layouts-web.md |
| 儀表板、表格、表單、設定、認證 | references/layouts-app.md |
任何動畫，或 /uix motion | references/motion.md |
| 行動端建構、打磨或審計 | references/mobile-foundations.md、references/mobile-patterns.md |
| 行動端動畫 | 載入 references/mobile-motion.md 而非 references/motion.md |
| 行動端：安全檢視應用程式、Expo Go 與開發建置版本的差異、點擊與滑動檢查 | references/mobile-testing.md |
針對行動端應用程式的 init | 載入 data/mobile-styles.csv 而非 data/styles.csv（選定的行） |
| 任何圖片位置 | references/images.md |
| 範例 DESIGN.md 格式 | data/examples/ledger.md、field-notes.md 或 harbor.md。僅一個。 |
| 每次任務 | 一個 references/stacks/<id>.md。對於 shadcn 或 nuxt-ui，還需要主機指南（參閱技術棧偵測）。 |
技術棧偵測
從上到下，第一個匹配即為結果。若無匹配：則為 html-tailwind。匹配精確的依賴名稱（next，而不是 next-themes）。
| 訊號 | 技術棧 ID |
|---|---|
package.json 中存在 @nuxt/ui | nuxt-ui |
存在帶有 shadcn 的 components.json，或 @/components/ui | shadcn |
存在 artisan 檔案或 composer.json 中存在 laravel/framework | laravel |
package.json 中存在 nuxt | nuxtjs |
package.json 中存在 next | nextjs |
@angular/core 或 angular.json | angular |
package.json 中存在 astro 或 astro.config.* | astro |
svelte 或 @sveltejs/kit | svelte |
package.json 中存在 vue | vue |
package.json 中存在 three | threejs |
package.json 中存在 react-native 或 expo | react-native |
package.json 中存在 react | react |
pubspec.yaml | flutter |
帶有 Compose (androidx.compose) 的 build.gradle(.kts) | jetpack-compose |
*.xcodeproj 或帶有 SwiftUI 的 Package.swift | swiftui |
帶有 Avalonia 的 *.csproj | avalonia |
帶有 Uno. 或 Uno.WinUI 的 *.csproj | uno |
帶有 Microsoft.WindowsAppSDK 的 *.csproj | winui |
帶有 <UseWPF>true</UseWPF> 的 *.csproj | wpf |
帶有 TargetPlatformIdentifier 為 UAP 或 Microsoft.NETCore.UniversalWindowsPlatform 的 *.csproj | uwp |
帶有 javafx 的 pom.xml 或 build.gradle | javafx |
| 以上皆非 | html-tailwind |
Web 端 ID：angular, astro, html-tailwind, laravel, nextjs, nuxt-ui, nuxtjs, react, shadcn, svelte, threejs, vue。其餘為原生端。
「行動端技術棧」指的是 react-native、flutter、swiftui 或 jetpack-compose。這些請求也會載入「應載入的內容」中的行動端相關行。
更具體的技術棧優先：nextjs 優先於 react，react-native 優先於 react，laravel 優先於其 JS 前端。
元件層技術棧會載入兩個指南：shadcn 加上主機指南（nextjs、react、astro、laravel …，由本表格偵測，但跳過 shadcn 行），以及 nuxt-ui 加上 nuxtjs。其他所有專案載入一個。
檢查
從使用者的專案根目錄執行。將 <skill> 替換為包含此 SKILL.md 的資料夾。
node <skill>/scripts/rules.mjs [--design DESIGN.md] <路徑...>
node <skill>/scripts/check.mjs <url|檔案> [--widths 375,768,1280] [--out .uix/shots] [--themes attr=v1,v2]
node <skill>/scripts/images.mjs "<查詢>" [--count 6]
- 三個腳本都會輸出 JSON。
rules.mjs輸出{findings, skipped}：最小化、超過 1 MB 或無法讀取的檔案會被歸入skipped並附帶原因，這不算錯誤。check.mjs輸出{shots, findings, notes}；請閱讀notes（例如，載入超時提早探測到，或某個截圖失敗）。退出碼 0：乾淨。退出碼 1：存在錯誤發現（rules.mjs、check.mjs）。退出碼 2：使用方式或環境問題（全部三個腳本）。images.mjs僅會退出 0 或 2。 - 退出碼 2 絕不代表乾淨結果，也不計入修復輪次。如果
check.mjs無法訪問頁面，但專案有顯而易見的開發腳本（npm run dev等），則在背景啟動一次並重試。否則詢問使用者。指出缺少什麼（Chrome、Node 22、未執行的伺服器）。 - 如果檢查仍無法執行，報告應顯示
unverified: <原因>。 - Web 技術棧：對原始碼執行
rules.mjs，然後對開發伺服器 URL 或建置後的檔案執行check.mjs。寬度為 375、768 和 1280。截圖存放於.uix/shots：<w>.png為完整頁面，<w>-<n>.png為高度最多 1600 像素的區塊。請查看區塊截圖，而非完整頁面截圖；它會被縮小到難以閱讀。check.mjs會先滾動頁面，以便滾動才顯示的內容能被捕捉到。 - 當專案定義了多個主題（
[data-theme]、[data-skin]、.dark），請使用--themes傳遞，例如--themes data-skin=oatmeal,rose或--themes class=dark。每個主題會以最後一個寬度進行測試；其發現結果會帶有theme欄位。 - 對比度發現結果會按顏色配對分組（
count、sample、selectors）。請修正設計記號，而非每個元素。 - React Native (Expo)：執行
rules.mjs，然後對正在執行的 Metro 伺服器執行node <skill>/scripts/check-mobile.mjs --app exp://127.0.0.1:<埠號>；針對 Android 模擬器則添加--platform android（旗標和路由檔案在技術棧指南中）。它會輸出{shots, findings, notes}並像check.mjs一樣以退出碼 0、1 或 2 結束。如果 notes 以maestro missing:開頭，表示階層和流程未執行；請將其報告為unverified: <原因>，而不是一次成功的執行。截圖存放於.uix/mobile-shots。發現結果route-not-navigated是一個錯誤，絕不代表乾淨結果：該截圖顯示了另一個畫面。修復循環：使用--only <路由>和一個--devices條目重新檢查，而不是完整的測試矩陣。 - 其他行動端技術棧：執行
rules.mjs。原生 iOS 應用程式 (SwiftUI) 隨後使用check-mobile.mjs --native（旗標在技術棧指南中）；在審計過程中，使用--out "$(mktemp -d)"。其他則使用技術棧檔案「如何檢查」部分的手動截圖配方（淺色、深色、xxxl文字）。如果沒有模擬器可用：報告unverified: <原因>。2 輪限制仍然適用。 - 其他原生技術棧：執行
rules.mjs，然後執行技術棧檔案「如何檢查」部分的手動檢查清單。沒有瀏覽器檢查。 - 先修正
error級別的發現結果，再修正warn級別。保留的 warn 需要一行理由。 - 修復循環：檢查、修正、重新檢查。最多 2 輪。然後停止並報告。
- 規則 ID 及其修正方法在
references/anti-slop.md中。它也列出腳本無法捕捉的判斷規則；請自行審閱這些規則。
指令合約
init
- 讀取專案，偵測技術棧，載入其指南。
- 如果存在現有設計記號或 DESIGN.md：請參閱「現有設計系統優先」。
- 否則，詢問 3 個問題，提供 3 個明顯不同的方向，然後等待。
任何技術棧：偵測內容語言（
lang、i18n 檔案、文案），並僅選取data/fonts.csv中scripts欄位涵蓋該語言的資料行。 - 撰寫 DESIGN.md。Lint：執行
npx --yes @google/[email protected] lint DESIGN.md。修正錯誤。 - 報告所選方向、已撰寫的檔案以及 lint 結果。
build
- 讀取 DESIGN.md、技術棧指南和佈局檔案。
- 選擇一個結構。用一行說明選擇了哪個結構及其原因。
- 先完整建構第一個區塊。然後建構其餘部分。
- 執行檢查。在最多 2 輪內修正。
- 報告。
audit
- 偵測技術棧並載入其指南。
- 執行檢查。審閱判斷規則。將
--out "$(mktemp -d)"傳遞給check.mjs和check-mobile.mjs，以便審計不在專案中寫入任何內容。 - 輸出一個表格。不編輯任何內容。
| 之前 | 之後 | 原因 |
|---|---|---|
| 目前的內容 | 應有的內容 | 規則 ID 或原因 |
polish
- 偵測技術棧並載入其指南。
- 先執行審計。
- 修正主要問題，從錯誤開始。不要更改邏輯、路由或文案含義。
- 重新執行檢查。最多 2 輪。報告。
motion
- 載入
references/motion.md（行動端技術棧：references/mobile-motion.md）。對每個動畫，以書面形式回答其中的 4 個問題：是否必要、它傳達了什麼、使用何種緩動函數、持續時間多長。 - 刪除任何沒有明確答案的動畫。加入
prefers-reduced-motion處理（技術棧指南會指出原生的對應處理方式）。 - 輸出一個「之前 / 之後 / 原因」表格。僅在使用者要求新增或修正動畫（而非僅審閱）時才套用變更。
報告
每次執行結束時報告：
- 哪些內容已更改（檔案）。
- 仍然存在的發現結果，每個都附帶規則 ID 和原因。
- 在
.uix/shots中的截圖和區塊路徑（Web 端）、在.uix/mobile-shots中的截圖路徑（行動端）或已執行的手動檢查（其他原生端）。 - 已加入的圖片來源資訊。