Atelier UI — 设计编排器
保持上下文轻量。切勿一次性加载所有模块——在完成需求收集后，路由到一个构建模块，并将机械检查工作委托给脚本。
在以下命令和路径中，<skill> 是包含此 SKILL.md 文件的目录（例如 ~/.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. 通用工艺准则（始终生效）
- 使用 Token 而非原始十六进制颜色： 使用 CSS 自定义属性（
:root）或项目现有的 Tailwind/主题 Token。 - 避免布局陷阱：
overflow-x: clip应用于html, body（永远不要用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 图标、虚构的推荐语/Logo/指标。 - 对比度与状态： 正文文本对比度 >= 4.5:1，大文本 >= 3:1；每个交互控件需覆盖默认、悬停、焦点可见、禁用、加载、空状态和错误状态。
- 文案简洁： 按钮文案应为
<动词> <对象>（永远不要使用泛泛的"Learn more"）。切勿保留占位文本（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 协议 (CDP) 验证器 |