Atelier UI — 設計編排器 是做什麼的？
保持上下文精簡。絕不一次載入所有模組——在需求收集後路由至一個建構模組，並將機械性檢查卸載給腳本。
在以下命令與路徑中，<skill> 為包含此 SKILL.md 檔案的目錄（例如在 Linux/macOS 上為 ~/.gemini/config/skills/atelier-ui，在 Windows 上為 %USERPROFILE%\.gemini\config\skills\atelier-ui，或工作區本地的 .agents/skills/atelier-ui）。在 shell 命令中務必使用雙引號括住 "<skill>/..." 路徑，以免路徑含空格時出錯。
工作流程
1. 探查環境（僅一次）
在專案根目錄執行能力掃描器：
node "<skill>/scripts/detect-env.mjs"
不要假定外部工具（impeccable、agent-browser）存在。使用 JSON 輸出（project.framework、project.devCommand、tools.impeccableCmd、tools.agentBrowser、tools.browserBinary、tools.cdpSupported）來選擇技術棧與 QA 層級。
2. 需求收集（1 輪，附帶預設值）
僅在所有核心問題未釐清時才讀取 <skill>/modules/01-intake.md。
- 在一則編號訊息中提出所有遺漏的問題，並附帶預設值（如果使用者已提供完整細節或說出
"defaults"/"go ahead"，則可立即開始）。 - 將確定的計劃寫入
.atelier/BRIEF.md，確保上下文壓縮時不會遺失需求。
3. 路由至一個建構模組
根據需求摘要選擇表面模式，僅讀取對應檔案：
- 品牌 / 登陸 / 作品集 / 在地商家（說服或體驗）：讀取
<skill>/modules/02-brand-site.md。 - SaaS / 儀表板 / 文件 / 現有應用（操作或閱讀）：讀取
<skill>/modules/03-app-ui.md。 - 3D 世界 / WebGL / 著色器（3D）：讀取
<skill>/modules/04-3d-visual.md。
4. 通用工藝準則（始終生效）
- 使用標記而非原始色碼： 採用 CSS 自定義屬性（
:root）或專案現有的 Tailwind / 主題標記。 - 避免佈局陷阱：
html, body使用overflow-x: clip（絕不使用100vw）；圖片網格軌道使用minmax(0, 1fr)；顯示用標題使用min-width: 0; overflow-wrap: break-word。 - 動畫與無障礙： 絕不使用
transition: all；僅對transform/opacity/clip-path/filter進行動畫；加入:focus-visible以及@media (prefers-reduced-motion: reduce)。 - 禁止粗製濫造清單： 不允許未經設計的紫藍漸層、正文/標題上的漸層文字、卡片內嵌卡片、標題上方的
01/02/03眉題、使用表情符號作為 UI 圖示、虛構的推薦語、標誌或指標。 - 對比度與狀態： 正文文字對比度 >= 4.5:1，大字型文字 >= 3:1；每個可互動控制項都需涵蓋 default、hover、focus-visible、disabled、loading、empty 以及 error 狀態。
- 簡潔文案： 按鈕使用
<動詞> <名詞>格式（絕不使用泛泛的"了解更多"）。絕不留下佔位文字（Lorem ipsum、Acme、TODO）。
（機械性檢查位於 lint-ui.mjs 與 check-ui.mjs；結構性佈局規則如卡片內嵌卡片與 minmax(0, 1fr) 由您與第三層評論者驗證。）
5. 驗證與評論閘道
建構完成後，讀取 <skill>/modules/05-qa-gate.md 並執行 QA 階梯：
- 靜態粗製濫造檢查（若偵測到則使用
tools.impeccableCmd，加上node "<skill>/scripts/lint-ui.mjs" <target-dir>）。 - 瀏覽器檢查（使用
agent-browser、您環境的瀏覽器工具，或node "<skill>/scripts/check-ui.mjs" <target> --out .atelier/shots --full --sheet），分別在桌面（1440x900）與行動裝置（390x844）上進行。 - 可選的零上下文視覺評論者審查，使用擷取的螢幕截圖（當
QA Depth為critic或deep時）。
此技能包含的檔案
路徑（位於 <skill>/ 下） | 載入時機 |
|---|---|
modules/01-intake.md | 步驟 2：釐清模糊需求並撰寫 .atelier/BRIEF.md |
modules/02-brand-site.md | 步驟 3：新的行銷、公司、在地商家或作品集頁面 |
modules/03-app-ui.md | 步驟 3：儀表板、工具、文件或優化現有應用 |
modules/04-3d-visual.md | 步驟 3：Three.js、WebGL 或著色器建構 |
modules/05-qa-gate.md | 步驟 5：執行 lint、瀏覽器檢查與零上下文評論者審查 |
library/themes.json | 步驟 3（02-brand-site）：處理非通用色彩與字型搭配 |
scripts/detect-env.mjs | 步驟 1：偵測專案技術棧與已安裝的 CLI / 瀏覽器工具 |
scripts/lint-ui.mjs | 步驟 5：內建的零依賴粗製濫造與工藝準則檢查器 |
scripts/check-ui.mjs | 步驟 5：內建的零依賴 Chrome DevTools Protocol (CDP) 驗證器 |