Back to Details

logo-generator

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Components: Logo

组件：Logo

Guides logo placement and implementation for brand recall and navigation. Logo placement affects user orientation and conversion.
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.
指导logo的摆放与落地实现，提升品牌记忆度与导航体验。logo的摆放位置会影响用户的方向感知和转化效果。
调用规则：首次使用时如果有帮助，可以先用1-2句话说明本技能覆盖的内容及其重要性，再给出核心输出。后续使用或用户要求跳过说明时，直接输出核心内容即可。

Initial Assessment

初步评估

Check for product marketing context first: If 
.claude/product-marketing-context.md
or 
.cursor/product-marketing-context.md
exists, read it for brand guidelines and visual identity.
Brand guidelines source: Logo usage rules (clear space, minimum sizes, variants) come from branding (strategy), brand-visual-generator (visual specs), or media kit. Ensure alignment before implementation.
Identify:
  1. Context: Header, footer, standalone
  2. Platform: Web, mobile, both
  3. Brand guidelines: Size, clear space, variants (from brand-visual-generator or media kit)
首先检查产品营销上下文：如果存在
.claude/product-marketing-context.md
或
.cursor/product-marketing-context.md
文件，读取其中的品牌指南和视觉识别规范。
品牌指南来源：logo使用规则（留白空间、最小尺寸、变体版本）来自branding（品牌策略）、brand-visual-generator（视觉规格）或媒体资料包。落地前需确保符合规范要求。
需确认的信息：
  1. 使用场景：页眉、页脚、独立展示
  2. 适配平台：网页、移动端、双端适配
  3. 品牌规范：尺寸、留白空间、变体版本（来自brand-visual-generator或媒体资料包）

Placement Best Practices

摆放最佳实践

Optimal: Top-Left

最优位置：左上角

  • Brand recall: Users are 89% more likely to remember logos in top-left vs. right
  • Left-aligned: ~39% brand recall vs. 21% for right-aligned
  • Navigation anchor: Users expect logo to link to homepage; left placement is intuitive
  • Scan pattern: Aligns with left-to-right reading flow
  • 品牌记忆度：用户对左上角logo的记忆率比右侧高89%
  • 左对齐：品牌记忆率约39%，远高于右对齐的21%
  • 导航锚点：用户默认预期logo点击跳转首页，左侧摆放符合使用直觉
  • 浏览模式：符合从左到右的阅读流习惯

Avoid

需避免的做法

  • Centered logos: Users navigating home from centered logos are ~6x more likely to fail
  • Right-aligned: Violates conventions; harms brand recognition
  • 居中摆放logo：用户点击居中logo跳转首页的失败率是左对齐的6倍左右
  • 右对齐摆放：违反用户习惯，损害品牌识别度

When Center May Work

居中摆放的适用场景

  • Minimal headers with few elements
  • Brand-heavy landing pages where logo is focal point
  • Ensure logo still links to homepage and is clearly clickable
  • 元素极少的极简风格页眉
  • 以品牌为核心的落地页，logo是视觉焦点
  • 需确保logo仍然跳转首页，且点击属性清晰可识别

Implementation

落地实现

Linking

链接设置

  • Always link to homepage from logo
  • Use 
    <a href="/">
    wrapping logo image
  • Expected behavior; don't break convention
  • logo必须始终跳转首页
  • 用
    <a href="/">
    包裹logo图片
  • 这是用户普遍预期的行为，不要打破常规

Image

图片设置

  • Use appropriate format (SVG preferred for scalability)
  • Provide 
    alt
    text: company/product name, not "logo"
  • Example: 
    alt="Acme Inc."
    not 
    alt="Logo"
  • 使用合适的格式（优先选择SVG，可无损缩放）
  • 填写
    alt
    文本：填写公司/产品名称，不要写“logo”
  • 示例：
    alt="Acme Inc."
    ，而非
    alt="Logo"

Size & Clear Space

尺寸与留白

  • Minimum size: Document in brand guide; prevent illegibility at small sizes (favicon, mobile header).
  • Clear space: Minimum space around logo; no text or graphics within this zone. Defined in brand-visual-generator.
  • Responsive: Ensure readability on mobile; test at 375px, 768px, 1024px.
  • Variants: Primary, secondary, monogram; light/dark backgrounds per brand guidelines.
  • 最小尺寸：在品牌指南中明确标注，避免小尺寸下无法识别（比如favicon、移动端页眉场景）。
  • 留白空间：logo周边需保留最小留白区域，该区域内不得出现文字或图形，具体规则在brand-visual-generator中定义。
  • 响应式适配：确保在移动端也可清晰识别，在375px、768px、1024px尺寸下测试显示效果。
  • 变体版本：主版本、次版本、字母标识；根据品牌规范适配浅色/深色背景。

AI Product Logo Design (Optional)

AI产品Logo设计（可选）

For AI/SaaS products, Alignify AI Logo Guide offers industry-specific guidance.
针对AI/SaaS产品，可参考Alignify AI Logo Guide获取行业专属指导。

Design Trends

设计趋势

Examples are illustrative; no endorsement implied.
StyleUse CaseExamples
HexagonTechnical platforms, enterprise AICommon in AI logos (e.g. OpenAI)
Rotation/swirlGenerative AI, creative toolsE.g. DeepMind, Stability AI
Minimalist robotAssistants, chatbotsE.g. Jasper, Replika
Emoji/symbolConsumer, friendly AIE.g. Hugging Face, Zoom AI
示例仅作说明，不代表官方推荐。
风格适用场景示例
六边形（Hexagon）技术平台、企业级AIAI类logo常用（如OpenAI）
旋转/漩涡（Rotation/swirl）生成式AI、创意工具如DeepMind、Stability AI
极简机器人（Minimalist robot）助手类产品、聊天机器人如Jasper、Replika
表情/符号（Emoji/symbol）C端产品、友好型AI如Hugging Face、Zoom AI

Design Process

设计流程

  1. Positioning: B2B (professional, trustworthy) vs B2C (friendly, approachable)
  2. Core element: Choose hexagon, rotation, robot, or emoji per product type
  3. Color: Tech blue, blue-to-purple gradients, monochrome; consider dark mode
  4. Test sizes: Favicon, mobile, header; ensure recognition at small sizes
  5. Trademark check: Avoid conflicts with existing marks
  1. 定位：B2B（专业、可信）vs B2C（友好、亲和）
  2. 核心元素：根据产品类型选择六边形、旋转元素、机器人、表情/符号
  3. 配色：科技蓝、蓝紫渐变、单色；考虑深色模式适配
  4. 尺寸测试：favicon、移动端、页眉场景；确保小尺寸下可识别
  5. 商标核查：避免与现有商标冲突

Avoid

需避免的做法

  • Overly complex; modern AI logos favor minimalism
  • Too similar to competitors; balance industry recognition with uniqueness
  • Overly technical symbols for B2C; use friendlier designs
  • Ignoring mobile display; test at multiple sizes
  • Frequent rebranding; choose a long-term design
  • 设计过于复杂；现代AI logo偏好极简风格
  • 和竞品过于相似；平衡行业辨识度和独特性
  • B2C产品使用过于技术化的符号；选择更友好的设计
  • 忽略移动端展示；在多尺寸下测试显示效果
  • 频繁换品牌标识；选择可长期使用的设计

SEO

SEO

  • Alt text supports accessibility and image SEO
  • Logo link contributes to internal linking (homepage)
  • Alt文本可提升无障碍体验和图片SEO效果
  • Logo链接有助于优化内部链接结构（指向首页）

Accessibility

无障碍

RequirementPractice
Alt textDescriptive; company name
ContrastLogo visible against background
FocusLink receives visible focus state
Touch targetsAdequate size on mobile (>=44x44px)
要求实践规范
Alt文本描述性内容，填写公司名称
对比度logo在背景上清晰可见
焦点状态链接有可见的焦点状态
点击区域移动端点击区域尺寸足够（>=44x44px）

Output Format

输出格式

  • Placement recommendation
  • Implementation notes (HTML, alt, link)
  • Accessibility checklist
  • AI products (optional): Design trend and archetype suggestions per positioning
  • 摆放位置推荐
  • 落地实现说明（HTML、alt、链接）
  • 无障碍检查清单
  • AI产品（可选）：根据产品定位给出设计趋势和原型建议

Related Skills

相关技能

  • branding: Brand strategy; logo rules defined in brand guidelines
  • navigation-menu-generator: Logo typically sits in header with nav
  • hero-generator: Logo appears in hero context on landing pages
  • media-kit-page-generator: Logo assets, brand guidelines, usage rules
  • favicon-generator: Favicon derived from logo; consistent brand in browser tabs
  • brand-visual-generator: Typography, colors, spacing; logo clear space and variants
  • branding：品牌策略；logo规则在品牌指南中定义
  • navigation-menu-generator：logo通常和导航栏一起放在页眉
  • hero-generator：落地页的首屏区域会展示logo
  • media-kit-page-generator：logo资产、品牌指南、使用规则
  • favicon-generator：favicon从logo衍生而来，保持浏览器标签页的品牌一致性
  • brand-visual-generator：排版、配色、间距；logo留白和变体规范