메뉴
UI 美学导演。为前端项目产出 UI-DESIGN.md，含美学北极星、OKLCH design tokens、5 维决策（字体/颜色/动效/空间/质感）、关键组件规约、占位符策略和反 AI-slop 自检。Use when 前端/可视化项目确认 DESIGN.md 后需要进入 UI 设计阶段，或需要定义/更新 design system 时。后端/CLI/lib 项目跳过此阶段。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
项目级架构梳理师。建立或重构 `.specs/ARCHITECTURE.md`，包含模块图、ADR 列表、跨模块契约、依赖规则和容量边界。优先使用 GitNexus MCP 提取模块社区、依赖关系和 API 路由，grep 作为回退。Use when 用户说"建立架构/架构梳理/重构架构/architect/重审 ADR/画架构图"，或项目首次使用 flow-x 且需要项目级架构文档时。不属于任何 change，不写 CHANGE.md。
变更提案生成器。把用户的模糊想法通过反问澄清为一份变更提案 CHANGE.md，自动生成 change-id，检测架构级变更（优先使用 GitNexus MCP impact 分析），前端项目预选视觉调性，判定影响面并给出路径建议。Use when 用户说"我想做/加/实现/设计某事"且无活跃 change 时，或需要发起新变更提案时。
技术设计师。把 REQUIREMENT.md 转化为可执行的技术设计 DESIGN.md，含技术栈预选（5~6 卡让用户选）、既有架构对齐（brownfield）、技术决策清单（备选+理由+代价）、数据流/架构图、ADR、风险分析和架构沉淀建议。优先使用 GitNexus MCP 定位既有模块和抽象，grep 作为回退。Use when 用户确认 REQUIREMENT.md 后需要进入技术设计阶段，或需要技术选型/架构评审时。
单任务开发执行器。在 fresh context 中按 TDD（RED→GREEN→REFACTOR）执行 TASK.md 中的一个任务，优先使用 GitNexus MCP 搜索既有抽象和做变更影响分析，grep 作为回退。Schema 变更生成可逆迁移，破坏性变更走影响分析+反问协议，提交前跑 diff 边界 verify 和 6 维 self-review。Use when 用户说"执行 T<NN>/跑 T<NN>/do T<NN>/继续"，或需要实现 TASK.md 中的某个任务时。
[project] 架构演进同步器。把已归档 change 的 DESIGN.md §9 架构沉淀 同步到项目级文档（CONTEXT.md + ARCHITECTURE.md）。只读 §9，只 patch 文档，不动业务代码。 GitNexus MCP 可用时用于检测代码与文档之间的偏差（新抽象未入索引、ADR 与实际代码不一致）。 Use when 用户说"同步架构/整理沉淀/sediment/evolve/架构演进/同步 CONTEXT"，或每月/每季度批量同步时。
flow-x 统一入口 Orchestrator。解析用户意图，自动匹配阶段，执行 Artifact Preflight Gate，估算 Token 预算，加载必要规则与工件，路由到对应子 skill 执行。支持 GitNexus MCP 可用性检测，GitNexus 可用时子 skill 自动优先使用 MCP 工具。Use when 用户说"开始做某事/继续/审查/测试/设计/换风格/健康检查/扫描代码/架构梳理"等任何与 flow-x 流程相关的意图，或需要自动管理 change 生命周期时。
| name | flow-ui-design |
| description | UI 美学导演。为前端项目产出 UI-DESIGN.md，含美学北极星、OKLCH design tokens、5 维决策（字体/颜色/动效/空间/质感）、关键组件规约、占位符策略和反 AI-slop 自检。Use when 前端/可视化项目确认 DESIGN.md 后需要进入 UI 设计阶段，或需要定义/更新 design system 时。后端/CLI/lib 项目跳过此阶段。 |
为前端项目决策"看起来怎样"，产出可直接落地的 design tokens 和组件规约。
按 4 个问题显式回答，缺一不可：
反问：上述 4 题任一答不出 → 停下来反问。
优先读代码 >> 看截图。按顺序提取：
GitNexus 路径（可选）：调用 gitnexus_query(query="CSS variables theme tokens design", goal="find existing visual token definitions") 精确定位 token 源文件位置。
形成「观察报告」贴给用户校准。
按 5 维度逐项决策，每个必须给理由：
v0 = 占位符 + 关键布局 + 已选 token + 假设清单。30 秒内能读完的极简 Markdown。
贴给用户三种回复：
写出可直接复制为 CSS variables / Tailwind config / theme file 的 token 定义。所有颜色 OKLCH，间距用 px/rem。
至少定义：Button / Input / Card / Navigation / Typography hierarchy
引用 references/ui-anti-patterns.md，列出本项目的额外禁忌。
| 缺的东西 | 正确做法 | 禁止做法 |
|---|---|---|
| 图标 | [icon] 方块 / 简几何形 | emoji / AI 粗糙 SVG |
| 头像 | 首字母圆形 + 品牌色 | AI 生人脸 |
| 图片 | aspect-ratio 占位卡片 | stock photo / AI 生成 |
| 数据 | 反问用户要真数据 | 编数字 |
| logo | 文字标签 + 简几何形 | AI 自绘图形 |
红线：emoji 只有在指定品牌本就用 emoji 时才允许，默认一个不用。
输出 UI-DESIGN.md 前，逐条对照 references/ui-anti-patterns.md 的"强制禁忌"段，确认未命中。命中必须改或显式标注例外理由。
references/UI-DESIGN.md — 产出模板（含 frontmatter design tokens）references/ui-aesthetics.md — 决策框架（4 问 + 5 维度 + 调性卡片）references/ui-anti-patterns.md — 反 AI-slop 清单（8 类强制禁忌）