generate-ui-from-brand

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

generate-ui-from-brand

从品牌生成UI

Type: Pipeline / Orchestrator
Input: URL or existing DESIGN.md
Output: Actionable UI spec with decisions made

类型： Pipeline / 编排器
输入： URL或已有的DESIGN.md
输出： 已完成决策的可执行UI规范

Step 1 — Extract

步骤1 — 提取

If a URL is provided and Dembrandt MCP is available:

All MCP extraction tools are async — they return a

job_id

immediately. Poll

get_job_status

until

status

"completed"

, then read

result

{ job_id } = get_design_tokens({ url })
{ result } = get_job_status({ job_id })   // repeat until status === "completed"

Run these in sequence (each extraction launches a browser):

get_design_tokens, get_color_palette, get_typography, get_component_styles, get_spacing

If Dembrandt MCP is not available, run CLI:

bash

npx dembrandt <url> --design-md --crawl 3

If DESIGN.md already exists: parse it directly — skip extraction.

如果提供URL且Dembrandt MCP可用：

所有MCP提取工具均为异步——它们会立即返回

job_id

。轮询

get_job_status

直到

status

为

"completed"

，然后读取

result

。

{ job_id } = get_design_tokens({ url })
{ result } = get_job_status({ job_id })   // 重复此操作直到status === "completed"

按顺序运行以下提取工具（每个提取操作会启动一个浏览器）：

get_design_tokens, get_color_palette, get_typography, get_component_styles, get_spacing

如果Dembrandt MCP不可用，运行CLI命令：

bash

npx dembrandt <url> --design-md --crawl 3

如果DESIGN.md已存在： 直接解析——跳过提取步骤。

Step 2 — Normalize Tokens

步骤2 — 规范化令牌

Do not use raw extracted values directly. Map them to a semantic system first.

请勿直接使用原始提取值。先将它们映射到语义系统中。

Colours

颜色

Identify the role of each extracted colour:

Role	Token	How to identify
`color-primary`	Main brand colour	Used on primary buttons, links, key interactive elements
`color-secondary`	Supporting brand colour	Used on secondary actions, accents
`color-surface`	Background	Page or card background
`color-surface-raised`	Elevated surface	Cards, panels, modals
`color-border`	Border / divider	Input borders, separators
`color-text`	Primary text	Body copy
`color-text-secondary`	Secondary text	Labels, metadata, captions
`color-error`	Error state	Red — do not assign to any other role
`color-warning`	Warning state	Orange/amber — do not assign to any other role
`color-success`	Success state	Green — do not assign to any other role

Decision rule: if the extracted palette has more than 2 brand colours competing for

color-primary

, pick the one with highest usage on interactive elements.

识别每种提取颜色的角色：

角色	令牌	识别方法
`color-primary`	主品牌色	用于主按钮、链接、关键交互元素
`color-secondary`	辅助品牌色	用于次要操作、强调元素
`color-surface`	背景色	页面或卡片背景
`color-surface-raised`	高抬表面色	卡片、面板、模态框
`color-border`	边框/分割线色	输入框边框、分隔线
`color-text`	主文本色	正文内容
`color-text-secondary`	次要文本色	标签、元数据、说明文字
`color-error`	错误状态色	红色——不得分配给其他任何角色
`color-warning`	警告状态色	橙色/琥珀色——不得分配给其他任何角色
`color-success`	成功状态色	绿色——不得分配给其他任何角色

决策规则： 如果提取的调色板中有超过2种品牌色竞争

color-primary

角色，选择在交互元素上使用频率最高的颜色。

Typography

排版

Map extracted sizes to a scale. Verify ratio coherence — if sizes do not follow a consistent ratio, round them to the nearest modular scale step (base 16px, ratio 1.25 recommended).

Token	Min size	Role
`text-base`	16px	Body copy — never below 16px
`text-sm`	14px	Labels, captions — use sparingly
`text-lg`	20px	Lead paragraph
`text-h4`	25px	Section subheading
`text-h3`	31px	Section heading
`text-h2`	39px	Page subheading
`text-h1`	49px	Page heading
`text-display`	61px	Hero / landing only

Decision rule: if extracted body text is below 16px, override to 16px.

将提取的尺寸映射到一个比例体系中。验证比例一致性——如果尺寸不符合统一比例，将其四舍五入到最近的模块化比例步骤（推荐基准16px，比例1.25）。

令牌	最小尺寸	角色
`text-base`	16px	正文内容——不得小于16px
`text-sm`	14px	标签、说明文字——谨慎使用
`text-lg`	20px	引导段落
`text-h4`	25px	小节副标题
`text-h3`	31px	小节标题
`text-h2`	39px	页面副标题
`text-h1`	49px	页面标题
`text-display`	61px	仅用于Hero/着陆页

决策规则： 如果提取的正文文本小于16px，覆盖为16px。

Spacing

间距

Identify the base spacing unit from the most common small margin/padding value. Derive a scale:

base = extracted smallest recurring value (usually 4px or 8px)
scale = base × 1, 2, 3, 4, 6, 8, 12, 16

从最常见的小边距/内边距值中识别基准间距单位。推导比例体系：

base = 提取的最小重复值（通常为4px或8px）
scale = base × 1, 2, 3, 4, 6, 8, 12, 16

Border Radius

边框圆角

Extract the most common radius value used on interactive elements (buttons, inputs). This becomes

--radius-button

— applied uniformly to all buttons regardless of variant.

提取交互元素（按钮、输入框）上最常用的圆角值。该值将作为

--radius-button

——统一应用于所有按钮，无论变体如何。

Step 3 — Apply UX Decisions

步骤3 — 应用UX决策

With normalized tokens, make the following decisions explicitly. Do not leave these open:

基于规范化后的令牌，明确做出以下决策，不得留空：

Visual Hierarchy

视觉层级

Identify the single primary action for the UI being built
Assign
```
color-primary
```
to that action only
All other actions use neutral or outlined styles
Apply
```
cursor: pointer
```
to all interactive elements

确定正在构建的UI中的唯一主操作
仅为该操作分配
```
color-primary
```
所有其他操作使用中性或轮廓样式
为所有交互元素添加
```
cursor: pointer
```

Gestalt Grouping

格式塔分组

Define spacing between related elements (tight:
```
space-2
```
) and between groups (loose:
```
space-6
```
or
```
space-8
```
)
Confirm that related controls will be co-located in the layout

定义相关元素之间的间距（紧凑：
```
space-2
```
）和组之间的间距（宽松：
```
space-6
```
或
```
space-8
```
）
确认相关控件将在布局中放置在一起

Accessibility (WCAG 2.2 AA)

可访问性（WCAG 2.2 AA）

Run contrast check on normalized tokens:

```
color-text
```
on
```
color-surface
```
: must be ≥ 4.5:1
```
color-text-secondary
```
on
```
color-surface
```
: must be ≥ 4.5:1
```
color-primary
```
on white/surface (button label): must be ≥ 4.5:1

If any fail, darken or lighten the token to meet the threshold. Document the adjustment.

对规范化后的令牌进行对比度检查：

```
color-text
```
在
```
color-surface
```
上：对比度必须≥4.5:1
```
color-text-secondary
```
在
```
color-surface
```
上：对比度必须≥4.5:1
```
color-primary
```
在白色/表面（按钮标签）上：对比度必须≥4.5:1

如果任何一项不达标，加深或减浅令牌颜色以满足阈值，并记录调整内容。

Error / Status Colours

错误/状态颜色

Confirm
```
color-error
```
is red and used only for errors
Confirm
```
color-warning
```
is orange/amber and used only for warnings
If the brand uses orange as a primary colour, it cannot double as a warning — a distinct amber must be defined for warning states

确认
```
color-error
```
为红色且仅用于错误状态
确认
```
color-warning
```
为橙色/琥珀色且仅用于警告状态
如果品牌将橙色作为主色调，则不能同时用作警告色——必须定义一个独特的琥珀色作为警告状态色

Step 4 — Output UI Spec

步骤4 — 输出UI规范

Produce a concrete, copy-pasteable output. Choose the format that fits the request:

生成具体的、可直接复制粘贴的输出。根据需求选择格式：

Design Token File (CSS)

设计令牌文件（CSS）

css

:root {
  /* Colours */
  --color-primary:          <value>;
  --color-secondary:        <value>;
  --color-surface:          <value>;
  --color-surface-raised:   <value>;
  --color-border:           <value>;
  --color-text:             <value>;
  --color-text-secondary:   <value>;
  --color-error:            <value>;
  --color-warning:          <value>;
  --color-success:          <value>;

  /* Typography */
  --font-sans:    <extracted font family>;
  --text-base:    1rem;
  --text-sm:      0.875rem;
  --text-lg:      1.25rem;
  --text-h4:      1.563rem;
  --text-h3:      1.938rem;
  --text-h2:      2.438rem;
  --text-h1:      3.063rem;

  /* Spacing */
  --space-1:  <base>px;
  --space-2:  <base×2>px;
  --space-4:  <base×4>px;
  --space-6:  <base×6>px;
  --space-8:  <base×8>px;

  /* Borders */
  --radius-button:  <extracted>px;
  --radius-card:    <extracted or radius-button + 2>px;

  /* Elevation */
  --shadow-card:   0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);
  --shadow-modal:  0 10px 15px rgba(0,0,0,.08), 0 4px 6px rgba(0,0,0,.05);
}

css

:root {
  /* Colours */
  --color-primary:          <value>;
  --color-secondary:        <value>;
  --color-surface:          <value>;
  --color-surface-raised:   <value>;
  --color-border:           <value>;
  --color-text:             <value>;
  --color-text-secondary:   <value>;
  --color-error:            <value>;
  --color-warning:          <value>;
  --color-success:          <value>;

  /* Typography */
  --font-sans:    <extracted font family>;
  --text-base:    1rem;
  --text-sm:      0.875rem;
  --text-lg:      1.25rem;
  --text-h4:      1.563rem;
  --text-h3:      1.938rem;
  --text-h2:      2.438rem;
  --text-h1:      3.063rem;

  /* Spacing */
  --space-1:  <base>px;
  --space-2:  <base×2>px;
  --space-4:  <base×4>px;
  --space-6:  <base×6>px;
  --space-8:  <base×8>px;

  /* Borders */
  --radius-button:  <extracted>px;
  --radius-card:    <extracted or radius-button + 2>px;

  /* Elevation */
  --shadow-card:   0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);
  --shadow-modal:  0 10px 15px rgba(0,0,0,.08), 0 4px 6px rgba(0,0,0,.05);
}

UX Audit (if auditing an existing UI)

UX审计报告（如果审计现有UI）

CONTRAST ISSUES
  - color-text-secondary on color-surface: X.X:1 (required 4.5:1) → fix: darken to #...

HIERARCHY ISSUES
  - 3 primary buttons on same screen → reduce to 1 primary, 2 secondary

CONSISTENCY ISSUES
  - Button radius varies (4px, 8px, 12px) → standardize to --radius-button: 8px

MISSING STATES
  - No disabled state defined for inputs
  - No error state for form fields

FONT SIZE VIOLATIONS
  - Caption text at 12px → minimum 14px

对比度问题
  - color-text-secondary在color-surface上：X.X:1（要求4.5:1）→ 修复方案：加深至#...

层级问题
  - 同一屏幕上有3个主按钮→ 减少为1个主按钮，2个次要按钮

一致性问题
  - 按钮圆角不一致（4px、8px、12px）→ 标准化为--radius-button: 8px

缺失状态定义
  - 未定义输入框的禁用状态
  - 未定义表单字段的错误状态

字体大小违规
  - 说明文字为12px→ 最小需为14px

Component Structure (if generating a layout)

组件结构（如果生成布局）

Page layout:
  Header (fixed, 56px)
    Logo | Nav | [Global controls: small type]
  
  Main
    Hero section
      H1 (display scale) + lead text + primary CTA (color-primary, full)
    
    Feature grid (3-col)
      Card (shadow-card, radius-card) × 3
        Icon + H4 + body text
    
  Footer
    Links (text-sm, color-text-secondary)
    Language/currency selector (text-sm)

Primary action: CTA button in hero
Secondary actions: nav links, card CTAs (outlined)
Error states: inline, adjacent to field, red text + icon

页面布局：
  页眉（固定，56px）
    Logo | 导航 | [全局控件：小字体]
  
  主内容区
    Hero板块
      H1（展示级字号）+ 引导文本 + 主CTA按钮（color-primary，全宽）
    
    功能网格（3列）
      卡片（shadow-card，radius-card）×3
        图标 + H4 + 正文文本
    
  页脚
    链接（text-sm，color-text-secondary）
    语言/货币选择器（text-sm）

主操作：Hero板块中的CTA按钮
次要操作：导航链接、卡片CTA（轮廓样式）
错误状态：内联显示，紧邻字段，红色文本+图标

Running This Across Many Brands (Token Architecture & Governance)

跨多个品牌运行此流程（令牌架构与治理）

Building several brands from one pipeline, don't treat each as a fresh start. One system, many skins: every brand generates from the same semantic tokens; only primitives (colour, type, radius) change per brand. A fix propagates everywhere.

Consolidate periodically — token systems drift. Across many brands and over time, tokens fork, one-off values creep in, and the systems diverge. Schedule a recurring consolidation pass:

Re-extract and compare the live sites (use Dembrandt's extract + drift/compute-drift tooling, plus plain visual inspection and benchmarking against each other and against current design trends and best practice).
Fold divergences back into the shared semantic layer where they should be common; keep genuinely brand-specific values as primitive overrides only.
Feed in a point of view. Consolidation isn't just mechanical de-duplication — bring UX / visual-design opinion and a clear direction for where each product should go, not just where it is.

When design eras conflict, recency is the tiebreaker. A product built over years carries pages from different design generations. The newest pages and components are the best available evidence of current design intent — migrate old toward new; never average the eras into a compromise style. Recency is a default, not a verdict: the newest surface can be an unreviewed one-off. Confirm with the user before promoting a style to canonical or marking an old one deprecated.

Deprecate on touch, not big-bang. Keep a short list of deprecated styles — the old radius, the old shadow, the retired button variant. When work already touches an old-generation page, lift it to the current style in the same pass. Every touch moves the product one page closer to one system, with no rewrite project on the roadmap.

Two or three occurrences make a pattern. When the same visual treatment appears independently in 2–3 places, it is no longer a coincidence — name it, tokenise it, and make it available everywhere. Promoting it is cheaper than a fourth hand-rolled copy. Once promoted, the pattern belongs to the design language: new components may use it as-is or adapt it, as long as the adaptation stays recognisably true to the original.

Track feature usage and deprecate the dead weight. The same discipline applies to features, not just tokens: instrument what actually gets used, and deprecate the features/components with little real usage rather than maintaining them forever. A shared system stays healthy only if it's pruned — every unused component is drift waiting to happen and a cost on every future change.

通过一个流水线构建多个品牌时，不要将每个品牌视为全新项目。采用一套系统，多套皮肤：每个品牌都从相同的语义令牌生成；仅原色（颜色、字体、圆角）因品牌而异。一处修复可同步应用到所有品牌。

定期整合——令牌系统会逐渐偏离。 随着时间推移，多个品牌的令牌会分叉，出现一次性值，系统逐渐分化。安排定期整合流程：

重新提取并对比实时站点（使用Dembrandt的提取+偏离计算工具，再结合直观视觉检查，并与彼此及当前设计趋势和最佳实践进行基准对比）。
将差异合并到共享语义层中（应通用的部分）；仅将真正品牌特有的值保留为原始覆盖项。
注入明确观点。整合不只是机械去重——要融入UX/视觉设计理念，明确每个产品的发展方向，而非仅停留在当前状态。

当设计时代冲突时，以最新版本为优先。 一个历经多年开发的产品会包含不同设计时代的页面。最新的页面和组件是当前设计意图的最佳体现——将旧页面迁移至新风格；切勿将不同时代的风格平均成折中方案。最新版本是默认选择，但并非最终结论：最新的界面可能是未经审核的一次性内容。在将某一风格提升为标准或标记旧风格为弃用前，需与用户确认。

按需弃用，而非一次性大整改。 保留一份简短的弃用风格列表——旧圆角、旧阴影、已淘汰的按钮变体。当修改涉及旧时代页面时，同步将其升级为当前风格。每次修改都让产品向统一系统迈进一步，无需制定重写项目计划。

出现2-3次即形成模式。 当同一视觉处理方式独立出现在2-3个地方时，不再是巧合——为其命名、生成令牌，并推广至所有场景。推广该模式比第四次手动实现更划算。推广后，该模式属于设计语言：新组件可直接使用或调整，只要调整后仍能识别出与原始模式的关联性。

跟踪功能使用情况，弃用无用功能。 这种原则同样适用于功能，而非仅令牌：统计实际使用的功能，弃用使用量极少的功能/组件，而非永久维护。只有不断精简，共享系统才能保持健康——每个未使用的组件都是潜在的偏离源，会增加未来所有变更的成本。

Audit Checklist Before Handoff

交付前的审计检查清单

All tokens named semantically, not by value (
```
color-primary
```
not
```
color-blue-600
```
)
Body text ≥ 16px everywhere
Contrast ratios verified for all text/background combinations
One primary button per view
All buttons share
```
--radius-button
```
```
cursor: pointer
```
on all interactive elements
Error colour reserved exclusively for errors
Warning colour (orange) reserved exclusively for warnings
Spacing derived from a single base unit

所有令牌均按语义命名，而非按值命名（如
```
color-primary
```
而非
```
color-blue-600
```
）
所有正文文本≥16px
已验证所有文本/背景组合的对比度
每个视图仅保留一个主按钮
所有按钮共享
```
--radius-button
```
所有交互元素均添加
```
cursor: pointer
```
错误色仅用于错误状态
警告色（橙色）仅用于警告状态
间距源自单一基准单位