logo-designer

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Logo Designer

标志设计工具

Design modern, professional logos by analyzing project context and generating SVG-based brand assets.

通过分析项目上下文，生成基于SVG的现代、专业品牌标志资产。

Workflow

工作流程

Phase 1: Project Analysis

阶段1：项目分析

Automatically analyze the current project to understand brand context:

Detect product identity - Check these files in order:
- ```
README.md
```
  - Product name, description, tagline
- ```
package.json
```
  - Name, description, keywords
- ```
pyproject.toml
```
  - Project name and description
- ```
Cargo.toml
```
  - Package name and description
- ```
go.mod
```
  - Module name
Find existing brand assets - Search for:
- ```
/docs/brand_kit.md
```
  ,
```
/.docs/brand_kit.md
```
  ,
```
brand_kit.md
```
- ```
/docs/prd.md
```
  ,
```
prd.md
```
  - Product requirements with brand info
- ```
/assets/logo/
```
  ,
```
/public/logo
```
  ,
```
/static/logo
```
  - Existing logos
- Tailwind config for existing color palette
Identify project type from codebase structure:
- Developer/CLI/Open Source -
```
.github/
```
  , CLI entry points, MIT license
- SaaS/Productivity - Web app structure, auth, dashboard patterns
- Startup - Lean structure, MVP patterns
- Enterprise/B2B - Complex architecture, integrations
- Consumer/Mobile - React Native, Flutter, mobile-first patterns

Summarize findings before proceeding:

Product: [name]
Type: [Developer Tool / SaaS / Startup / Enterprise / Consumer]
Purpose: [1-sentence description]
Audience: [target users]
Existing colors: [hex codes if found, or "None detected"]
Assets found: [list or "None"]

自动分析当前项目以了解品牌背景：

识别产品标识 - 按以下顺序检查文件：
- ```
README.md
```
  - 产品名称、描述、标语
- ```
package.json
```
  - 名称、描述、关键词
- ```
pyproject.toml
```
  - 项目名称和描述
- ```
Cargo.toml
```
  - 包名称和描述
- ```
go.mod
```
  - 模块名称
查找现有品牌资产 - 搜索以下内容：
- ```
/docs/brand_kit.md
```
  、
```
/.docs/brand_kit.md
```
  、
```
brand_kit.md
```
- ```
/docs/prd.md
```
  、
```
prd.md
```
  - 包含品牌信息的产品需求文档
- ```
/assets/logo/
```
  、
```
/public/logo
```
  、
```
/static/logo
```
  - 现有标志
- Tailwind配置文件以获取现有调色板
从代码库结构识别项目类型：
- 开发者工具/CLI/开源项目 - 包含
```
.github/
```
  、CLI入口、MIT许可证
- SaaS/生产力工具 - Web应用结构、认证、仪表板模式
- 初创产品 - 精简结构、MVP模式
- 企业级/B2B产品 - 复杂架构、集成功能
- 消费级/移动产品 - React Native、Flutter、移动优先模式

在继续前总结分析结果：

产品: [名称]
类型: [开发者工具 / SaaS / 初创产品 / 企业级 / 消费级]
用途: [一句话描述]
受众: [目标用户]
现有色彩: [若找到则为十六进制代码，否则为“未检测到”]
已找到资产: [列表或“无”]

Phase 2: Logo Design

阶段2：标志设计

Generate logo based on project type and context.

根据项目类型和上下文生成标志。

Style Selection (auto-select based on project type)

风格选择（根据项目类型自动选择）

Project Type	Style	Examples
Developer/CLI/Open Source	Clean, technical, monochrome	GitHub, Linear, Vercel
SaaS/Productivity	Ultra-minimal, Apple-style	Notion, Stripe, Figma
Startup	Bold, distinctive, high-contrast	YC-style companies
Enterprise/B2B	Professional, trustworthy	Salesforce, IBM
Consumer/Mobile	Friendly, vibrant, icon-first	Instagram, Spotify

项目类型	风格	示例
开发者工具/CLI/开源项目	简洁、技术感、单色	GitHub、Linear、Vercel
SaaS/生产力工具	极致简约、苹果风格	Notion、Stripe、Figma
初创产品	醒目、独特、高对比度	YC系公司风格
企业级/B2B产品	专业、值得信赖	Salesforce、IBM
消费级/移动产品	友好、活力、图标优先	Instagram、Spotify

Design Principles

设计原则

Visual:

Minimalist, clean, strong geometry
Abstract symbol or monogram related to core purpose
Works at all sizes (16px favicon to hero banner)
Flat or semi-flat design, no gradients or visual clichés
Incorporate visual depth using cards, lines, borders, and subtle shadows

Colors:

Use detected brand colors if available, OR user-provided palette
If neither exists, apply the Default Style Guide below
High contrast, WCAG AA compliant (4.5:1 minimum)
Always provide light, dark, and transparent versions

Default Style Guide (used when user provides no style preference):

Palette: Strictly four core colors only — Black (
```
#000000
```
), White (
```
#FFFFFF
```
), Gray (
```
#6B7280
```
), and Bright Green (
```
#22C55E
```
)
Aesthetic: Elegant, clear, clean, and professional
Bright Green constraint: Reserved for highlights only (text, borders, lines) — never as a background color
System status colors: Danger (
```
#EF4444
```
), Warning (
```
#F59E0B
```
), Info (
```
#3B82F6
```
) may only be applied to text elements, never to backgrounds or primary UI components

Typography:

Modern sans-serif (Inter, SF Pro, Geist, or match detected fonts)
Medium to Bold weight
Confident and readable at small sizes

视觉方面：

极简、干净、几何感强烈
与核心用途相关的抽象符号或字母组合
在所有尺寸下都清晰可辨（从16px的favicon到首页横幅）
扁平化或半扁平化设计，无渐变或视觉陈词滥调
使用卡片、线条、边框和细微阴影营造视觉层次感

色彩方面：

若有检测到的品牌色彩则使用，否则使用用户提供的调色板
若两者都不存在，则应用以下默认风格指南
高对比度，符合WCAG AA标准（最小对比度4.5:1）
始终提供浅色、深色和透明版本

默认风格指南（当用户未提供风格偏好时使用）：

调色板：严格仅使用四种核心颜色——黑色（
```
#000000
```
）、白色（
```
#FFFFFF
```
）、灰色（
```
#6B7280
```
）和亮绿色（
```
#22C55E
```
）
美学：优雅、清晰、干净、专业
亮绿色限制：仅用于高亮元素（文本、边框、线条）——绝不能作为背景色
系统状态色彩：危险色（
```
#EF4444
```
）、警告色（
```
#F59E0B
```
）、信息色（
```
#3B82F6
```
）仅可应用于文本元素，绝不能用于背景或主要UI组件

排版方面：

现代无衬线字体（Inter、SF Pro、Geist，或匹配检测到的字体）
中等至粗体字重
小尺寸下仍清晰易读

Phase 3: Deliverables

阶段3：交付物

Generate these SVG files:

/assets/logo/
├── logo-full.svg      # Mark + wordmark (horizontal)
├── logo-mark.svg      # Symbol/icon only
├── logo-wordmark.svg  # Text only
├── logo-icon.svg      # App icon (square, padded)
├── favicon.svg        # 16x16 optimized
├── logo-white.svg     # White version for dark backgrounds
└── logo-black.svg     # Black version for light backgrounds

SVG Requirements:

Vector-style, crisp edges
No embedded rasters
Optimized paths
viewBox properly set

生成以下SVG文件：

/assets/logo/
├── logo-full.svg      # 图形+文字标志（横向）
├── logo-mark.svg      # 仅图形/图标
├── logo-wordmark.svg  # 仅文字
├── logo-icon.svg      # 应用图标（方形，带内边距）
├── favicon.svg        # 16x16优化版
├── logo-white.svg     # 深色背景适用的白色版本
└── logo-black.svg     # 浅色背景适用的黑色版本

SVG要求：

矢量风格，边缘锐利
无嵌入光栅图
优化路径
正确设置viewBox

Phase 4: Documentation

阶段4：文档

After generating logos, provide:

Design Rationale
- Why these colors were chosen
- Symbol meaning and connection to product
- Typography choice reasoning

Color Specification

Primary: #HEXCODE
Secondary: #HEXCODE (if applicable)
Accent/Highlight: #HEXCODE (for borders, lines, highlight text)
Background Light: #FFFFFF
Background Dark: #0A0A0A

Tailwind Config Addition

colors: {
  brand: {
    primary: '#HEXCODE',
    secondary: '#HEXCODE',
    accent: '#HEXCODE',
  }
}

Next Steps
- Create or update
```
brand_kit.md
```
- Add logo to README
- Update favicon in HTML/framework config

生成标志后，提供以下内容：

设计说明
- 选择这些色彩的原因
- 符号含义与产品的关联
- 排版选择的理由

色彩规格

主色: #十六进制代码
辅助色: #十六进制代码（如适用）
强调/高亮色: #十六进制代码（用于边框、线条、高亮文本）
浅色背景: #FFFFFF
深色背景: #0A0A0A

Tailwind配置添加代码

colors: {
  brand: {
    primary: '#HEXCODE',
    secondary: '#HEXCODE',
    accent: '#HEXCODE',
  }
}

后续步骤
- 创建或更新
```
brand_kit.md
```
- 在README中添加标志
- 在HTML/框架配置中更新favicon

Example Output

示例输出

For a CLI tool called "fastbuild":

undefined

针对名为“fastbuild”的CLI工具：

undefined

Analysis Summary

分析总结

Product: fastbuild Type: Developer/CLI Tool Purpose: Fast incremental build system for large codebases Audience: Software developers, DevOps engineers Existing colors: None detected Assets found: None

产品: fastbuild 类型: 开发者工具/CLI工具用途: 针对大型代码库的快速增量构建系统受众: 软件开发人员、DevOps工程师现有色彩: 未检测到已找到资产: 无

Design Rationale

设计说明

Symbol: Abstract "F" formed by stacked horizontal bars suggesting speed and layered builds
Colors: Default style guide — Black/White/Gray base with Bright Green highlight on the speed bars
Typography: Geist Mono for CLI tool authenticity

符号: 由堆叠的水平条组成的抽象“F”，象征速度和分层构建
色彩: 使用默认风格指南——黑/白/灰为基础，亮绿色用于速度条的高亮
排版: 使用Geist Mono以体现CLI工具的专业性

Colors

色彩规格

Primary: #000000 Secondary: #6B7280 Accent: #22C55E (highlights only — borders, lines) Background Light: #FFFFFF Background Dark: #0A0A0A

undefined

主色: #000000 辅助色: #6B7280 强调色: #22C55E（仅用于高亮——边框、线条）浅色背景: #FFFFFF 深色背景: #0A0A0A

undefined

Notes

注意事项

Always show logo previews on both light (#FFFFFF) and dark (#0A0A0A) backgrounds
For wordmarks, ensure the product name is spelled exactly as found in project files
If no project context is found, ask the user for: product name, type, and purpose
Prefer simplicity - a logo should be recognizable at 16x16 pixels

始终在浅色（#FFFFFF）和深色（#0A0A0A）背景上展示标志预览
对于文字标志，确保产品名称与项目文件中的拼写完全一致
若未找到项目上下文，向用户询问：产品名称、类型和用途
优先保持简洁——标志在16x16像素尺寸下应仍可识别