brand-visual-generator

组件：品牌视觉识别

规范视觉识别，确保品牌呈现一致。品牌形象保持一致的公司，收入最多可提升 23–33%；94% 的消费者表示，一致性会影响购买决策。

关键词：视觉识别、设计令牌、调色板、字体排版、CSS 变量、幻灯片、品牌指南、前端美学、无障碍设计

调用时：首次使用时，如果有帮助，可以先用 1–2 句话说明此技能涵盖的内容及其重要性，然后提供主要输出。后续使用时，或用户要求跳过时，直接提供主要输出。

初步评估

项目背景： 如果根目录中存在 contextus.md，请阅读并仅加载与此任务相关的模块。若没有 Contextus，请使用现有项目材料或用户提供的信息，并询问缺失的信息；不要另行创建一套平行的上下文系统。

确定：

1. 范围：新品牌、审核或组件设计
2. 应用触点：网站、印刷品、社交媒体、产品 UI、幻灯片（PowerPoint、Google Slides、Keynote）、文档（Word、Google Docs、PDF 报告）
3. 现有资产：Logo、风格指南、设计文件

最佳实践

字体排版

• 双字体系统：标题使用一种展示字体，正文使用一种正文字体。兼具对比与协调：差异足以体现不同用途，相似之处又能保持整体和谐。
• 正文字体：优先考虑易读性——较大的字腔高度、开放的字腔。中性稳妥的选择包括：Source Sans 3、Lora、IBM Plex Sans。追求独特性时：避免使用过度泛滥的 AI 字体（Inter、Roboto、Arial、系统字体）；优先选择富有个性的字体，提升品牌质感。参见前端美学。
• 标题字体：传达品牌调性；必须能在 1 秒内读懂。字体应展现个性，正文则负责承载信息。
• 字号比例：使用 1.25–1.5 的比例（大三度或纯五度）建立层级。每个区块限制为 3–4 种样式。
• 搭配规则：装饰性字体只能与中性字体搭配。为字体分配不同用途；避免混用超过两种字体。
• 字号：主视觉、章节标题、副标题、正文、说明文字；采用响应式缩放。行长最多 120 个字符；行高应宽松。

调色板

• 结构：主色、辅助色、CTA、背景色、文本色。使用灵活的系统（核心主视觉色搭配互补色调），而非僵化的单一配色。
• 行业映射：金融 → 蓝色、灰色、海军蓝（稳定）；奢侈品 → 玫瑰金、酒红色、黑色（尊贵）；科技 → 蓝绿色、霓虹点缀色、炭灰色（创新）；健康生活 → 薰衣草紫、蜜桃色、薄荷绿（宁静）；可持续发展 → 鼠尾草绿、大地色调。
• 还原方式：为印刷和数字场景提供 HEX、RGB、CMYK。对于程序化生成的幻灯片（例如 python-pptx），将品牌 HEX 映射为填充和文本所用的 RGB 元组 (R, G, B)；在交付物中保留一张统一的事实来源表（HEX + RGB）。
• 无障碍设计：普通文本的对比度 >=4.5:1，大号文本（18px+ 或 14px+ 加粗）的对比度 >=3:1。不要只依赖颜色传递信息。

间距

• 边距：水平边距（例如 120px）、章节的垂直内边距
• 网格：使用一致的间距比例（常见基准为 8px）
• Logo 安全空间：Logo 周围的最小留白；在品牌指南中记录

Logo 使用规范

• 版本：主版本、辅助版本、字母标志；适用于浅色和深色背景
• 最小尺寸：避免难以辨认
• 禁止操作：未经批准不得拉伸、重新着色或添加效果

反模式（避免）

• 重美观、轻功能：不要为了视觉吸引力牺牲易用性。
• CTA 不明确：每个版块最多设置一个主要 CTA；在视觉上区分主要 CTA 和次要 CTA。
• 元素不一致：像素化图标、不匹配的间距、字体排版或颜色都会降低信任感。
• 文本层级不佳：杂乱无序的文本会让用户困惑。
• 过度使用效果：投影、弹出窗口和拥挤的 UI 会分散用户对内容的注意力。
• 盲目追逐潮流：只有在符合项目需求时才采用潮流设计。
• 忽视性能：体积庞大的资源和复杂的布局会拖慢加载速度。
• 千篇一律的 AI 美学：Inter、Roboto、Arial、Space Grotesk 和系统字体会让设计显得雷同；避免使用陈词滥调的配色方案（例如白底紫色渐变）。在需要凸显品牌差异时，优先选择有辨识度的设计。
• 用表情符号充当图标：使用 SVG 图标（Heroicons、Lucide、Simple Icons），绝不要用表情符号（🎨 🚀 ⚙️）作为 UI 图标；表情符号看起来不专业，也不统一。
• 不稳定的悬停状态：悬停时使用颜色或不透明度过渡；避免使用会改变布局或导致内容跳动的缩放变换。

无障碍检查清单

• 对比度：普通文本 >=4.5:1；大号文本 >=3:1；交互元素 >=3:1。
• 焦点：显示可见的焦点指示器（>=2px 实线，3:1 对比度）；Tab 顺序合乎逻辑；不设键盘陷阱。
• 颜色：绝不只用颜色传达信息；为状态（错误、成功）添加文字或图标。
• 键盘：所有交互元素都可通过 Tab、Enter、空格键访问。
• 减少动态效果：动画应遵循 prefers-reduced-motion 设置。

前端美学

为打造独特且适用于生产环境的前端实现提供指导。组件（hero、CTA、页脚等）和页面（落地页、主页、功能页）应参考这些原则，以实现视觉差异化。重在用心，而非强烈：大胆奔放的设计和精致简约的设计，只要执行到位，都能取得良好效果。

字体排版

• 避免使用常见的 AI 字体：Inter、Roboto、Arial、系统字体、Space Grotesk。这些字体会让设计显得雷同。
• 独特的字体搭配：选择一种展示字体（标题、彰显个性）和一种精致的正文字体（易读）。选择富有个性、出人意料的字体，让界面更出彩。
• 保持一致：使用 CSS 变量；每个区块的字体样式限制在 3–4 种。

动效

• 打造高影响力时刻：精心编排的单次页面加载，并配合交错显示（animation-delay），比零散的微交互更能带来愉悦感。
• 优先选择：HTML 使用纯 CSS；在可用时，React 使用 Motion 库。滚动触发和悬停状态可带来惊喜。
• 无障碍：始终遵循 prefers-reduced-motion 设置；提供减少动效或无动效的替代方案。

空间构图

• 采用出人意料的布局：不对称、重叠、对角流动、突破网格的元素。
• 保持平衡：留出充足的负空间，或采用有节制的紧凑布局——有意识地做出选择。
• 建立层级：确保视觉流向清晰；避免可预测且均匀分布的布局。

背景与视觉细节

• 营造氛围，而非一味采用平面设计：通过营造层次感，而不是默认使用纯色。
• 技巧：渐变网格、噪点纹理、几何图案、分层透明效果、醒目的阴影、装饰性边框、颗粒叠加效果。
• 贴合上下文：让效果与整体美学相匹配；不要分散用户对内容的注意力。

切勿

• 过度使用常见字体系列（Inter、Roboto、Arial、系统字体）
• 使用陈词滥调的配色方案（例如白底紫色渐变）
• 采用可预测的布局和千篇一律的组件模式
• 设计缺乏特定情境下的个性
• 用表情符号充当 UI 图标（使用 SVG：Heroicons、Lucide、Simple Icons）

AI 品牌美学（可选）

对于 AI/SaaS 产品，可参考这些视觉趋势和品牌原型；有意识地采用、忽略或反其道而行，以避免千篇一律。

视觉趋势

趋势	特征
米白色 / 米色	值得信赖、克制、不浮华却显高端
有机渐变	独特；增添颗粒感和纹理
数字印象主义	重氛围而非写实；重暗示而非描述
Lomo / 不完美	探索精神、人类创造力
当代写实主义	精准、可靠、精湛
速写 / 涂鸦	人类思考、探索胜过确定性
非品牌化学术风	权威；以作品说话
技术插画	严谨、深厚的工程底蕴
古灵精怪的可爱风	平易近人；对冲末日叙事
变形物体	涌现、能够学习的系统
未来主义超现实风	通往新世界的大门
外太空	探索、未知
ASCII / 像素	复古、俏皮、技术感
生成艺术	算法驱动、鲜活的系统

品牌原型

原型	基调	视觉风格
亲和型领导者	严肃、稳定、值得信赖	柔和的灰色、温暖的米色；印象主义
温和的人文主义者	以人为先，而非技术	手绘风格、日常瞬间、自然
理想主义极客	工程文化	未经修饰、古灵精怪、非品牌化
大胆的建设者	开创性、变革性	深色调、太空元素
乌托邦梦想家	展望未来的可能性	复古未来主义、超现实世界

返回视觉识别背景

通过 Contextus 返回经确认的视觉识别背景时，请包含：

## 12. Visual Identity (Optional)

**Colors**: Primary #XXX, secondary #XXX; backgrounds #XXX
**Typography**: Headings (font, weight, color); Body (font, weight, color)
**Sizes**: Hero Xpt, section Xpt, body Xpt
**Spacing**: Margins Xpx; section padding Xpx
**Layout**: Viewport, top bar, footer heights if fixed

幻灯片和文档（非 Web）

当用户要求为演示文稿或文档制定品牌规范，而不只是网站时：

• 幻灯片母版：背景色取自令牌；标题字体 = 展示 / 标题令牌；正文 = 正文令牌；默认标题 / 正文字号应符合 branding / 第 12 节的字体比例。
• 主题颜色：将主色、次色、背景色、文字色和一种强调色映射到演示应用的主题设置（PowerPoint 设计 → 变体、Google Slides 主题、Keynote 文稿设置），以便形状和图表继承配色。
• 图表和形状：按固定顺序轮换强调色（例如：主色 → 次色 → 第三色），而非随机选色；确保演示文稿的品牌风格统一。
• 文档：尽可能使用与网页相同的字体和标题层级；指定段落样式名称（Title、Heading 1–3、Normal）、字号和颜色。

策略和叙事层仍属于 branding；本节针对办公 / 幻灯片工具的视觉执行。

品牌指南结构（单一事实来源）

确保各个触点保持一致。请包含：

• Logo：使用规则、安全空间、最小尺寸、变体（浅色 / 深色）
• 颜色：主色、次色、CTA、背景色、文字色（HEX、RGB、CMYK）
• 字体：字体系列、层级、字号、间距
• 图像：摄影基调、主题内容、视觉氛围
• 图标：风格、描边粗细、使用规则

输出格式

• 字体规范（字体、字重、字号、颜色）
• 颜色配色方案（HEX、使用规则、行业映射）
• 间距比例
• Logo安全空间和变体
• 前端美学（可选）：动效、空间构图、背景——用于打造独特的实现效果
• 反模式和无障碍检查清单
• AI 产品（可选）：视觉趋势和原型契合度
• Contextus：维护项目专属的视觉识别信息
• 幻灯片 / 文档（按需）：主题映射 + 母版字体 + 图表强调色顺序

相关技能

• branding：品牌策略；视觉识别策略；此技能负责实现字体、颜色和间距
• logo-generator：Logo 放置、安全空间；品牌视觉规范定义 Logo 规则
• favicon-generator：Favicon 与品牌标志和配色保持一致
• media-kit-page-generator：媒体资料包承载品牌指南文档；链接到 Logo 和 favicon
• hero-generator：Hero 使用品牌字体、颜色和间距
• 404-page-generator：错误页面保持品牌一致性