brand-visual-generator

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Components: Brand Visual Identity

组件：品牌视觉识别

Guides visual identity for consistent brand presentation. Companies with consistent branding see up to 23-33% revenue lift; 94% of consumers say consistency influences buying decisions.

When invoking: On first use, if helpful, open with 1-2 sentences on what this skill covers and why it matters, then provide the main output. On subsequent use or when the user asks to skip, go directly to the main output.

为品牌的统一呈现提供视觉识别指导。品牌形象一致的企业营收最多可提升23-33%；94%的消费者表示品牌一致性会影响购买决策。

调用规则：首次使用时，如果合适，可以先用1-2句话介绍本技能的覆盖范围和价值，再提供核心输出。后续调用或用户要求跳过介绍时，直接返回核心输出即可。

Initial Assessment

初步评估

Check for product marketing context first: If

.claude/product-marketing-context.md

.cursor/product-marketing-context.md

exists, read Section 12 (Visual Identity) for colors, typography, spacing. See branding for brand strategy and visual identity strategy layer.

Identify:

Scope: New brand, audit, or component design
Touchpoints: Web, print, social, product UI
Existing assets: Logo, style guide, design files

优先检查产品营销上下文：如果存在

.claude/product-marketing-context.md

或

.cursor/product-marketing-context.md

文件，读取第12节（视觉识别）的颜色、排版、间距规则。品牌战略和视觉识别战略层内容可参考 branding 技能。

明确以下信息：

范围：全新品牌设计、合规审计、还是组件设计
触达渠道：网页、印刷品、社交平台、产品UI
现有资产：Logo、风格指南、设计源文件

Best Practices

最佳实践

Typography

排版

Two-font system: One display font for headlines, one body font for text. Contrast + harmony: different enough for distinct roles, similar enough to feel cohesive.
Body font: Prioritize legibility—large x-height, open counters. For neutral/safe: Source Sans 3, Lora, IBM Plex Sans. For distinctiveness: avoid overused AI fonts (Inter, Roboto, Arial, system fonts); prefer characterful choices that elevate the brand. See Frontend Aesthetics.
Headline font: Communicates brand voice; must be readable in under one second. Carries personality while body handles infrastructure.
Type scale: Use ratios 1.25–1.5 (Major Third or Perfect Fifth) for hierarchy. Limit to 3–4 styles per block.
Pairing rule: Decorative fonts only with neutral typefaces. Assign distinct roles; avoid mixing more than two families.
Sizes: Hero, section, subheading, body, caption; responsive scaling. Line length max 120 chars; generous line-height.

双字体体系：标题使用一款展示字体，正文使用一款正文字体。兼顾对比度与和谐度：差异足够区分角色，风格足够统一协调。
正文字体：优先考虑易读性——较大的x-height、开放的字腔。通用安全选择：Source Sans 3、Lora、IBM Plex Sans。想要突出特色：避免过度使用的常见AI字体（Inter、Roboto、Arial、系统字体）；选择有个性的字体提升品牌质感。可参考 前端美学 部分。
标题字体：传递品牌调性，必须能在1秒内被识别。承载品牌个性，正文字体负责基础可读性。
排版比例：使用1.25-1.5的比例（大三度或纯五度）构建层级。每个内容块最多使用3-4种字体样式。
搭配规则：装饰性字体仅可与中性字体搭配。为不同字体明确分配角色，不要混合超过2种字体系列。
字号： hero区、章节标题、副标题、正文、说明文字；支持响应式缩放。单行最大长度不超过120字符；设置宽松的行高。

Color Palette

调色板

Structure: Primary, secondary, CTA, background, text. Use flexible systems (core hero color + complementary shades), not single rigid colors.
Industry mapping: Finance → blue, gray, navy (stability); Luxury → rose gold, burgundy, black (exclusivity); Tech → teal, neon accents, charcoal (innovation); Wellness → lavender, peach, mint (calm); Sustainability → sage green, earthy tones.
Reproduction: HEX, RGB, CMYK for print and digital.
Accessibility: Contrast >=4.5:1 for normal text, >=3:1 for large text (18px+ or 14px+ bold). Don't rely on color alone for information.

结构：主色、辅助色、CTA色、背景色、文字色。使用灵活的体系（核心主色+互补色阶），而非单一固定颜色。
行业配色参考：金融→蓝色、灰色、藏青色（传递稳定性）；奢侈品→玫瑰金、酒红、黑色（传递专属感）；科技→青色、霓虹点缀色、炭灰色（传递创新感）；健康→薰衣草紫、桃色、薄荷绿（传递平静感）；可持续→鼠尾草绿、大地色系。
输出格式：同时提供HEX、RGB、CMYK格式适配印刷和数字场景。
可访问性：普通文本对比度≥4.5:1，大文本（18px以上或14px以上加粗）对比度≥3:1。不要仅用颜色传递信息。

Spacing

间距

Margins: Horizontal (e.g. 120px), vertical section padding
Grid: Consistent spacing scale (8px base common)
Logo clear space: Minimum space around logo; document in brand guide

边距：水平边距（例如120px）、垂直章节内边距
网格：统一的间距尺度（通常以8px为基础单位）
Logo留白：Logo周围的最小留白距离，需写入品牌指南

Logo Usage

Logo使用规范

Variants: Primary, secondary, monogram; light/dark backgrounds
Minimum size: Prevent illegibility
Don't: Stretch, recolor, add effects without approval

变体：主Logo、副Logo、字母标；适配浅色/深色背景的版本
最小尺寸：避免尺寸过小导致无法识别
禁止操作：未经许可不得拉伸、改色、添加特效

Anti-Patterns (Avoid)

常见误区（需避免）

Aesthetics over functionality: Don't sacrifice usability for visual appeal.
Unclear CTAs: Limit primary CTA to one per section; visually differentiate primary vs secondary.
Inconsistent elements: Pixelated icons, mismatched spacing/typography/color reduce trust.
Poor text hierarchy: Disordered, cluttered text confuses users.
Overusing effects: Drop shadows, pop-ups, crowded UI distract from content.
Chasing trends blindly: Adopt trends only when they fit project needs.
Ignoring performance: Heavy assets and complex layouts hurt load times.
Generic AI aesthetics: Inter, Roboto, Arial, Space Grotesk, and system fonts contribute to cookie-cutter design; avoid clichéd schemes (e.g., purple gradients on white). Prefer distinctive choices when brand differentiation matters.
Emoji as icons: Use SVG icons (Heroicons, Lucide, Simple Icons)—never emojis (🎨 🚀 ⚙️) as UI icons; emojis look unprofessional and inconsistent.
Unstable hover states: Use color/opacity transitions on hover; avoid scale transforms that shift layout or cause content jump.

美观优先于功能：不要为了视觉效果牺牲可用性。
CTA不清晰：每个章节最多保留1个主CTA；从视觉上明确区分主、次CTA。
元素不一致：像素模糊的图标、不匹配的间距/排版/颜色会降低用户信任。
文本层级混乱：无序、杂乱的文本会让用户产生困惑。
过度使用特效：阴影、弹窗、拥挤的UI会分散用户对内容的注意力。
盲目追热点：仅在符合项目需求时才采用设计趋势。
忽略性能：过大的资源和复杂的布局会拖慢加载速度。
通用AI审美：Inter、Roboto、Arial、Space Grotesk和系统字体会导致设计千篇一律；避免俗套的配色方案（例如白底配紫色渐变）。当需要品牌差异化时，优先选择有特色的方案。
用Emoji当图标：使用SVG图标（Heroicons、Lucide、Simple Icons）——绝对不要用Emoji（🎨 🚀 ⚙️）作为UI图标；Emoji看起来不专业且一致性差。
不稳定的hover状态：hover时使用颜色/透明度过渡；避免使用会改变布局或导致内容跳动的缩放变换。

Accessibility Checklist

可访问性检查清单

Contrast: Normal text >=4.5:1; large text >=3:1; interactive elements >=3:1.
Focus: Visible focus indicator (>=2px solid, 3:1 contrast); logical Tab order; no keyboard traps.
Color: Never use color alone to convey information; add text or icons for states (error, success).
Keyboard: All interactive elements reachable via Tab, Enter, Spacebar.
Reduced motion: Respect
```
prefers-reduced-motion
```
for animations.

对比度：普通文本≥4.5:1；大文本≥3:1；交互元素≥3:1。
焦点：可见的焦点指示器（≥2px实线，3:1对比度）；符合逻辑的Tab顺序；无键盘陷阱。
颜色：绝不单独使用颜色传递信息；为状态（错误、成功）添加文字或图标说明。
键盘操作：所有交互元素都可以通过Tab、Enter、空格键访问。
减少动效：动画效果需尊重
```
prefers-reduced-motion
```
设置。

Frontend Aesthetics

前端美学

Guides distinctive, production-grade frontend implementation. Components (hero, CTA, footer, etc.) and pages (landing, home, features) should reference these principles for visual differentiation. Intentionality over intensity: bold maximalism and refined minimalism both work when executed with precision.

为特色化、生产级的前端实现提供指导。组件（hero区、CTA、页脚等）和页面（落地页、首页、功能页等）应当参考这些原则实现视觉差异化。** intentionality over intensity（刻意设计优于堆砌效果）**：大胆的极繁主义和精致的极简主义只要实现精准都可以达到很好的效果。

Typography

排版

Avoid generic AI fonts: Inter, Roboto, Arial, system fonts, Space Grotesk. These create cookie-cutter aesthetics.
Distinctive pairing: One display font (headlines, personality) + one refined body font (readability). Choose characterful, unexpected fonts that elevate the interface.
Consistency: Use CSS variables; limit to 3–4 type styles per block.

避免通用AI字体：Inter、Roboto、Arial、系统字体、Space Grotesk，这些字体会导致设计千篇一律。
特色字体搭配：一款展示字体（标题、传递个性）+一款精致的正文字体（保证可读性）。选择有个性、超出预期的字体提升界面质感。
一致性：使用CSS变量；每个内容块最多使用3-4种字体样式。

Motion

动效

High-impact moments: One well-orchestrated page load with staggered reveals (
```
animation-delay
```
) creates more delight than scattered micro-interactions.
Prioritize: CSS-only for HTML; Motion library for React when available. Scroll-triggering and hover states that surprise.
Accessibility: Always respect
```
prefers-reduced-motion
```
; provide reduced or no-motion alternatives.

高 impact 节点：一个精心编排的带错落展示效果的页面加载（
```
animation-delay
```
）比零散的微交互更能给用户带来愉悦感。
技术优先级：HTML元素优先用纯CSS实现动效；React项目可用Motion库。滚动触发和hover状态可以做的有惊喜感。
可访问性：始终尊重
```
prefers-reduced-motion
```
设置；提供减少动效或无动效的备选方案。

Spatial Composition

空间布局

Unexpected layouts: Asymmetry, overlap, diagonal flow, grid-breaking elements.
Balance: Generous negative space OR controlled density—choose intentionally.
Hierarchy: Clear visual flow; avoid predictable, evenly-distributed layouts.

非预期布局：不对称、重叠、对角线流、打破网格的元素。
平衡：刻意选择宽松的留白或可控的密度。
层级：清晰的视觉流；避免 predictable、均匀分布的布局。

Backgrounds & Visual Details

背景与视觉细节

Atmosphere over flat: Create depth rather than defaulting to solid colors.
Techniques: Gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, grain overlays.
Context: Match effects to overall aesthetic; don't distract from content.

氛围感优于扁平感：营造深度，而非默认使用纯色。
实现技巧：渐变网格、噪点纹理、几何图案、分层透明效果、戏剧化阴影、装饰性边框、颗粒叠加层。
适配上下文：效果要匹配整体美学风格，不要分散用户对内容的注意力。

Never

禁止行为

Overused font families (Inter, Roboto, Arial, system fonts)
Clichéd color schemes (e.g., purple gradients on white)
Predictable layouts and cookie-cutter component patterns
Design that lacks context-specific character
Emojis as UI icons (use SVG: Heroicons, Lucide, Simple Icons)

使用烂大街的字体系列（Inter、Roboto、Arial、系统字体）
俗套的配色方案（例如白底配紫色渐变）
predictable的布局和千篇一律的组件模式
缺乏上下文专属特色的设计
用Emoji当UI图标（使用SVG：Heroicons、Lucide、Simple Icons）

AI Brand Aesthetics (Optional)

AI品牌美学（可选）

For AI/SaaS products, consider these visual trends and brand archetypes; adopt, ignore, or counter consciously to avoid sameness.

针对AI/SaaS产品，可以参考以下视觉趋势和品牌原型；可以有意识地采用、忽略或者反向操作避免同质化。

Visual Trends

视觉趋势

Trend	Signal
Off-white / beige	Trust, restraint, premium without gloss
Organic gradients	Distinctiveness; add grain, texture
Digital impressionism	Mood over literal; suggestive, not descriptive
Lomo / imperfect	Exploratory, human creativity
Contemporary realism	Precision, reliability, mastery
Sketch / scribble	Human thought, exploration over certainty
Non-brand academia	Authority; work speaks for itself
Technical illustrations	Rigor, engineering depth
Quirky cuteness	Approachability; counter doomsday narratives
Morphing objects	Emergence, systems that learn
Futuristic surrealism	Gateway to new worlds
Outer space	Exploration, unknown
ASCII / pixels	Retro, playful, technical
Generative art	Algorithmic, living system

趋势	特征
米白/米色	信任感、克制感、无光泽的高级感
有机渐变	独特性；添加颗粒、纹理
数字印象派	重情绪轻写实；暗示性而非描述性
LOMO/不完美感	探索性、人类创造力
当代现实主义	精准、可靠、专业
草稿/手绘风	人类思考、重探索轻确定性
去品牌化学术风	权威性；内容本身说话
技术插图	严谨、工程深度
古怪可爱风	亲和力；消解末日叙事
变形物体	涌现性、可学习的系统
未来超现实主义	通往新世界的入口
外太空	探索、未知
ASCII/像素风	复古、趣味、技术感
生成艺术	算法驱动、活的系统

Brand Archetypes

品牌原型

Archetype	Tone	Visual
Likeable Leaders	Seriousness, stability, trust	Muted greys, warm beiges; impressionistic
Gentle Humanists	People before tech	Hand-drawn, everyday moments, nature
Nerdy Idealists	Engineering culture	Unpolished, quirky, non-branded
Bold Builders	Groundbreaking, transformative	Dark palettes, space references
Utopian Dreamers	What becomes possible	Retrofuturistic, surreal worlds

原型	调性	视觉表现
亲和领袖	严肃、稳定、可信	柔和的灰色、暖米色；印象派风格
温和人文主义者	人优先于技术	手绘风、日常场景、自然元素
书呆子理想主义者	工程师文化	未打磨、古怪、去品牌化
大胆建设者	突破性、变革性	深色系、太空元素参考
乌托邦梦想家	探索可能性	复古未来主义、超现实世界

Product Marketing Context (Section 12)

产品营销上下文（第12节）

When creating or updating

.cursor/product-marketing-context.md

, add:

markdown

undefined

创建或更新

.cursor/product-marketing-context.md

时，添加以下内容：

markdown

undefined

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

undefined

undefined

Brand Guidelines Structure (Single Source of Truth)

品牌规范结构（唯一可信源）

Ensure consistency across touchpoints. Include:

Logo: Usage rules, clear space, minimum sizes, variants (light/dark)
Colors: Primary, secondary, CTA, background, text (HEX, RGB, CMYK)
Typography: Font families, hierarchy, sizing, spacing
Imagery: Photography tone, subject matter, visual mood
Iconography: Style, stroke weight, usage rules

确保跨渠道的一致性，包含以下内容：

Logo：使用规则、留白要求、最小尺寸、变体（浅色/深色适配）
颜色：主色、辅助色、CTA色、背景色、文字色（HEX、RGB、CMYK）
排版：字体系列、层级、字号、间距
图像：摄影风格、主题、视觉氛围
图标：风格、描边粗细、使用规则

Output Format

输出格式

Typography spec (fonts, weights, sizes, colors)
Color palette (HEX, usage rules, industry mapping)
Spacing scale
Logo clear space and variants
Frontend aesthetics (optional): Motion, spatial composition, backgrounds—for distinctive implementation
Anti-patterns and accessibility checklist
AI products (optional): Visual trend and archetype alignment
Context template for product-marketing-context Section 12

排版规范（字体、字重、字号、颜色）
颜色调色板（HEX、使用规则、行业适配）
间距尺度
Logo留白要求和变体
前端美学（可选）：动效、空间布局、背景——用于特色化实现
常见误区和可访问性检查清单
AI产品（可选）：视觉趋势和原型匹配度
产品营销上下文第12节的模板

brand-visual-generator

Original

Translation

Components: Brand Visual Identity

组件：品牌视觉识别

Initial Assessment

初步评估

Best Practices

最佳实践

Typography

排版

Color Palette

调色板

Spacing

间距

Logo Usage

Logo使用规范

Anti-Patterns (Avoid)

常见误区（需避免）

Accessibility Checklist

可访问性检查清单

Frontend Aesthetics

前端美学

Typography

排版

Motion

动效

Spatial Composition

空间布局

Backgrounds & Visual Details

背景与视觉细节

Never

禁止行为

AI Brand Aesthetics (Optional)

AI品牌美学（可选）

Visual Trends

视觉趋势

Brand Archetypes

品牌原型

Product Marketing Context (Section 12)

产品营销上下文（第12节）

12. Visual Identity (Optional)

12. Visual Identity (Optional)

Brand Guidelines Structure (Single Source of Truth)

品牌规范结构（唯一可信源）

Output Format

输出格式

Related Skills

相关技能