dembrandt

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

dembrandt — UX Pipeline Orchestrator

dembrandt — UX 流程编排器

Concept by @VictorGjn.

Routes multi-concern UI/UX tasks through six ordered stages. Each stage loads sub-skills on demand — only what the task actually needs.

When to use this skill vs a sub-skill directly:

Multi-concern task ("design review", "audit interface", "build UI") → use this orchestrator
Single-concern task ("check my colour palette", "review button states") → go directly to the sub-skill
Brand-to-token-to-spec pipeline with a URL or DESIGN.md → use
```
generate-ui-from-brand
```
instead

概念由 @VictorGjn 提出。

将多关注点的UI/UX任务按六个有序阶段流转。每个阶段会按需加载子技能（sub-skill）——仅加载任务实际需要的内容。

何时使用本技能 vs 直接使用子技能：

多关注点任务（如“设计评审”“界面审计”“构建UI”）→ 使用本编排器
单一关注点任务（如“检查我的调色板”“评审按钮状态”）→ 直接使用对应子技能
从品牌到令牌再到规范的流程（含URL或DESIGN.md文件）→ 改用
```
generate-ui-from-brand
```

Pipeline

流程阶段

Stage 1 — Brand Foundation

阶段1 — 品牌基础

Establish the visual language before making any token decisions.

Sub-skills (load as needed):

```
brand-visual-language
```
— shape language, icon style, typography tone
```
algorithmic-color-palette
```
— derive states and brand-tinted greys from brand colours
```
color-mode-and-theme
```
— light vs dark vs combined, when to offer a theme selector

Gate: Brand tone and colour system agreed before proceeding.

在制定任何令牌决策前，先确立视觉语言。

按需加载的子技能：

```
brand-visual-language
```
— 造型语言、图标风格、排版基调
```
algorithmic-color-palette
```
— 从品牌色衍生状态色及品牌色调灰度
```
color-mode-and-theme
```
— 亮色/暗色/混合模式，何时提供主题切换器

关卡要求： 品牌基调与色彩体系达成共识后方可进入下一阶段。

Stage 2 — Design Tokens & Scales

阶段2 — 设计令牌与尺度规范

Pin the numeric system so all components share a common foundation.

Sub-skills (load as needed):

```
modular-scale-typography
```
— ratio-based type scales, minimum sizes, context-aware usage
```
elevation-and-depth
```
— shadow scale, border-radius, card and modal patterns
```
button-states
```
— six states: rest, hover, active, focus, disabled, loading
```
component-family-consistency
```
— buttons, inputs, pills: shared radius, colour, height
```
status-colors-and-errors
```
— minimal semantic colours, error recovery, prevention

Gate: Tokens defined and consistent across component family.

确立数值体系，确保所有组件共享统一基础。

按需加载的子技能：

```
modular-scale-typography
```
— 基于比例的字体尺度、最小尺寸、上下文感知使用规则
```
elevation-and-depth
```
— 阴影尺度、圆角、卡片与模态框模式
```
button-states
```
— 六种状态：默认、悬停、激活、聚焦、禁用、加载
```
component-family-consistency
```
— 按钮、输入框、胶囊组件：共享圆角、颜色、高度规范
```
status-colors-and-errors
```
— 极简语义色彩、错误恢复与预防机制

关卡要求： 令牌已定义且在组件家族中保持一致。

Stage 3 — Layout & Structure

阶段3 — 布局与结构

Apply layout decisions to the specific product context.

Sub-skills (load as needed):

```
layout-paradigms-and-consistency
```
— choose the layout paradigm that fits the content; reuse the same page skeleton across screens (macro-scale consistency)
```
gestalt-ui-organisation
```
— group related controls: proximity, similarity, common region
```
visual-emphasis-and-hierarchy
```
— one CTA per view, colour and size as emphasis
```
information-architecture
```
— naming, mental models, data UI, confirm dialogs
```
ui-context-and-scope
```
— hierarchy, breadcrumbs, colour regions, scope communication
```
responsive-paradigms
```
— mobile/tablet/desktop: nav, sections, sticky behaviour
```
ui-density
```
— match density to platform and user type
```
sticky-and-fixed-elements
```
— headers, bottom toolbars, z-index tokens
```
scroll-areas
```
— avoid inner scroll, one axis only, user-controlled

Gate: Layout is coherent across breakpoints and user contexts.

将布局决策应用于特定产品场景。

按需加载的子技能：

```
layout-paradigms-and-consistency
```
— 选择适配内容的布局范式；在不同屏幕间复用相同页面骨架（宏观尺度一致性）
```
gestalt-ui-organisation
```
— 分组相关控件：邻近性、相似性、共同区域原则
```
visual-emphasis-and-hierarchy
```
— 每个视图仅保留一个主CTA，通过颜色与尺寸实现强调效果
```
information-architecture
```
— 命名规则、心智模型、数据UI、确认对话框
```
ui-context-and-scope
```
— 层级结构、面包屑、色彩区域、范围传递
```
responsive-paradigms
```
— 移动端/平板/桌面端：导航、区块、粘性元素行为
```
ui-density
```
— 匹配平台与用户类型的UI密度
```
sticky-and-fixed-elements
```
— 页眉、底部工具栏、z-index令牌
```
scroll-areas
```
— 避免内部滚动，仅保留单轴滚动，由用户控制

关卡要求： 布局在不同断点与用户场景下保持连贯。

Stage 4 — Components & Interaction

阶段4 — 组件与交互

Review component patterns and interactive states.

Sub-skills (load as needed):

```
real-world-metaphors
```
— cards, carousels, drawers: when to use and how
```
tab-navigation
```
— tab types, overflow, keyboard nav, ARIA, state persistence
```
modal-and-overlay-patterns
```
— tooltip/popover/drawer/modal hierarchy, focus management, destructive confirm
```
form-design
```
— helper text, placeholder, validation, submit state
```
data-display-and-selection
```
— grid/list/table, large hit areas, mass actions
```
repeated-component-alignment
```
— repeated components as slot models: equal size, pinned anchors, clamp + recover overflowing text
```
operational-expert-tool-ui
```
— dense, workflow-driven UIs for trained daily B2B users
```
coordinated-data-views
```
— keep a table and a visual view (map, diagram, chart) synchronized
```
domain-expert-configuration
```
— expose solver/algorithm settings in domain language
```
authentic-product-representation
```
— real content and real output over staged mockups and marketing chrome
```
global-toolbar-controls
```
— currency, language, locale: placement and typography
```
notifications-and-recovery
```
— toasts, banners, retry, undo — always a path forward

Gate: All interactive states handled; no dead ends.

评审组件模式与交互状态。

按需加载的子技能：

```
real-world-metaphors
```
— 卡片、轮播、抽屉：适用场景与实现方式
```
tab-navigation
```
— 标签类型、溢出处理、键盘导航、ARIA规范、状态持久化
```
modal-and-overlay-patterns
```
— 提示框/弹出层/抽屉/模态框层级、焦点管理、破坏性操作确认
```
form-design
```
— 辅助文本、占位符、验证规则、提交状态
```
data-display-and-selection
```
— 网格/列表/表格、大点击区域、批量操作
```
repeated-component-alignment
```
— 重复组件作为插槽模型：尺寸一致、锚点固定、截断与恢复溢出文本
```
operational-expert-tool-ui
```
— 面向每日使用的专业B2B用户的高密度、工作流驱动UI
```
coordinated-data-views
```
— 保持表格与可视化视图（地图、图表、示意图）同步
```
domain-expert-configuration
```
— 用领域语言展示求解器/算法设置
```
authentic-product-representation
```
— 用真实内容与输出替代staged样机和营销修饰
```
global-toolbar-controls
```
— 货币、语言、地区：布局与排版规范
```
notifications-and-recovery
```
— 提示条、横幅、重试、撤销——始终提供前进路径

关卡要求： 所有交互状态均已处理；无死胡同。

Stage 5 — UX Polish

阶段5 — UX优化

Apply UX principles and motion to sharpen perceived quality.

Sub-skills (load as needed):

```
nielsen-usability-heuristics
```
— 10 usability principles with review checklists
```
user-flows-and-guided-paths
```
— wizards, purchase flows, onboarding sequences
```
micro-interactions
```
— animated icons, toggles, reveals, celebrations
```
loading-states-and-perceived-performance
```
— spinners, skeleton screens, staggered entry
```
motion-and-storytelling
```
— Disney principles and cinematic language in UI

Gate: Flow is legible end-to-end; perceived performance is acceptable.

应用UX原则与动效提升感知质量。

按需加载的子技能：

```
nielsen-usability-heuristics
```
— 10条可用性原则及评审检查表
```
user-flows-and-guided-paths
```
— 向导、购买流程、引导序列
```
micro-interactions
```
— 动画图标、切换控件、展开效果、庆祝动效
```
loading-states-and-perceived-performance
```
— 加载spinner、骨架屏、staggered入场动画
```
motion-and-storytelling
```
— UI中的迪士尼动画原则与电影语言

关卡要求： 流程全程清晰易懂；感知性能符合预期。

Stage 6 — Accessibility & Technical Gate

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

Hard ship gate. Do not skip or defer.

Sub-skills (load as needed):

```
wcag-accessibility
```
— WCAG 2.2 AA / EN 301 549: contrast, keyboard, ARIA
```
semantic-html-and-seo
```
— HTML5, alt texts, Open Graph, progressive enhancement
```
performance-and-web-vitals
```
— Lighthouse audit, LCP, CLS, INP, images, fonts, JS loading

Gate: Passes WCAG 2.2 AA. Required by EU Accessibility Act (EAA) for products launched after June 2025.

硬性交付关卡，不可跳过或延迟。

按需加载的子技能：

```
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标准。根据欧盟无障碍法案（EAA），2025年6月后发布的产品必须满足此要求。

Output

输出成果

Produce one structured review, not a stream of loose comments. Group findings by severity, most blocking first:

Blockers — fails a hard gate: WCAG 2.2 AA, a broken flow, a dead end. Must fix before ship.
Major — breaks consistency, hierarchy, or a core UX principle. Fix this iteration.
Minor — polish, micro-interactions, perceived-performance refinements. Backlog.

For each finding give the stage it came from, the specific element, what is wrong, and the concrete fix.

Run only the stages the task needs. An existing product with settled brand and tokens starts at Stage 3; a pure accessibility pass runs Stage 6 alone. State which stages you ran and which you skipped, and why.

生成一份结构化评审报告，而非零散的评论。按严重程度分组，最具阻塞性的问题优先：

阻塞问题 — 未通过硬性关卡：WCAG 2.2 AA标准、流程断裂、死胡同。发布前必须修复。
主要问题 — 破坏一致性、层级结构或核心UX原则。需在本次迭代中修复。
次要问题 — 优化细节、微交互、感知性能提升。可放入待办清单。

每个问题需标注来源阶段、具体元素、问题点及明确的修复方案。

仅运行任务所需的阶段。已有成熟品牌与令牌的现有产品可从阶段3开始；纯无障碍检测仅需运行阶段6。需说明运行了哪些阶段、跳过了哪些阶段及原因。

Relationship to

generate-ui-from-brand

与

generate-ui-from-brand

的关系

generate-ui-from-brand

is a token-extraction pipeline: URL or DESIGN.md → tokens → UI spec. It overlaps stages 1–2 of this orchestrator. Use it when you have a brand source and need a concrete spec. Use this orchestrator when you are reviewing or building across the full stack of UX concerns without a specific brand-extraction starting point.

generate-ui-from-brand

是令牌提取流程：URL或DESIGN.md → 令牌 → UI规范。它与本编排器的阶段1-2存在重叠。当你拥有品牌源并需要生成具体规范时，使用该工具。当你需要跨全栈UX关注点进行评审或构建，且无特定品牌提取起点时，使用本编排器。

dembrandt

Original

Translation

dembrandt — UX Pipeline Orchestrator

dembrandt — UX 流程编排器

Pipeline

流程阶段

Stage 1 — Brand Foundation

阶段1 — 品牌基础

Stage 2 — Design Tokens & Scales

阶段2 — 设计令牌与尺度规范

Stage 3 — Layout & Structure

阶段3 — 布局与结构

Stage 4 — Components & Interaction

阶段4 — 组件与交互

Stage 5 — UX Polish

阶段5 — UX优化

Stage 6 — Accessibility & Technical Gate

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

Output

输出成果

Relationship to
`generate-ui-from-brand`

与
`generate-ui-from-brand`
的关系