技能介绍

在多端设计交付中，最常见的问题不是缺少风格参考，而是缺乏一套可执行的视觉协议。团队常为网页、幻灯片和文档分别制定规范，导致 typography 层级、CSS variables 与实际品牌色逐渐发散；同时，部分 AI 生成界面陷入通用审美，例如滥用 Inter、Roboto 等字体或紫色渐变，削弱品牌辨识度。

@user_fccf428b/brand-visual-generator-guide 的作用是把视觉规则整理成工程师可直接落地的规范。使用前，它会先检查 .cursor/project-context.md 等项目上下文，读取第 12 节“Visual Identity”，以判断当前是新品牌、存量审计还是组件设计。随后输出核心内容：

Typography：提供双字体系统建议，区分 display 标题与正文，并给出响应式字号层级。
Color Palette：输出 HEX、RGB、CMYK 表示，明确主色、辅助色、背景、文本与 CTA 色，并补充 WCAG 对比度阈值。
Spacing & Logo：定义外边距、基础间距步长、Logo 安全区、最小尺寸及明暗背景变体。
Non-Web Assets：当目标是 deck 或 document 时，可映射演示文稿主题色、母版字体和图表取色顺序，使 PowerPoint、PDF 报告与网页共用同一套 Token。

需要注意的是，该技能负责视觉执行层，不输出品牌战略。它默认不会自动安装依赖、修改系统权限、创建持久化任务或执行外部下载；命令和代码仅作参考，只有目标范围清楚且取得明确确认时才可运行。涉及外发权利动作时，应先展示影响范围再执行。它的价值在于用最小干预把品牌一致性固化到设计 Token、代码变量和幻灯片母版之间，而不是重新生成一套凭空的风格。