跨多个 UI/UX 关注点时用 dembrandt…

当 UI/UX 任务同时涉及品牌、设计 token、布局、组件、体验打磨和无障碍等多个关注点时，按 dembrandt 编排器顺序路由并输出结构化审查；单一关注点任务则直接使用对应子技能。

适用场景

解决思路

1. 判断任务是否跨多个设计关注点：若是 `design review`、`build UI`、`audit interface`、`from brand to UI` 等多关注点任务，使用本编排器。
2. 若是单一关注点任务（如 `review my colour palette`、`review button states`），直接进入对应子技能，不要走完整编排器。
3. 若已有品牌来源（URL 或 DESIGN.md）并需要生成具体 UI 规范，使用 `generate-ui-from-brand`，而不是本编排器。
4. 若任务是复现现有页面而不是设计页面，使用 `clone-website`，而不是本编排器。
5. 按六个有序阶段路由多关注点 UI/UX 任务：品牌基础 → 设计 token → 布局 → 组件 → UX 打磨 → 无障碍与技术门槛。
6. 每个阶段按需加载子技能，只加载任务实际需要的部分。
7. Stage 1 Brand Foundation：在做出任何 token 决策前，先建立视觉语言。
8. Stage 1 按需加载 `brand-visual-language`：处理形状语言、图标风格、排版语气。
9. Stage 1 按需加载 `algorithmic-color-palette`：从品牌色派生状态色和带品牌倾向的灰色。
10. Stage 1 按需加载 `color-mode-and-theme`：决定浅色、深色或组合模式，以及何时提供主题选择器。
11. Stage 1 门禁：品牌调性和色彩系统达成一致后才继续。
12. Stage 2 Design Tokens & Scales：固定数值系统，让所有组件共享共同基础。
13. Stage 2 按需加载 `modular-scale-typography`：基于比例的字体比例、最小字号、上下文感知用法。
14. Stage 2 按需加载 `elevation-and-depth`：阴影层级、border-radius、卡片和模态框模式。
15. Stage 2 按需加载 `button-states`：rest、hover、active、focus、disabled、loading 六种状态。
16. Stage 2 按需加载 `component-family-consistency`：buttons、inputs、pills 共享 radius、colour、height。
17. Stage 2 按需加载 `sizing-units`：区分 px、rem 与相对单位，判断用户放大文字时哪些值应随之变化。
18. Stage 2 按需加载 `status-colors-and-errors`：最小语义色、错误恢复、错误预防。
19. Stage 2 门禁：token 已定义且在组件族内保持一致。
20. Stage 3 Layout & Structure：把布局决策应用到具体产品上下文。
21. Stage 3 按需加载 `layout-paradigms-and-consistency`：选择适合内容的布局范式；在多个屏幕复用同一页面骨架（宏观一致性）。
22. Stage 3 按需加载 `gestalt-ui-organisation`：用 proximity、similarity、common region 组织相关控件。
23. Stage 3 按需加载 `visual-emphasis-and-hierarchy`：每个视图一个 CTA，用颜色和尺寸表达强调。
24. Stage 3 按需加载 `information-architecture`：命名、心理模型、数据 UI、确认对话框。
25. Stage 3 按需加载 `ui-context-and-scope`：层级、面包屑、颜色区域、范围传达。
26. Stage 3 按需加载 `responsive-paradigms`：mobile/tablet/desktop 的导航、区块、sticky 行为。
27. Stage 3 按需加载 `ui-density`：让密度匹配平台和用户类型。
28. Stage 3 按需加载 `sticky-and-fixed-elements`：headers、bottom toolbars、z-index tokens。
29. Stage 3 按需加载 `scroll-areas`：避免内部滚动，只用单轴，且由用户控制。
30. Stage 3 门禁：布局在各断点和用户上下文中保持一致。
31. Stage 4 Components & Interaction：审查组件模式和交互状态。
32. Stage 4 按需加载 `real-world-metaphors`：cards、carousels、drawers 的使用时机和方式。
33. Stage 4 按需加载 `tab-navigation`：tab 类型、溢出、键盘导航、ARIA、状态持久化。
34. Stage 4 按需加载 `modal-and-overlay-patterns`：tooltip/popover/drawer/modal 层级、焦点管理、破坏性操作确认。
35. Stage 4 按需加载 `form-design`：辅助文本、placeholder、校验、提交状态。
36. Stage 4 按需加载 `data-display-and-selection`：grid/list/table、大点击区域、批量操作。
37. Stage 4 按需加载 `repeated-component-alignment`：把重复组件当作 slot 模型：等大、固定锚点、clamp 并恢复溢出文本。
38. Stage 4 按需加载 `operational-expert-tool-ui`：为每天使用 B2B 工具的受过训练用户设计密集、工作流驱动的 UI。
39. Stage 4 按需加载 `coordinated-data-views`：保持表格与可视化视图（map、diagram、chart）同步。
40. Stage 4 按需加载 `domain-expert-configuration`：用领域语言暴露 solver/algorithm 设置。
41. Stage 4 按需加载 `authentic-product-representation`：使用真实内容和真实输出，而不是摆拍 mockup 和营销外壳。
42. Stage 4 按需加载 `app-shell`：top bar、app launcher、tenant 和 environment cue、status bar：在一套产品族中使用同一 shell。
43. Stage 4 按需加载 `global-toolbar-controls`：currency、language、region、unit 选择器。
44. Stage 4 按需加载 `notifications-and-recovery`：toasts、banners、retry、undo——始终给用户前进路径。
45. Stage 4 门禁：所有交互状态都已处理；没有死胡同。
46. Stage 5 UX Polish：应用 UX 原则和动效来提升感知质量。
47. Stage 5 按需加载 `nielsen-usability-heuristics`：10 条可用性原则及审查清单。
48. Stage 5 按需加载 `user-flows-and-guided-paths`：wizards、purchase flows、onboarding sequences。
49. Stage 5 按需加载 `micro-interactions`：动画图标、toggles、reveals、celebrations。
50. Stage 5 按需加载 `loading-states-and-perceived-performance`：spinners、skeleton screens、staggered entry。
51. Stage 5 按需加载 `motion-and-storytelling`：在 UI 中运用 Disney 原则和电影化语言。
52. Stage 5 门禁：流程端到端清晰可读；感知性能可接受。
53. Stage 6 Accessibility & Technical Gate：硬性发布门槛；不要跳过或推迟。
54. Stage 6 按需加载 `wcag-accessibility`：WCAG 2.2 AA / EN 301 549：contrast、keyboard、ARIA。
55. Stage 6 按需加载 `semantic-html-and-seo`：HTML5、alt texts、Open Graph、progressive enhancement。
56. Stage 6 按需加载 `performance-and-web-vitals`：Lighthouse audit、LCP、CLS、INP、images、fonts、JS loading。
57. Stage 6 门禁：通过 WCAG 2.2 AA；2025 年 6 月后发布的产品，EU Accessibility Act (EAA) 要求必须满足。
58. 输出一份结构化审查，而不是一串松散评论。
59. 按严重程度分组，最阻塞的在前：Blockers（阻断项）——硬门槛失败，如 WCAG 2.2 AA、流程中断、死胡同；发布前必须修复。
60. 按严重程度分组：Major（主要问题）——破坏一致性、层级或核心 UX 原则；本轮迭代修复。
61. 按严重程度分组：Minor（次要问题）——打磨、微交互、感知性能优化；放入 backlog。
62. 每条发现都给出：来自哪个阶段、具体元素、错在哪里、具体修复方案。
63. 只运行任务需要的阶段：已有产品且品牌和 token 已确定时，从 Stage 3 开始；纯无障碍检查只运行 Stage 6。
64. 说明运行了哪些阶段、跳过了哪些阶段，以及原因。
65. 与 `generate-ui-from-brand` 的关系：后者是 token 提取管线：URL 或 DESIGN.md → tokens → UI spec，与本编排器 Stage 1–2 重叠。
66. 有品牌来源并需要具体规范时，使用 `generate-ui-from-brand`。
67. 没有特定品牌提取起点、要跨完整 UX 关注点审查或构建时，使用本编排器。

适用边界 · 注意事项

• 单一关注点任务（如只检查配色或按钮状态）不要用本编排器，直接使用相关子技能。
• 已有 URL 或 DESIGN.md 品牌来源并需要生成具体 UI 规范时，不要用本编排器，改用 `generate-ui-from-brand`。
• 需要复现现有页面而不是重新设计页面时，不要用本编排器，改用 `clone-website`。