generate-ui-from-brand

generate-ui-from-brand

类型： 流水线 / 编排器
输入： URL 或现有的 DESIGN.md
输出： 已明确决策、可执行的 UI 规范

---

步骤 1 — 提取

如果提供了 URL，且 Dembrandt MCP 可用：

所有 MCP 提取工具都是异步的 — 它们会立即返回 job_id。轮询 get_job_status，直到 status 为 "completed"，然后读取 result。

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

按顺序运行以下命令（每次提取都会启动一个浏览器）：

get_design_tokens, get_color_palette, get_typography, get_component_styles, get_spacing

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

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

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

---

步骤 2 — 规范化令牌

不要直接使用提取的原始值。先将它们映射到语义系统。

颜色

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

角色	令牌	识别方法
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，选择在交互元素上使用最多的一种。

字体排印

将提取的字号映射到一个级别。检查比例是否协调 — 如果字号不遵循一致的比例，将其四舍五入到最接近的模块化级别（基准为 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	仅用于主视觉区 / 落地页

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

间距

根据最常见的小边距 / 内边距值，确定基础间距单位。由此推导一个级别：

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

边框圆角

提取交互元素（按钮、输入框）上最常用的圆角值。该值将设为 --radius-button，并统一应用于所有按钮，不论其变体如何。

---

步骤 3 — 应用 UX 决策

使用规范化后的令牌，明确做出以下决策。不要将这些事项留作待定：

视觉层级

• 确定所构建 UI 的唯一主要操作
• 仅将 color-primary 分配给该操作
• 所有其他操作使用中性或描边样式
• 为所有交互元素应用 cursor: pointer

格式塔分组

• 定义相关元素之间的间距（紧凑：space-2），以及组与组之间的间距（宽松：space-6 或 space-8）
• 确认相关控件将在布局中彼此靠近

无障碍（WCAG 2.2 AA）

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

• color-text 在 color-surface 上：必须 ≥ 4.5:1
• color-text-secondary 在 color-surface 上：必须 ≥ 4.5:1
• 白色 / 表面背景上的 color-primary（按钮标签）：必须 ≥ 4.5:1

如果有任何一项不达标，应加深或调浅令牌颜色以达到阈值。记录调整情况。

错误 / 状态颜色

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

---

步骤 4 — 输出 UI 规范

生成具体、可直接复制粘贴的内容。选择适合请求的格式：

设计令牌文件（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 审核（审核现有 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

组件结构（生成布局时）

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

---

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

通过一个流水线构建多个品牌时，不要把每个品牌都当作全新项目。**一个系统，多种外观：**每个品牌都基于同一套语义令牌生成；每个品牌只改变基础令牌（颜色、字体、圆角）。一处修复，处处生效。

**定期整合——令牌系统会逐渐偏离。**随着品牌增多、时间推移，令牌会分叉，临时值会不断增加，各个系统也会逐渐分化。请安排定期整合：

• 重新提取并比较线上网站（使用 Dembrandt 的提取与 drift/compute-drift 工具，同时进行直观检查，并相互对比、对照当前设计趋势与最佳实践）。
• 将差异纳入共享语义层，统一本应共用的内容；真正具有品牌特色的值则仅保留为基础令牌覆盖值。
• **融入明确的设计观点。**整合不只是机械地去重——还要加入 UX / 视觉设计方面的判断，并明确各产品未来的发展方向，而不只是沿袭现状。

**设计时期冲突时，以较新的设计为准。**经过多年开发的产品会包含不同设计世代的页面。最新的页面和组件最能体现当前设计意图——将旧设计迁移为新设计；绝不要将不同世代折中平均成一种妥协风格。较新设计只是默认依据，并非最终结论：最新的界面也可能是未经审核的个例。将某种风格定为规范，或将旧风格标记为弃用前，请先与用户确认。

**在改动时弃用，而非一次性全面替换。**维护一份简短的弃用样式列表——旧圆角、旧阴影、已淘汰的按钮变体。当工作涉及旧世代页面时，在同一轮改动中将其升级为当前样式。每次改动都让产品更接近统一的系统，无需将重写项目列入路线图。

**出现两三次，就形成一种模式。**当相同的视觉处理独立出现在 2–3 个地方时，它就不再是巧合——为其命名，将其令牌化，并让它在各处都可用。将其提升为通用模式，比再手工复制一次更省力。提升后，该模式便属于设计语言：新组件可以直接使用或加以调整，只要调整后的效果仍明显忠于原始模式。

跟踪功能使用情况，弃用不再需要的内容。同样的原则也适用于功能，而不只是令牌：为实际使用情况添加埋点，并弃用实际使用率很低的功能 / 组件，不要永远维护它们。只有持续精简，共享系统才能保持健康——每个未使用的组件都是未来可能产生偏差的隐患，也会增加每次后续改动的成本。

---

移交前审核清单

• 所有令牌都使用语义名称，而非按值命名（color-primary，而非 color-blue-600）
• 所有正文文本均 ≥ 16px
• 已验证所有文本 / 背景组合的对比度
• 每个视图只有一个主要按钮
• 所有按钮共用 --radius-button
• 所有交互元素都设置了 cursor: pointer
• 错误颜色仅用于错误
• 警告颜色（橙色）仅用于警告
• 间距均由统一的基础单位推导而来