dembrandt

dembrandt — UX 流程编排器

概念由 @VictorGjn 提出。

将涉及多个方面的 UI/UX 任务依次交由六个阶段处理。每个阶段按需加载子技能——只加载任务实际需要的内容。

何时使用此技能，何时直接使用子技能：

• 多方面任务（“设计评审”“审核界面”“构建 UI”）→ 使用此编排器
• 单一方面任务（“检查我的配色方案”“评审按钮状态”）→ 直接使用对应子技能
• 提供 URL 或 DESIGN.md 的品牌到 Token 再到规格的流程 → 改用 generate-ui-from-brand
• 复刻现有页面，而非设计新页面 → 改用 clone-website
• 只读取线上网站的 Token，不做其他操作 → 改用 extract-design

---

流程

阶段 1 — 品牌基础

在决定任何 Token 之前，确立视觉语言。

子技能（按需加载）：

• brand-visual-language — 形状语言、图标风格、字体语气
• algorithmic-color-palette — 从品牌颜色推导状态色和带有品牌色调的灰色
• color-mode-and-theme — 选择浅色、深色或两者兼有，以及何时提供主题选择器

关卡： 在继续之前，先就品牌调性和配色系统达成一致。

---

阶段 2 — 设计 Token 与比例

确定数值体系，让所有组件共享一致的基础。

子技能（按需加载）：

• modular-scale-typography — 基于比例的字体阶梯、最小字号、结合上下文的使用方式
• elevation-and-depth — 阴影阶梯、圆角、卡片和模态框模式
• surface-separation — 每个表面只使用一种区分方式：边框、层级或填充；不透明度用于表示状态
• button-states — 六种状态：默认、悬停、激活、焦点、禁用、加载
• component-family-consistency — 按钮、输入框、胶囊按钮：共用圆角、颜色和高度
• sizing-units — px、rem 与相对单位：用户放大文字时，哪些值会随之变化
• status-colors-and-errors — 精简的语义色、错误恢复与预防

关卡： 定义 Token，并确保同一组件系列中的 Token 保持一致。

---

阶段 3 — 布局与结构

根据具体的产品场景应用布局决策。

子技能（按需加载）：

• layout-paradigms-and-consistency — 选择适合内容的布局模式；在不同屏幕间复用相同的页面骨架（宏观层面的一致性）
• gestalt-ui-organisation — 对相关控件分组：邻近性、相似性、共同区域
• visual-emphasis-and-hierarchy — 每个视图设置一个 CTA，通过颜色和尺寸突出重点
• information-architecture — 命名、心智模型、数据 UI、确认对话框
• ui-context-and-scope — 层级、面包屑、颜色区域、范围说明
• marketing-vs-product-system — 网站与产品的界面密度不同，但共用一层 Token
• responsive-paradigms — 移动端、平板和桌面端：导航、区块、粘滞行为
• ui-density — 根据平台和用户类型调整界面密度
• sticky-and-fixed-elements — 页眉、底部工具栏、z-index Token
• scroll-areas — 避免内部滚动；只使用单一滚动轴，并由用户控制

关卡： 确保布局在不同断点和用户场景下都保持协调。

阶段 4 — 组件与交互

检查组件模式和交互状态。

子技能（按需加载）：

• real-world-metaphors — 卡片、轮播、抽屉：何时使用以及如何使用
• tab-navigation — 标签页类型、溢出、键盘导航、ARIA、状态持久化
• modal-and-overlay-patterns — 工具提示／弹出层／抽屉／模态框层级、焦点管理、破坏性操作确认
• form-design — 辅助文本、占位符、验证、提交状态
• data-display-and-selection — 网格／列表／表格、大型点击区域、批量操作
• repeated-component-alignment — 将重复组件视为插槽模型：尺寸一致、锚点固定、截断并恢复溢出的文本
• operational-expert-tool-ui — 面向受训 B2B 日常用户、由工作流驱动的高密度界面
• coordinated-data-views — 保持表格与可视化视图（地图、图表、统计图）同步
• domain-expert-configuration — 使用领域语言呈现求解器／算法设置
• authentic-product-representation — 使用真实内容和真实输出，而不是摆拍式模型图和营销装饰
• app-shell — 顶栏、应用启动器、租户与环境提示、状态栏：整个产品群共用一个外壳
• global-toolbar-controls — 货币、语言、地区和单位选择器
• notifications-and-recovery — Toast、横幅、重试、撤销——始终提供继续操作的途径

关卡： 处理好所有交互状态；不留死路。

---

阶段 5 — UX 润色

运用 UX 原则和动效，提升感知品质。

子技能（按需加载）：

• nielsen-usability-heuristics — 10 条可用性原则及评审清单
• user-flows-and-guided-paths — 向导、购买流程、引导序列
• micro-interactions — 动画图标、切换、展开、庆祝效果
• loading-states-and-perceived-performance — 加载指示器、骨架屏、错开进入效果
• motion-and-storytelling — 在 UI 中运用迪士尼原则和电影化语言

关卡： 流程从头到尾清晰易懂；感知性能达到可接受水平。

---

阶段 6 — 无障碍与技术关卡

这是发布的硬性关卡。不得跳过或延期。

子技能（按需加载）：

• wcag-accessibility — WCAG 2.2 AA／EN 301 549：对比度、键盘、ARIA
• semantic-html-and-seo — HTML5、替代文本、Open Graph、渐进增强
• performance-and-web-vitals — Lighthouse 审计、LCP、CLS、INP、图片、字体、JS 加载

关卡： 通过 WCAG 2.2 AA。2025 年 6 月之后发布的产品必须符合欧盟《无障碍法案》（EAA）。

---

输出

生成一份结构化评审，而不是零散评论。按严重程度分组，最阻塞的问题排在最前：

1. 阻塞项 — 未通过硬性关卡：不符合 WCAG 2.2 AA、流程中断、无路可走。发布前必须修复。
2. 重大问题 — 破坏一致性、层级关系或核心 UX 原则。本轮修复。
3. 轻微问题 — 润色、微交互、感知性能优化。列入待办。

对每项发现，注明所属阶段、具体元素、问题所在以及明确的修复方案。

仅运行任务所需的阶段。品牌和设计令牌已确定的现有产品从阶段 3 开始；纯无障碍评审则只运行阶段 6。说明运行了哪些阶段、跳过了哪些阶段，以及原因。

---

与 generate-ui-from-brand 的关系

generate-ui-from-brand 是一条设计令牌提取流水线：URL 或 DESIGN.md → 设计令牌 → UI 规范。它与此编排器的阶段 1–2 有重叠。有品牌来源且需要具体规范时，使用它。如果要评审或构建涵盖完整 UX 关注点的产品，而没有明确的品牌提取起点，则使用此编排器。