从品牌网址或 DESIGN.md 生成可落地 UI…

当你需要为已有品牌从零构建 UI、审计设计系统或重构视觉不一致时，用一条流水线把 URL/DESIGN.md 变成已做决策的 UI 规范。

适用场景

解决思路

1. 若提供 URL 且 Dembrandt MCP 可用：所有 MCP 提取工具都是异步的，会立即返回 job_id；轮询 get_job_status 直到 status 为 "completed"，再读取 result。
2. 按顺序运行提取工具（每次提取都会启动浏览器）：get_design_tokens、get_color_palette、get_typography、get_component_styles、get_spacing。
3. 若 Dembrandt MCP 不可用，运行 CLI：npx dembrandt <url> --design-md --crawl 3。
4. 若 DESIGN.md 已存在：直接解析，跳过提取。
5. 不要直接使用原始提取值，先把颜色映射到语义系统：color-primary（主品牌色，用于主按钮、链接、关键交互元素）、color-secondary（辅助品牌色，用于次要操作、强调）、color-surface（页面或卡片背景）、color-surface-raised（卡片、面板、模态等抬升表面）、color-border（输入框边框、分隔线）、color-text（正文）、color-text-secondary（标签、元数据、说明文字）、color-error（红色，仅用于错误）、color-warning（橙/琥珀色，仅用于警告）、color-success（绿色，仅用于成功）。
6. 颜色决策规则：若提取的调色板中有超过 2 个品牌色竞争 color-primary，选择在交互元素上使用频率最高的那个。
7. 把提取的字号映射到比例尺，并验证比例一致性；若字号不遵循一致比例，四舍五入到最近的模块化比例尺步进（推荐 base 16px、ratio 1.25）。
8. 字号令牌：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（仅英雄区/落地页）。
9. 字号决策规则：若提取的正文小于 16px，强制覆盖为 16px。
10. 间距：从最常见的小 margin/padding 值识别基础间距单位，推导比例尺：base = 提取到的最小重复值（通常 4px 或 8px），scale = base × 1、2、3、4、6、8、12、16。
11. 圆角：提取交互元素（按钮、输入框）上最常见的圆角值，作为 --radius-button，统一应用到所有按钮变体，不论变体如何。
12. 视觉层级：识别当前 UI 的唯一主操作，只给该操作分配 color-primary；其他操作使用中性或描边样式；给所有交互元素加 cursor: pointer。
13. 格式塔分组：定义相关元素之间的间距（紧密：space-2）与组之间的间距（宽松：space-6 或 space-8）；确认相关控件在布局中会被放在一起。
14. 无障碍（WCAG 2.2 AA）：对归一化令牌跑对比度检查——color-text 在 color-surface 上 ≥ 4.5:1；color-text-secondary 在 color-surface 上 ≥ 4.5:1；color-primary 在白色/表面色上（按钮文字）≥ 4.5:1；若任一不达标，加深或调亮该令牌以满足阈值，并记录调整。
15. 错误/状态色：确认 color-error 是红色且只用于错误；确认 color-warning 是橙/琥珀色且只用于警告；若品牌把橙色用作主色，它不能同时充当警告色，必须为警告状态定义独立的琥珀色。
16. 输出可直接复制粘贴的设计令牌文件（CSS）：在 :root 中定义颜色（--color-primary、--color-secondary、--color-surface、--color-surface-raised、--color-border、--color-text、--color-text-secondary、--color-error、--color-warning、--color-success）、字体（--font-sans 为提取的字体族，--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）、间距（--space-1 为 base px、--space-2 为 base×2、--space-4 为 base×4、--space-6 为 base×6、--space-8 为 base×8）、边框（--radius-button 为提取值、--radius-card 为提取值或 radius-button + 2）、阴影（--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)）。
17. 若审计现有 UI，输出 UX 审计：对比度问题（如 color-text-secondary on color-surface: X.X:1，要求 4.5:1 → 修复：加深到 #...）、层级问题（如同一屏幕 3 个主按钮 → 减为 1 主 2 次）、一致性问题（如按钮圆角有 4px、8px、12px → 统一为 --radius-button: 8px）、缺失状态（如输入框未定义禁用态、表单字段无错误态）、字号违规（如说明文字 12px → 最小 14px）。
18. 若生成布局，输出组件结构：页面布局含 Header（固定，56px；Logo | Nav | 全局控件：小字号）、Main（Hero 区：H1 展示级 + 引导文字 + 主 CTA（color-primary，全宽）；功能网格 3 列：Card（shadow-card、radius-card）× 3，含 Icon + H4 + 正文）、Footer（链接：text-sm、color-text-secondary；语言/货币选择器：text-sm）；主操作：Hero 中的 CTA 按钮；次操作：导航链接、卡片 CTA（描边）；错误状态：内联、紧邻字段、红字 + 图标。
19. 跨多品牌运行时采用「一个系统、多种皮肤」：每个品牌都从同一套语义令牌生成，只有原始值（颜色、字体、圆角）按品牌变化，一处修复可传播到所有品牌。
20. 定期整合——令牌系统会漂移：跨多品牌、随时间推移，令牌会分叉、一次性值会渗入、系统会发散；安排周期性整合：重新提取并对比线上站点（用 Dembrandt 的 extract + drift/compute-drift 工具，加上人工视觉检查，并与彼此、与当前设计趋势和最佳实践做基准对比）；把分歧折回共享语义层（若本应通用），真正品牌特有的值只保留为原始值覆盖；整合不只是机械去重，要带入 UX/视觉设计观点和每个产品应走向何处的明确方向。
21. 当设计时代冲突时，以新近度为裁决标准：产品多年构建会带有不同设计代际的页面；最新页面和组件是当前设计意图的最佳证据——把旧的迁移向新的，绝不要把各代际平均成折中风格；新近度是默认值而非最终判决，最新表面可能是一次未经评审的一次性产物；在把某风格提升为规范或标记旧风格为废弃前，先与用户确认。
22. 按接触废弃，而非大爆炸式重写：维护一份简短的废弃样式清单——旧圆角、旧阴影、已退役的按钮变体；当工作已经触及旧代际页面时，在同一次改动中把它提升到当前风格；每次接触都让产品离单一系统更近一页，无需在路线图上安排重写项目。
23. 出现两三次即成模式：当同一视觉处理独立出现在 2–3 处时，它不再是巧合——命名它、令牌化它，并在所有地方可用；提升它比第四次手写副本更便宜；一旦提升，该模式属于设计语言：新组件可按原样使用或改编，只要改编仍可识别地忠于原版。
24. 跟踪功能使用情况并废弃死重：同样的纪律也适用于功能，不只是令牌——对实际被使用的内容做埋点，废弃真实使用量很少的功能/组件，而不是永远维护它们；共享系统只有被修剪才能保持健康——每个未使用的组件都是等待发生的漂移，也是未来每次变更的成本。
25. 交接前审计清单：所有令牌按语义命名而非按值命名（color-primary 而非 color-blue-600）；正文处处 ≥ 16px；所有文字/背景组合的对比度已验证；每个视图只有一个主按钮；所有按钮共享 --radius-button；所有交互元素有 cursor: pointer；错误色专用于错误；警告色（橙色）专用于警告；间距源自单一基础单位。

适用边界 · 注意事项

• 没有 Dembrandt MCP 或 CLI 且没有现成 DESIGN.md 时，无法完成提取步骤。
• 需要付费账号或特定云厂商/产品能力时，本技能依赖 dembrandt>=0.23.1，属于特定工具依赖。