brand

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Brand Identity & Visual Design

品牌标识与视觉设计

A brand is not a logo. It's the gut feeling people have about your product. This skill helps you make the decisions that define your brand — then hand them to Claude Code to implement everywhere.

品牌并非只是一个logo，而是人们对产品的直观感受。此技能可帮助你做出定义品牌的决策，随后交由Claude Code在全产品中落地实现。

Core Principles

核心原则

Consistency is more important than creativity. A mediocre system applied consistently beats brilliant one-offs.
Visual design should make the product feel inevitable — like it couldn't look any other way.
Every SaaS product should feel: trustworthy, modern, and clear. Your differentiator comes on top of these.
Design for recognition at every scale: favicon, app icon, social preview, full-screen dashboard.

一致性比创意更重要。一套平庸但始终贯彻的系统，胜过零散的出色设计。
视觉设计应让产品看起来“本该如此”——仿佛它不可能有其他呈现方式。
每个SaaS产品都应给人可靠、现代、清晰的感受，差异化特性在此基础上构建。
为不同尺寸场景设计辨识度：网站图标（favicon）、应用图标、社交预览图、全屏仪表盘。

What You Decide vs. What AI Implements

由你决策 vs 由AI落地

You Decide	Claude Code Implements
Primary brand color (emotional fit for your audience)	All tints, shades, hover/active states
Whether the tone is warm or cool	Full neutral scale (9-11 shades)
Heading font and body font	Typography scale, weights, line heights
Brand voice (casual vs. formal)	Consistent application across UI
Whether to support dark mode at launch	Dark mode color mapping
Icon style (rounded, squared, minimal)	Icon integration throughout app

Rule: Make the creative decisions. Let AI handle the math, code, and consistency.

由你决策	Claude Code 落地
主品牌色（契合目标受众的情感定位）	所有色调、明暗变体、悬停/激活状态
色调偏暖或偏冷	完整的中性色阶（9-11种明暗）
标题字体与正文字体	排版层级、字重、行高
品牌语气（随意 vs 正式）	在UI中保持一致应用
上线时是否支持深色模式	深色模式色彩映射
图标风格（圆角、方形、极简）	在全应用中整合图标

规则： 你负责创意决策，让AI处理计算、代码和一致性落地工作。

Color System

色彩系统

You need three things:

你需要确定三件事：

1. Primary Color (You Pick This)

1. 主品牌色（由你选择）

Your brand's signature. Used for buttons, links, and key accents.

How to choose:

What emotion should your product evoke? (Blue = trust, Green = growth, Purple = premium, Orange = energy)
Look at competitors — pick something that stands out from them
Test it: does it look good as a button on a white background?

Tell AI:

My brand's primary color is [your hex code or color name].
Generate a full color system:
- Primary scale (50-900 tints)
- Neutral scale (warm/cool gray, 50-900)
- Semantic colors (success green, warning amber, error red, info blue)
- Surface colors (background, card, elevated, overlay)
Apply this as CSS custom properties and/or Tailwind config.

品牌的标志性色彩，用于按钮、链接和关键强调元素。

选择方法：

你的产品想要唤起什么情感？（蓝色=信任，绿色=成长，紫色=高端，橙色=活力）
参考竞品——选择能脱颖而出的颜色
测试：它在白色背景上作为按钮显示效果是否良好？

告知AI：

My brand's primary color is [your hex code or color name].
Generate a full color system:
- Primary scale (50-900 tints)
- Neutral scale (warm/cool gray, 50-900)
- Semantic colors (success green, warning amber, error red, info blue)
- Surface colors (background, card, elevated, overlay)
Apply this as CSS custom properties and/or Tailwind config.

2. Neutral Scale (AI Generates This)

2. 中性色阶（由AI生成）

9-11 shades from near-white to near-black. This does 80% of the work in your UI (text, backgrounds, borders). AI generates this from your warm/cool preference.

从近乎白色到近乎黑色的9-11种色调，承担UI中80%的视觉工作（文本、背景、边框）。AI会根据你偏好的冷暖色调生成。

3. Semantic Colors (AI Generates This)

3. 语义色彩（由AI生成）

Success (green), Warning (amber), Error (red), Info (blue). AI picks these to not clash with your primary color.

成功色（绿色）、警告色（琥珀色）、错误色（红色）、信息色（蓝色）。AI会选择与主品牌色不冲突的色彩。

Typography

排版

Two decisions to make:

Heading font: Pick one with personality but legibility. Good defaults for SaaS: Inter, Plus Jakarta Sans, Outfit, Geist.
Body font: Prioritize readability at 14-16px. Often the same as headings.

Tell AI:

My heading font is [font name] and body font is [font name].
Set up a typography system:
- Scale: 0.75rem to 3rem
- Weights: Regular (400) for body, Medium (500) for emphasis, Semibold (600) for headings
- Line heights optimized for readability
- Apply across all headings, body text, and UI elements.

Skip for now: Monospace font selection. Only matters if your product shows code or data tables — Claude Code will pick a sensible default.

需要做出两个决策：

标题字体： 选择兼具个性与可读性的字体。SaaS产品的优质默认选项：Inter、Plus Jakarta Sans、Outfit、Geist。
正文字体： 优先保障14-16px尺寸下的可读性，通常可与标题字体保持一致。

告知AI：

My heading font is [font name] and body font is [font name].
Set up a typography system:
- Scale: 0.75rem to 3rem
- Weights: Regular (400) for body, Medium (500) for emphasis, Semibold (600) for headings
- Line heights optimized for readability
- Apply across all headings, body text, and UI elements.

可暂不考虑： 等宽字体选择。仅当产品需展示代码或数据表格时才重要——Claude Code会选择合理的默认选项。

Logo

Logo设计

Most solo founders should NOT design their own logo. Instead:

Minimum viable logo:

Choose a clean sans-serif font
Type your product name
Pick your primary brand color

Tell AI:

Create a simple text-based logo for [product name]:
- Font: [your heading font] in Semibold
- Color: [your primary color]
- Create versions: full wordmark, icon-only (first letter or abbreviation), favicon (16x16)
- Export as SVG for web

Requirements for any logo:

Works at 16x16 (favicon), 32x32, and full size
Horizontal lockup (icon + wordmark) for headers
Icon-only version for compact spaces
Works on light and dark backgrounds
SVG format for web (not PNG)

When to invest in a real logo: After you've validated your product and have paying customers. Budget $200-500 for a freelance designer on Fiverr or 99designs. Don't spend $5,000 pre-launch.

大多数独立创始人不应自行设计logo，而是：

最简可行logo：

选择简洁的无衬线字体
输入产品名称
选择主品牌色

告知AI：

Create a simple text-based logo for [product name]:
- Font: [your heading font] in Semibold
- Color: [your primary color]
- Create versions: full wordmark, icon-only (first letter or abbreviation), favicon (16x16)
- Export as SVG for web

任何logo需满足的要求：

在16x16（网站图标）、32x32以及全尺寸下均显示良好
支持横向组合（图标+文字），用于页眉
支持仅图标版本，用于紧凑空间
在浅色和深色背景上均适配
采用SVG格式用于网页（而非PNG）

何时投资专业logo： 在验证产品可行性并拥有付费客户之后。可在Fiverr或99designs上花费200-500美元聘请自由设计师，不要在预上线阶段花费5000美元。

Icons

图标

One decision: pick an icon library and stick with it.

Style	Library	Best For
Rounded/friendly	Lucide	Consumer SaaS, creative tools
Clean/professional	Heroicons	Business SaaS, dashboards
Versatile/detailed	Phosphor	Products needing many icon variants

Tell AI:

Use [Lucide/Heroicons/Phosphor] icons throughout the app.
Never mix icon libraries. Keep icons at consistent sizes (16px inline, 20px buttons, 24px navigation).

一个决策：选择一个图标库并坚持使用。

风格	库名称	最佳适用场景
圆角/友好型	Lucide	面向消费者的SaaS、创意工具
简洁/专业型	Heroicons	企业级SaaS、仪表盘
多功能/细节丰富型	Phosphor	需要多种图标变体的产品

告知AI：

Use [Lucide/Heroicons/Phosphor] icons throughout the app.
Never mix icon libraries. Keep icons at consistent sizes (16px inline, 20px buttons, 24px navigation).

Brand Voice Attributes

品牌语气属性

Define 3-4 positions on these spectrums. These feed into copywriting and UI text decisions:

Casual ←————→ Formal
Playful ←————→ Serious
Technical ←————→ Approachable
Bold ←————→ Understated

Example: A project management tool for freelancers might be: Casual, Slightly Playful, Approachable, Bold.

Tell AI:

Our brand voice is [casual/formal], [playful/serious], [approachable/technical], and [bold/understated].
Apply this tone to all UI copy, error messages, and empty states.

在以下维度中定义3-4个定位，这些将影响文案撰写和UI文本决策：

随意 ←————→ 正式
活泼 ←————→ 严肃
技术向 ←————→ 易上手
大胆 ←————→ 低调

示例： 面向自由职业者的项目管理工具可定位为：随意、略带活泼、易上手、大胆。

告知AI：

Our brand voice is [casual/formal], [playful/serious], [approachable/technical], and [bold/understated].
Apply this tone to all UI copy, error messages, and empty states.

Social Preview / OG Image

社交预览图/OG图片

Every page needs an Open Graph image for social sharing.

Size: 1200x630px
Template: Brand color background + page title in heading font + product logo in corner

Tell AI:

Create a reusable OG image template:
- Background: our primary color (or gradient)
- Title text: white, our heading font, centered
- Logo: small, bottom-right corner
- Generate dynamically for blog posts using page title.

每个页面都需要用于社交分享的Open Graph图片。

尺寸：1200x630px
模板：品牌色背景 + 标题字体的页面标题 + 角落处的产品logo

告知AI：

Create a reusable OG image template:
- Background: our primary color (or gradient)
- Title text: white, our heading font, centered
- Logo: small, bottom-right corner
- Generate dynamically for blog posts using page title.

Dark Mode (Decide Later)

深色模式（后续决策）

For your MVP, ship light mode only. Dark mode is a nice-to-have that doubles your design surface area.

When to add dark mode:

Users are requesting it
Your product is used for long sessions (dashboards, writing tools, dev tools)
You're past MVP and have bandwidth

When you're ready, Tell AI:

Add dark mode support:
- Background: dark gray (#111), not pure black
- Cards: slightly lighter than background (#1a1a1a)
- Text: off-white (#e5e5e5 body, #fafafa headings), not pure white
- Adjust primary color if needed for contrast
- Use CSS custom properties so themes switch cleanly
- Add a toggle in the header/settings

对于MVP（最小可行产品），仅推出浅色模式即可。深色模式是锦上添花的功能，会使设计工作量翻倍。

何时添加深色模式：

用户提出相关需求
产品需长时间使用（仪表盘、写作工具、开发工具）
已完成MVP阶段且有足够精力

准备好后，告知AI：

Add dark mode support:
- Background: dark gray (#111), not pure black
- Cards: slightly lighter than background (#1a1a1a)
- Text: off-white (#e5e5e5 body, #fafafa headings), not pure white
- Adjust primary color if needed for contrast
- Use CSS custom properties so themes switch cleanly
- Add a toggle in the header/settings

Common Mistakes

常见误区

Mistake	Fix
Spending weeks on branding before validating	Pick a color, font, and name. Ship. Rebrand after PMF
Mixing icon libraries	Pick one, use it everywhere
Pure black backgrounds in dark mode	Use #111 or #0a0a0a, not #000
Inconsistent color usage	Define system once, reference everywhere
Designing a logo before having customers	Use text-based logo until post-validation
Overthinking typography	Inter or your heading font for everything. Done

误区	解决方法
在验证产品前花费数周时间做品牌	选择一种颜色、字体和名称，发布产品。找到产品市场契合点（PMF）后再重新品牌化
混合使用不同图标库	选择一个库，在全产品中统一使用
深色模式中使用纯黑色背景	使用#111或#0a0a0a，而非#000
色彩使用不一致	一次性定义系统，全产品统一引用
在拥有客户前设计logo	在验证产品可行性前使用文字型logo
过度纠结排版	全产品使用Inter或你选择的标题字体即可，无需复杂设置

Output Format

输出格式

When creating or reviewing brand identity:

Decisions: What primary color, fonts, icon library, and voice attributes were chosen
System: Color scale, type scale, and spacing as CSS properties or Tailwind config
Application: Show how system applies across 2-3 contexts (button, card, page header)
Assets: Logo versions, OG image template, favicon

创建或审核品牌标识时：

决策记录： 所选的主品牌色、字体、图标库以及语气属性
设计系统： 色彩层级、排版层级和间距，以CSS属性或Tailwind配置形式呈现
应用示例： 展示系统在2-3个场景中的应用（按钮、卡片、页面页眉）
资产交付： 不同版本的logo、OG图片模板、网站图标