svg-logo-maker
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseSVG Logo Maker
SVG Logo 生成器
Generate world-class minimalist SVG logos using svg.js for programmatic construction, browser-based visual verification, and automated SVG export.
Why svg.js? Writing raw SVG path data is extremely error-prone for AI. svg.js provides high-level shape methods (, , , , , , ) that map naturally to function calls — which AI excels at. The browser renders the result, enabling visual iteration.
rect()circle()polygon()group()gradient()mask()transform()使用svg.js进行程序化构建、基于浏览器的可视化验证以及自动化SVG导出，生成世界级的极简SVG logo。
为什么选择svg.js？ 编写原生SVG路径数据对AI来说极易出错。svg.js提供了高层形状方法（、、、、、、），这些方法自然对应函数调用——这正是AI擅长的领域。浏览器会渲染结果，支持可视化迭代优化。
rect()circle()polygon()group()gradient()mask()transform()Five Principles of Effective Logo Design
有效logo设计的五大原则
These principles guide every decision throughout the workflow. Evaluate all designs against them.
| Principle | What it means | Test |
|---|---|---|
| Simplicity | Express the message through clean, essential elements. Every line must earn its place. | Can you describe the logo in one sentence? |
| Timelessness | Root the design in enduring brand values, not trends. | Would this look dated in 10 years? |
| Uniqueness | Stand apart with original choices. Avoid clichéd symbols (lightbulbs for ideas, globes for "global"). | Could a competitor use the same concept? |
| Relevance | Match the audience, industry, and brand personality. A children's app needs different energy than a law firm. | Does it feel right for the target audience? |
| Readability | Text must be crisp at any size. Shapes must be recognizable at 32×32px. | Mentally shrink it to a favicon — does it survive? |
这些原则会指导工作流中的所有决策，请对照这些原则评估所有设计方案。
| 原则 | 含义 | 验证方法 |
|---|---|---|
| 简约性 | 通过简洁的核心元素传递信息，每一条线条都要有存在的意义 | 你能用一句话描述这个logo吗？ |
| ** timelessness（ timeless是专业设计术语保留？不，翻译为“持久性”）哦不对，持久性 | 设计要植根于持久的品牌价值，而非当下流行趋势 | 10年后这个设计会显得过时吗？ |
| 独特性 | 采用原创设计脱颖而出，避免陈腐的符号（比如用灯泡代表创意，用地球代表“全球化”） | 竞争对手会不会使用相同的设计概念？ |
| 相关性 | 匹配受众、行业和品牌个性，儿童应用需要的风格和律所完全不同 | 它符合目标受众的预期吗？ |
| 可读性 | 文本在任何尺寸下都要清晰锐利，形状在32×32px尺寸下仍可识别 | 想象把它缩小成favicon，它还能正常识别吗？ |
Reference Library
参考库
This skill bundles containing logos from leading global brands in two formats:
assets/| Format | Files | Purpose |
|---|---|---|
PNG ( | Visual reference images | Read these first — AI can visually parse PNG images to understand shape, proportion, color, negative space, and overall design quality. Use PNG files as the primary design inspiration source. |
SVG ( | Source vector code | Read these to study real-world SVG structure, path construction, optimization techniques, and how professional logos are built in code. |
Brands included: Apple, OpenAI, Anthropic, Claude, Claude Code, Cursor, Google, Figma, Meta, Midjourney, Grok, DeepSeek, Doubao, Moonshot, Ollama, Cloudflare, Microsoft, AWS, IBM, Gemini, Antigravity.
The reference logos are located at:
{SKILL_DIR}/assets/该技能捆绑了目录，包含全球头部品牌的logo，分为两种格式：
assets/| 格式 | 文件 | 用途 |
|---|---|---|
PNG ( | 可视化参考图 | 请优先读取这些文件——AI可以视觉解析PNG图像，理解形状、比例、颜色、负空间和整体设计质量，将PNG文件作为主要的设计灵感来源。 |
SVG ( | 矢量源码 | 读取这些文件学习真实场景的SVG结构、路径构建、优化技巧，以及专业logo是如何通过代码构建的。 |
包含的品牌：Apple、OpenAI、Anthropic、Claude、Claude Code、Cursor、Google、Figma、Meta、Midjourney、Grok、DeepSeek、豆包、Moonshot、Ollama、Cloudflare、Microsoft、AWS、IBM、Gemini、Antigravity。
参考logo位于：
{SKILL_DIR}/assets/How to Use the Reference Library
如何使用参考库
- Visual study (PNG): Before designing, read 3–5 PNG files relevant to the target industry/style using the Read tool. The AI can see the rendered logo, analyze its visual structure, and internalize design patterns that are impossible to learn from SVG code alone.
- Technical study (SVG): After visual study, read the corresponding SVG files to understand how the visual result was achieved in code — path construction, use of groups, transforms, gradients, and masks.
- Cross-reference: Always study both formats for the same logo. The PNG shows what to achieve; the SVG shows how to build it.
- 视觉学习（PNG）：设计前，使用读取工具读取3-5个和目标行业/风格相关的PNG文件。AI可以看到渲染后的logo，分析其视觉结构，内化仅通过SVG代码无法学到的设计模式。
- 技术学习（SVG）：视觉学习后，读取对应的SVG文件，了解如何通过代码实现视觉效果——包括路径构建、分组的使用、变换、渐变和遮罩。
- 交叉参考：同一个logo一定要同时学习两种格式，PNG告诉你要实现什么效果，SVG告诉你如何构建它。
Workflow
工作流
Phase 1 — Brand Identity & Requirement Gathering
阶段1——品牌身份与需求收集
A logo translates an entire brand identity into a single mark. Invest heavily in this phase — a logo built on shallow understanding will look generic.
logo将整个品牌身份转化为单一标识，请在这个阶段投入足够精力——基于浅层理解做出来的logo会非常通用没有特色。
1a. Brand Identity Deep-Dive
1a. 品牌身份深度挖掘
Extract or infer the following from the user's request. For minimal input, infer reasonable defaults and state assumptions explicitly.
| Dimension | What to capture | Why it matters |
|---|---|---|
| Brand name | Exact text (for wordmark/lettermark/monogram) | Determines letterform needs |
| Target audience | Demographics, shared interests, sophistication level | Shapes visual tone (playful vs. authoritative) |
| Core mission | One sentence describing the brand's purpose | Anchors the visual metaphor |
| Brand adjectives | 3–5 words describing the brand's personality (e.g. "bold, trustworthy, innovative") | Drives form language and color |
| Core values | 2–3 keywords the brand represents (e.g. "trust", "speed", "innovation") | Informs symbolism and shape choices |
| Industry / domain | Tech, finance, health, food, education, creative, etc. | Provides stylistic starting points |
从用户的请求中提取或推断以下信息，如果用户输入的信息很少，推断合理的默认值并明确说明假设。
| 维度 | 需要采集的信息 | 重要性 |
|---|---|---|
| 品牌名称 | 准确文本（用于文字商标/字母商标/字母组合标志） | 决定字形需求 |
| 目标受众 | 人口统计特征、共同兴趣、认知水平 | 决定视觉调性（活泼 vs 权威） |
| 核心使命 | 一句话描述品牌的目标 | 锚定视觉隐喻 |
| 品牌形容词 | 3-5个描述品牌个性的词汇（例如“大胆、可靠、创新”） | 决定形式语言和颜色 |
| 核心价值 | 品牌代表的2-3个关键词（例如“信任”、“速度”、“创新”） | 指导符号和形状选择 |
| 行业/领域 | 科技、金融、健康、食品、教育、创意等 | 提供风格起点 |
1b. Logo Requirements
1b. logo需求
| Dimension | What to capture |
|---|---|
| Logo type | Logomark, Letterform, Monogram, Wordmark, Abstract, Combination, or Emblem (see Logo Type Guide below) |
| Color preference | Specific hex values, or mood-based ("warm", "corporate blue", "monochrome") |
| Style cues | Geometric / organic / angular / rounded / abstract / figurative |
| Usage context | App icon, website header, favicon, print, all-purpose |
| Negative space | Any clever use of negative space requested |
| 维度 | 需要采集的信息 |
|---|---|
| logo类型 | 图形标识、字形标识、字母组合标识、文字商标、抽象标识、组合标识、徽章标识（见下方logo类型指南） |
| 颜色偏好 | 特定十六进制色值，或基于氛围的描述（“暖色调”、“企业蓝”、“单色”） |
| 风格提示 | 几何/有机/棱角/圆角/抽象/具象 |
| 使用场景 | 应用图标、网站头部、favicon、印刷、通用 |
| 负空间 | 是否需要巧妙运用负空间的需求 |
Logo Type Guide
logo类型指南
Choose the type that best serves the brand's needs:
| Type | Description | Best for | Examples |
|---|---|---|---|
| Wordmark | Full company name, typography-driven | Short, unique names | Coca-Cola, Google, FedEx |
| Letterform | Single letter | Well-known companies wanting a strong, compact identity | Facebook (F), Pinterest (P) |
| Monogram | Initials of the brand name | Established brands with long names | CNN, H&M, IBM |
| Abstract | Abstract shapes and symbols, no text | Brands wanting a modern, universal mark | Pepsi, Audi, Nike swoosh |
| Logomark | Figurative symbol representing the brand | Brands with a clear visual metaphor | Apple, Twitter bird |
| Combination | Text + symbol together | Brands wanting to leverage both | Airbnb, Dropbox, Doritos |
| Emblem | Text/symbol contained within a shape (badge, crest, seal) | Traditional, authoritative brands | Starbucks, BMW, Harley-Davidson |
选择最符合品牌需求的类型：
| 类型 | 描述 | 适用场景 | 示例 |
|---|---|---|---|
| 文字商标 | 完整公司名称，以字体设计为核心 | 简短独特的名称 | 可口可乐、Google、FedEx |
| 字形标识 | 单个字母 | 想要打造强识别性、紧凑标识的知名企业 | Facebook（F）、Pinterest（P） |
| 字母组合标识 | 品牌名称的首字母组合 | 名称较长的成熟品牌 | CNN、H&M、IBM |
| 抽象标识 | 抽象形状和符号，无文字 | 想要打造现代通用标识的品牌 | 百事、奥迪、耐克 swoosh |
| 图形标识 | 代表品牌的具象符号 | 有明确视觉隐喻的品牌 | 苹果、Twitter小鸟 |
| 组合标识 | 文字+符号结合 | 想要同时利用两者优势的品牌 | Airbnb、Dropbox、多力多滋 |
| 徽章标识 | 文字/符号包含在特定形状内（徽章、纹章、印章） | 传统、权威类品牌 | 星巴克、宝马、哈雷戴维森 |
Phase 2 — Visual Study of Reference Logos
阶段2——参考logo的视觉学习
MANDATORY before designing. Read PNG reference logos to build visual intuition.
- Select 3–5 reference logos from that are most relevant to the target brand's industry, style, or logo type. Use the Read tool to view the PNG files — AI can visually parse these images.
{SKILL_DIR}/assets/ - Read the corresponding SVG files for the selected logos to understand their construction technique.
- Document observations — For each reference logo studied, note:
- What makes the design effective (shape language, negative space, balance)
- What construction technique was used (geometric primitives, paths, masks)
- What can be borrowed or adapted for the current project
This visual study directly informs the design plan. Reference specific logos when justifying design decisions.
设计前必须完成该步骤。读取PNG参考logo建立视觉直觉。
- 从中选择3-5个和目标品牌的行业、风格或logo类型最相关的参考logo，使用读取工具查看PNG文件——AI可以视觉解析这些图像。
{SKILL_DIR}/assets/ - 读取选中logo对应的SVG文件，了解它们的构建技巧。
- 记录观察结果——对每个学习的参考logo，记录：
- 设计的有效之处（形状语言、负空间、平衡感）
- 使用的构建技巧（几何基元、路径、遮罩）
- 当前项目可以借鉴或调整的点
该视觉学习会直接为设计方案提供参考，在论证设计决策时可以引用具体的参考logo。
Phase 3 — Design Plan
阶段3——设计方案
Before writing any code, produce a structured design plan. Present it to the user for confirmation before proceeding.
编写任何代码前，先产出结构化的设计方案，先提交给用户确认再继续下一步。
Design Plan Template
设计方案模板
undefinedundefinedLogo Design Plan: [Brand Name]
Logo设计方案：[品牌名称]
1. Design Concept
1. 设计概念
- Core metaphor: [What real-world object/shape/idea the logo abstracts]
- Visual narrative: [One sentence describing what the viewer should "read" from the logo]
- Inspiration sources: [Which reference logos (from Phase 2 visual study) inform this direction and why — cite specific PNG files studied]
- Uniqueness check: [How this design avoids clichéd symbols and stands apart from competitors]
- 核心隐喻：[logo抽象化的真实物体/形状/创意]
- 视觉叙事：[一句话描述观看者能从logo中“读”到的信息]
- 灵感来源：[哪些来自阶段2视觉学习的参考logo为该方向提供了参考，以及原因——列出具体学习的PNG文件]
- 独特性检查：[该设计如何避免陈腐符号，和竞争对手形成差异]
2. Form Language
2. 形式语言
- Geometry: [Geometric primitives used — circles, rectangles, triangles, curves]
- Shape semantics: [Why these shapes were chosen — see Shape Psychology reference]
- Proportions: [Grid system, golden ratio, modular scale, or freeform]
- Negative space: [How white space participates in the design — any hidden forms or clever reveals]
- Optical balance: [Weight distribution and visual center of gravity]
- Visual hierarchy: [Which element draws the eye first, second, third]
- 几何特征：[使用的几何基元——圆形、矩形、三角形、曲线]
- 形状语义：[选择这些形状的原因——参考形状心理学参考]
- 比例：[网格系统、黄金比例、模块化比例、或自由形式]
- 负空间：[留白如何参与设计——是否有隐藏的形状或巧妙的呈现]
- 视觉平衡：[重量分布和视觉重心]
- 视觉层次：[元素吸引视线的优先级，第一、第二、第三分别是什么]
3. Typography (if applicable)
3. 排版（如适用）
- Font personality: [Display / Serif / Sans-serif / Monospace / Slab serif / Script — see Typography Guide]
- Letterform treatment: [Custom geometric construction, modified typeface, or hand-drawn feel]
- Weight and spacing: [Stroke width rationale, letter-spacing logic]
- Readability at scale: [How it reads at favicon size vs. billboard]
- 字体个性：[展示字体/衬线字体/无衬线字体/等宽字体/粗衬线字体/手写字体——参考排版指南]
- 字形处理：[自定义几何构建、修改后的字体、或手绘风格]
- 字重和间距：[描边宽度设计逻辑、字间距逻辑]
- 多尺寸可读性：[从favicon尺寸到广告牌尺寸的可读性表现]
4. Color Strategy
4. 色彩策略
- Design approach: Monochrome first, color second
- Monochrome version: [How the logo works in pure black on white]
- Primary palette: [Hex values with rationale — see Color Psychology reference]
- Color scheme type: [Complementary / Analogous / Triadic / Monochromatic — see Color Theory reference]
- Color meaning: [Psychological and cultural associations of chosen colors]
- Contrast check: [Sufficient contrast between elements for readability]
- 设计方法：优先单色设计，再添加色彩
- 单色版本：[logo在纯白背景下纯黑显示的效果]
- 主色调：[带设计逻辑的十六进制色值——参考色彩心理学参考]
- 配色方案类型：[互补色/邻近色/三角色/单色——参考色彩理论参考]
- 颜色含义：[所选颜色的心理和文化关联]
- 对比度检查：[元素之间有足够的对比度保证可读性]
5. Construction Plan
5. 构建方案
- svg.js strategy: [Which shapes, groups, transforms, masks to use]
- viewBox: [Dimensions, typically 0 0 512 512]
- Scalability target: [Favicon to billboard]
- Variants planned: [Primary logo, compact/icon variant, monochrome variant]
undefined- svg.js策略：[要使用的形状、分组、变换、遮罩]
- viewBox：[尺寸，通常是0 0 512 512]
- 可扩展性目标：[从favicon到广告牌]
- 计划的变体：[主logo、紧凑/图标变体、单色变体]
undefinedPhase 4 — SVG Construction with svg.js
阶段4——使用svg.js构建SVG
Do NOT write raw SVG markup. Use svg.js to construct the logo programmatically.
不要编写原生SVG标记，使用svg.js程序化构建logo。
Critical Rule: Monochrome First
关键规则：优先单色设计
Always build the logo in monochrome (black on white) first. This ensures the design works through form alone, without relying on color as a crutch. Only add color after the monochrome version passes visual review.
始终先构建单色（白底黑图）版本的logo，这可以确保设计仅通过形式就能成立，不会依赖颜色作为支撑。只有单色版本通过视觉审核后才能添加颜色。
Step 1: Create the HTML Workspace
步骤1：创建HTML工作区
Write a file named in the output directory with this scaffold:
_logo-workspace.htmlhtml
<!DOCTYPE html>
<html>
<head>
<title>Logo Workspace</title>
<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script>
<style>
body {
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
padding: 48px 24px;
min-height: 100vh;
background: #e8e8e8;
font-family: system-ui, sans-serif;
}
.preview {
background: white;
box-shadow: 0 4px 24px rgba(0,0,0,0.12);
}
.label {
font-size: 13px;
color: #666;
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.size-row {
display: flex;
gap: 24px;
align-items: end;
}
.size-item { text-align: center; }
textarea#svg-output {
position: fixed;
bottom: 0; left: 0;
width: 1px; height: 1px;
opacity: 0;
pointer-events: none;
}
</style>
</head>
<body>
<div>
<div class="label">Primary — 512×512</div>
<div id="canvas" class="preview"></div>
</div>
<div>
<div class="label">Scale test</div>
<div class="size-row">
<div class="size-item">
<div class="label">128px</div>
<div id="preview-128" class="preview"></div>
</div>
<div class="size-item">
<div class="label">64px</div>
<div id="preview-64" class="preview"></div>
</div>
<div class="size-item">
<div class="label">32px</div>
<div id="preview-32" class="preview"></div>
</div>
</div>
</div>
<textarea id="svg-output"></textarea>
<script>
var draw = SVG().addTo('#canvas').size(512, 512).viewbox(0, 0, 512, 512);
// ========== LOGO DRAWING CODE (MONOCHROME FIRST) ==========
// [AI writes svg.js code here — BLACK ON WHITE ONLY in first pass]
// ========== END LOGO CODE ==========
// --- Scale previews ---
var svgMarkup = draw.node.outerHTML;
[128, 64, 32].forEach(function(s) {
var el = document.getElementById('preview-' + s);
el.innerHTML = svgMarkup;
var svg = el.querySelector('svg');
svg.setAttribute('width', s);
svg.setAttribute('height', s);
});
// --- Export ---
var svgEl = draw.node;
svgEl.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
var output = svgEl.outerHTML;
output = output.replace(/\s*svgjs:data="[^"]*"/g, '');
output = output.replace(/\s*class="[^"]*"/g, '');
document.getElementById('svg-output').value = output;
</script>
</body>
</html>Key improvement over a single canvas: The workspace now shows scale previews at 128px, 64px, and 32px alongside the primary 512px canvas. This directly tests the Readability principle — if the logo is illegible at 32px, simplify before adding color.
Critical: The stores the exported SVG for extraction. Do not remove it.
<textarea id="svg-output">在输出目录下创建名为的文件，使用以下脚手架：
_logo-workspace.htmlhtml
<!DOCTYPE html>
<html>
<head>
<title>Logo Workspace</title>
<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script>
<style>
body {
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
padding: 48px 24px;
min-height: 100vh;
background: #e8e8e8;
font-family: system-ui, sans-serif;
}
.preview {
background: white;
box-shadow: 0 4px 24px rgba(0,0,0,0.12);
}
.label {
font-size: 13px;
color: #666;
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.size-row {
display: flex;
gap: 24px;
align-items: end;
}
.size-item { text-align: center; }
textarea#svg-output {
position: fixed;
bottom: 0; left: 0;
width: 1px; height: 1px;
opacity: 0;
pointer-events: none;
}
</style>
</head>
<body>
<div>
<div class="label">Primary — 512×512</div>
<div id="canvas" class="preview"></div>
</div>
<div>
<div class="label">Scale test</div>
<div class="size-row">
<div class="size-item">
<div class="label">128px</div>
<div id="preview-128" class="preview"></div>
</div>
<div class="size-item">
<div class="label">64px</div>
<div id="preview-64" class="preview"></div>
</div>
<div class="size-item">
<div class="label">32px</div>
<div id="preview-32" class="preview"></div>
</div>
</div>
</div>
<textarea id="svg-output"></textarea>
<script>
var draw = SVG().addTo('#canvas').size(512, 512).viewbox(0, 0, 512, 512);
// ========== LOGO DRAWING CODE (MONOCHROME FIRST) ==========
// [AI writes svg.js code here — BLACK ON WHITE ONLY in first pass]
// ========== END LOGO CODE ==========
// --- Scale previews ---
var svgMarkup = draw.node.outerHTML;
[128, 64, 32].forEach(function(s) {
var el = document.getElementById('preview-' + s);
el.innerHTML = svgMarkup;
var svg = el.querySelector('svg');
svg.setAttribute('width', s);
svg.setAttribute('height', s);
});
// --- Export ---
var svgEl = draw.node;
svgEl.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
var output = svgEl.outerHTML;
output = output.replace(/\s*svgjs:data="[^"]*"/g, '');
output = output.replace(/\s*class="[^"]*"/g, '');
document.getElementById('svg-output').value = output;
</script>
</body>
</html>相比单一画布的核心改进：该工作区现在会在主512px画布旁同时展示128px、64px和32px的缩放预览，可以直接测试可读性原则——如果logo在32px下无法识别，在添加颜色前先做简化。
关键：存储了导出的SVG用于提取，不要删除它。
<textarea id="svg-output">Step 2: Write the Drawing Code (Monochrome)
步骤2：编写绘制代码（单色）
Place svg.js code between the markers. Use only black ( or ) fills in the first pass. Prefer high-level shape methods over raw path data.
LOGO DRAWING CODE#000#1a1a1a将svg.js代码放在标记之间，首次迭代仅使用黑色（或）填充，优先使用高层形状方法而非原生路径数据。
LOGO DRAWING CODE#000#1a1a1asvg.js API Reference (Logo-Relevant Subset)
svg.js API参考（logo相关子集）
Shapes:
javascript
draw.rect(width, height) // Rectangle
draw.rect(w, h).radius(r) // Rounded rectangle
draw.circle(diameter) // Circle
draw.ellipse(width, height) // Ellipse
draw.line(x1, y1, x2, y2) // Line
draw.polygon('x1,y1 x2,y2 x3,y3') // Polygon (auto-closed)
draw.polyline('x1,y1 x2,y2 x3,y3') // Polyline (open)
draw.path('M0 0 L100 50 ...') // SVG path (complex curves only)Positioning & Sizing:
javascript
.move(x, y) // Absolute position (top-left corner)
.center(x, y) // Center element at position
.size(w, h) // Resize element
.dx(offset) // Relative horizontal shift
.dy(offset) // Relative vertical shiftStyling:
javascript
.fill(color) // '#f06', 'none', 'currentColor'
.fill({ color: '#f06', opacity: 0.8 }) // With opacity
.stroke({ width: 2, color: '#333' }) // Stroke
.stroke({ width: 2, color: '#333', linecap: 'round', linejoin: 'round' })
.opacity(0.5) // Element-level opacityTransforms:
javascript
.transform({ rotate: 45 }) // Rotate degrees
.transform({ rotate: 45, origin: [256, 256] }) // Rotate around point
.transform({ scale: 2 }) // Uniform scale
.transform({ translateX: 10, translateY: 20 }) // Translate
.transform({ rotate: 30 }, true) // Additive transformGroups (essential for complex logos):
javascript
var g = draw.group()
g.rect(100, 100).fill('#f06')
g.circle(80).fill('#0f9').center(50, 50)
g.move(100, 100) // Move entire group
g.transform({ rotate: 45 }) // Transform entire groupGradients:
javascript
var grad = draw.gradient('linear', function(add) {
add.stop(0, '#f06')
add.stop(0.5, '#ff0')
add.stop(1, '#0f9')
})
grad.from(0, 0).to(1, 1) // Diagonal direction
draw.rect(100, 100).fill(grad)
var radial = draw.gradient('radial', function(add) {
add.stop(0, '#fff')
add.stop(1, '#000')
})
draw.circle(100).fill(radial)Text (wordmarks/lettermarks):
javascript
draw.text('BRAND').font({
family: 'Helvetica, Arial, sans-serif',
size: 72,
anchor: 'middle',
weight: 'bold'
}).center(256, 256).fill('#333')Masks (negative space effects):
javascript
var mask = draw.mask()
mask.rect(512, 512).fill('#fff') // White = fully visible
mask.circle(100).center(256, 256).fill('#000') // Black = hidden
draw.rect(512, 512).fill('#f06').maskWith(mask) // Circle punched outClipping:
javascript
var clip = draw.clip()
clip.circle(200).center(256, 256)
draw.rect(512, 512).fill('#f06').clipWith(clip) // Only circle area visible形状：
javascript
draw.rect(width, height) // Rectangle
draw.rect(w, h).radius(r) // Rounded rectangle
draw.circle(diameter) // Circle
draw.ellipse(width, height) // Ellipse
draw.line(x1, y1, x2, y2) // Line
draw.polygon('x1,y1 x2,y2 x3,y3') // Polygon (auto-closed)
draw.polyline('x1,y1 x2,y2 x3,y3') // Polyline (open)
draw.path('M0 0 L100 50 ...') // SVG path (complex curves only)定位和尺寸：
javascript
.move(x, y) // Absolute position (top-left corner)
.center(x, y) // Center element at position
.size(w, h) // Resize element
.dx(offset) // Relative horizontal shift
.dy(offset) // Relative vertical shift样式：
javascript
.fill(color) // '#f06', 'none', 'currentColor'
.fill({ color: '#f06', opacity: 0.8 }) // With opacity
.stroke({ width: 2, color: '#333' }) // Stroke
.stroke({ width: 2, color: '#333', linecap: 'round', linejoin: 'round' })
.opacity(0.5) // Element-level opacity变换：
javascript
.transform({ rotate: 45 }) // Rotate degrees
.transform({ rotate: 45, origin: [256, 256] }) // Rotate around point
.transform({ scale: 2 }) // Uniform scale
.transform({ translateX: 10, translateY: 20 }) // Translate
.transform({ rotate: 30 }, true) // Additive transform分组（复杂logo的核心）：
javascript
var g = draw.group()
g.rect(100, 100).fill('#f06')
g.circle(80).fill('#0f9').center(50, 50)
g.move(100, 100) // Move entire group
g.transform({ rotate: 45 }) // Transform entire group渐变：
javascript
var grad = draw.gradient('linear', function(add) {
add.stop(0, '#f06')
add.stop(0.5, '#ff0')
add.stop(1, '#0f9')
})
grad.from(0, 0).to(1, 1) // Diagonal direction
draw.rect(100, 100).fill(grad)
var radial = draw.gradient('radial', function(add) {
add.stop(0, '#fff')
add.stop(1, '#000')
})
draw.circle(100).fill(radial)文本（文字商标/字形标识）：
javascript
draw.text('BRAND').font({
family: 'Helvetica, Arial, sans-serif',
size: 72,
anchor: 'middle',
weight: 'bold'
}).center(256, 256).fill('#333')遮罩（负空间效果）：
javascript
var mask = draw.mask()
mask.rect(512, 512).fill('#fff') // White = fully visible
mask.circle(100).center(256, 256).fill('#000') // Black = hidden
draw.rect(512, 512).fill('#f06').maskWith(mask) // Circle punched out裁剪：
javascript
var clip = draw.clip()
clip.circle(200).center(256, 256)
draw.rect(512, 512).fill('#f06').clipWith(clip) // Only circle area visibleConstruction Strategies
构建策略
Geometric logos: Build from , , . Use groups with transforms for symmetry — draw one segment, clone and rotate:
rect()circle()polygon()javascript
for (var i = 0; i < 6; i++) {
draw.rect(20, 80).center(256, 200).fill('#333')
.transform({ rotate: i * 60, origin: [256, 256] })
}Lettermark / Monogram logos: Construct from for straight strokes, for curves. Alternatively, use with web-safe geometric fonts for prototyping, then verify in browser.
rect()path()text()Abstract marks: Layer shapes with different fills. Use for boolean-like operations (subtract, intersect). Group related shapes for unified transforms.
mask()Negative space logos: Use — white areas reveal, black areas hide. Draw the positive shape first, then cut out the negative form.
mask()Emblem logos: Create an outer boundary shape (circle, shield, badge), then place text/symbol inside. Use to contain elements within the boundary.
clip()Symmetry patterns: Draw one unit in a group, then loop with rotational transforms:
javascript
var unit = draw.group()
unit.ellipse(40, 120).center(256, 190).fill('#f06')
for (var i = 1; i < 8; i++) {
unit.clone().transform({ rotate: i * 45, origin: [256, 256] }).addTo(draw)
}几何logo：使用、、构建，使用带变换的分组实现对称——绘制一个分段，克隆并旋转：
rect()circle()polygon()javascript
for (var i = 0; i < 6; i++) {
draw.rect(20, 80).center(256, 200).fill('#333')
.transform({ rotate: i * 60, origin: [256, 256] })
}字形标识/字母组合logo：使用构建直笔画，构建曲线。也可以使用配合网页安全几何字体进行原型设计，然后在浏览器中验证。
rect()path()text()抽象标识：叠加不同填充的形状，使用实现类似布尔运算的效果（相减、相交），将相关形状分组进行统一变换。
mask()负空间logo：使用——白色区域显示，黑色区域隐藏。先绘制正形，再切出负形。
mask()徽章标识：创建外边界形状（圆形、盾牌、徽章），然后在内部放置文本/符号，使用将元素限制在边界内。
clip()对称图案：在分组中绘制一个单元，然后通过旋转变换循环复制：
javascript
var unit = draw.group()
unit.ellipse(40, 120).center(256, 190).fill('#f06')
for (var i = 1; i < 8; i++) {
unit.clone().transform({ rotate: i * 45, origin: [256, 256] }).addTo(draw)
}Phase 5 — Browser Preview & Iteration
阶段5——浏览器预览与迭代
This is the critical advantage: visual feedback loop with structured critique.
这是核心优势：带结构化评审的视觉反馈循环。
Step 1: Preview
步骤1：预览
- Open the workspace in the browser:
browser_navigate → file:///absolute/path/to/_logo-workspace.html - Lock the browser for interaction:
browser_lock - Take a screenshot to capture the rendered logo:
browser_take_screenshot
- 在浏览器中打开工作区：
browser_navigate → file:///absolute/path/to/_logo-workspace.html - 锁定浏览器用于交互：
browser_lock - 截图捕获渲染后的logo：
browser_take_screenshot
Step 2: Structured Critique (Monochrome Pass)
步骤2：结构化评审（单色阶段）
Evaluate the monochrome version against this rubric:
| Criterion | Question | Action if fails |
|---|---|---|
| Simplicity | Can I describe this in one sentence? Are there elements I can remove without losing meaning? | Strip unnecessary shapes. |
| Readability | Does the 32px preview still read clearly? | Simplify or thicken elements. |
| Uniqueness | Could a competitor use the same basic concept? Is it a cliché symbol? | Rethink the metaphor. |
| Relevance | Does the form language match the brand personality and audience? | Revisit brand adjectives. |
| Optical balance | Does it feel centered? Is visual weight evenly distributed? | Adjust positioning; don't trust coordinates alone. |
| Negative space | Is white space purposeful? Any unintended trapped space? | Clean up gaps between shapes. |
| Proportions | Are stroke weights consistent? Do elements relate harmoniously? | Normalize widths and spacing. |
对照以下规则评估单色版本：
| 标准 | 问题 | 不通过的处理方式 |
|---|---|---|
| 简约性 | 我能用一句话描述它吗？有没有可以删除且不损失含义的元素？ | 移除不必要的形状 |
| 可读性 | 32px预览仍然清晰可识别吗？ | 简化或加粗元素 |
| 独特性 | 竞争对手会不会使用相同的基础概念？它是不是陈腐的符号？ | 重新思考隐喻 |
| 相关性 | 形式语言是否匹配品牌个性和受众？ | 重新回顾品牌形容词 |
| 视觉平衡 | 它看起来是居中的吗？视觉重量分布均匀吗？ | 调整位置，不要仅依赖坐标 |
| 负空间 | 留白是有目的性的吗？有没有意外的封闭空间？ | 清理形状之间的间隙 |
| 比例 | 描边重量一致吗？元素之间和谐匹配吗？ | 标准化宽度和间距 |
Step 3: Iterate (Monochrome)
步骤3：迭代（单色阶段）
If the monochrome design doesn't pass critique:
- Unlock the browser:
browser_unlock - Edit the JavaScript in
_logo-workspace.html - Re-lock and navigate to the same URL to reload
- Take another screenshot
- Repeat until the monochrome design is solid
如果单色设计没有通过评审：
- 解锁浏览器：
browser_unlock - 编辑中的JavaScript代码
_logo-workspace.html - 重新锁定并导航到同一个URL重新加载
- 再次截图
- 重复直到单色设计稳定达标
Step 4: Add Color
步骤4：添加颜色
Once the monochrome version is approved:
- Update the drawing code to replace black fills with the planned color palette
- Take a new screenshot
- Verify that color enhances (not replaces) the design's effectiveness
- Check that the color version still passes all critique criteria
单色版本通过后：
- 更新绘制代码，将黑色填充替换为规划的配色方案
- 截取新的截图
- 验证颜色是增强（而非替代）设计的有效性
- 检查彩色版本仍然通过所有评审标准
Step 5: Final Critique (Color Pass)
步骤5：最终评审（彩色阶段）
| Criterion | Question |
|---|---|
| Color harmony | Do colors work together? Is the scheme (complementary/analogous/triadic) coherent? |
| Color meaning | Do the chosen colors reinforce brand personality and values? |
| Contrast | Is there sufficient contrast between adjacent elements? |
| Monochrome resilience | If I desaturate, does the logo still work? (It should — you designed it monochrome first.) |
| Timelessness | Is the color palette classic or trendy? Avoid neon gradients that will date quickly. |
Target 2–4 iteration cycles total (monochrome + color). If more are needed, reconsider the design approach.
| 标准 | 问题 |
|---|---|
| 色彩和谐度 | 颜色搭配协调吗？配色方案（互补/邻近/三色）是统一的吗？ |
| 颜色含义 | 所选颜色是否强化了品牌个性和价值？ |
| 对比度 | 相邻元素之间有足够的对比度吗？ |
| 单色适应性 | 如果去饱和，logo仍然可用吗？（应该是可用的——你是先做的单色设计） |
| 持久性 | 配色方案是经典的还是流行的？避免很快就会过时的霓虹渐变。 |
总迭代次数目标为2-4次（单色+彩色），如果需要更多次，重新考虑设计方案。
Phase 6 — SVG Export & Variants
阶段6——SVG导出与变体
Once the logo looks correct in the browser:
-
Take a snapshot to find the textarea:
browser_snapshot → find ref for textarea#svg-output -
Extract the SVG string:
browser_get_input_value → ref of textarea#svg-output -
Post-process the SVG:
- Ensure is present on root
xmlns="http://www.w3.org/2000/svg"<svg> - Add as first child if not present
<title>[Brand Name]</title> - Remove any remaining svg.js artifacts (, generated
svgjs:dataattributes,idattributes)class - Ensure and
viewBox="0 0 512 512"are setwidth="512" height="512" - For monochrome logos, consider replacing color fills with
currentColor
- Ensure
-
Unlock the browser:
browser_unlock -
Save logo variants:
- Primary: — Full color version
{brand-name}-logo.svg - Monochrome: — Black-only version (replace all fills with
{brand-name}-logo-mono.svgor#000)currentColor - Compact/icon (if applicable): — Symbol only, no text, optimized for small sizes
{brand-name}-icon.svg
- Primary:
-
Delete the workspace — Removeusing the Delete tool.
_logo-workspace.html -
Confirm — "Logos saved to. Open them in a browser or SVG editor to preview."
{path}
logo在浏览器中显示正确后：
-
快照查找文本域：
browser_snapshot → find ref for textarea#svg-output -
提取SVG字符串：
browser_get_input_value → ref of textarea#svg-output -
SVG后处理：
- 确保根上存在
<svg>xmlns="http://www.w3.org/2000/svg" - 如果不存在，添加作为第一个子元素
<title>[品牌名称]</title> - 移除所有残留的svg.js产物（、生成的
svgjs:data属性、id属性）class - 确保设置了和
viewBox="0 0 512 512"width="512" height="512" - 对于单色logo，考虑将颜色填充替换为
currentColor
- 确保根
-
解锁浏览器：
browser_unlock -
保存logo变体：
- 主版本：— 全彩版本
{brand-name}-logo.svg - 单色版本：— 纯黑版本（将所有填充替换为
{brand-name}-logo-mono.svg或#000）currentColor - 紧凑/图标版本（如适用）：— 仅符号，无文本，针对小尺寸优化
{brand-name}-icon.svg
- 主版本：
-
删除工作区 — 使用删除工具移除。
_logo-workspace.html -
确认 — “logo已保存到，可以在浏览器或SVG编辑器中打开预览。”
{path}
Design Reference Guides
设计参考指南
Shape Psychology
形状心理学
Shapes carry emotional weight. Choose shapes that reinforce brand personality.
| Shape | Emotional associations | Best for |
|---|---|---|
| Circle | Unity, community, completeness, harmony, protection | Social platforms, global brands, inclusive brands |
| Square / Rectangle | Stability, reliability, order, professionalism, security | Finance, enterprise, construction, logistics |
| Triangle | Direction, energy, power, innovation, aspiration | Tech, fitness, leadership brands |
| Organic / Curves | Movement, fluidity, friendliness, natural growth | Health, wellness, food, creative agencies |
| Angular / Sharp | Precision, cutting-edge, boldness, disruption | Tech startups, gaming, engineering |
| Hexagon | Balance, efficiency, interconnection (beehive metaphor) | Tech, science, networks |
形状承载情感重量，选择能强化品牌个性的形状。
| 形状 | 情感关联 | 适用场景 |
|---|---|---|
| 圆形 | 团结、社区、完整性、和谐、保护 | 社交平台、全球品牌、包容性品牌 |
| 正方形/矩形 | 稳定、可靠、秩序、专业、安全 | 金融、企业、建筑、物流 |
| 三角形 | 方向、能量、力量、创新、抱负 | 科技、健身、领导类品牌 |
| 有机/曲线 | 动感、流畅、友好、自然生长 | 健康、养生、食品、创意机构 |
| 棱角/尖锐 | 精准、前沿、大胆、颠覆性 | 科技初创公司、游戏、工程 |
| 六边形 | 平衡、高效、互联（蜂窝隐喻） | 科技、科学、网络 |
Color Theory
色彩理论
Use established color relationships for harmonious palettes:
| Scheme | How it works | Effect |
|---|---|---|
| Monochromatic | Shades/tints of one hue | Clean, sophisticated, unified |
| Complementary | Opposite hues on the color wheel | High contrast, energetic |
| Analogous | Adjacent hues on the color wheel | Harmonious, natural, calming |
| Triadic | Three evenly-spaced hues | Vibrant, balanced, dynamic |
| Split-complementary | One hue + two neighbors of its complement | Contrast with less tension |
使用成熟的色彩关系打造和谐的配色方案：
| 方案 | 规则 | 效果 |
|---|---|---|
| 单色 | 同一色相的不同明暗/饱和度 | 简洁、高级、统一 |
| 互补色 | 色轮上相对的色相 | 高对比度、有活力 |
| 邻近色 | 色轮上相邻的色相 | 和谐、自然、平静 |
| 三角色 | 色轮上等距的三个色相 | 生动、平衡、有动感 |
| 分裂互补色 | 一个色相 + 其补色的两个相邻色相 | 有对比度且张力更低 |
Color Psychology
色彩心理学
| Color | Associations | Industries that use it |
|---|---|---|
| Blue | Trust, reliability, calm, professionalism | Finance, tech, healthcare, corporate |
| Red | Energy, urgency, passion, excitement | Food, entertainment, retail, sports |
| Green | Growth, health, nature, freshness, wealth | Wellness, sustainability, finance |
| Yellow / Gold | Optimism, warmth, clarity, prestige | Food, luxury, children's brands |
| Orange | Creativity, enthusiasm, friendliness | E-commerce, entertainment, youth brands |
| Purple | Luxury, creativity, wisdom, spirituality | Beauty, premium brands, education |
| Black | Sophistication, power, elegance, authority | Luxury, fashion, tech |
| White | Purity, simplicity, minimalism, space | Tech, healthcare, modern brands |
| Brown | Reliability, earthiness, warmth, security | Logistics (UPS), organic, outdoor brands |
| Teal / Cyan | Innovation, clarity, balance | AI/tech, wellness, modern enterprise |
| 颜色 | 关联含义 | 适用行业 |
|---|---|---|
| 蓝色 | 信任、可靠、冷静、专业 | 金融、科技、医疗、企业 |
| 红色 | 活力、紧急、热情、兴奋 | 食品、娱乐、零售、运动 |
| 绿色 | 成长、健康、自然、新鲜、财富 | 养生、可持续发展、金融 |
| 黄色/金色 | 乐观、温暖、清晰、尊贵 | 食品、奢侈品、儿童品牌 |
| 橙色 | 创意、热情、友好 | 电商、娱乐、年轻品牌 |
| 紫色 | 奢华、创意、智慧、灵性 | 美妆、高端品牌、教育 |
| 黑色 | 高级、力量、优雅、权威 | 奢侈品、时尚、科技 |
| 白色 | 纯净、简约、极简、空间 | 科技、医疗、现代品牌 |
| 棕色 | 可靠、质朴、温暖、安全 | 物流（UPS）、有机食品、户外品牌 |
| 青绿色/青色 | 创新、清晰、平衡 | AI/科技、养生、现代企业 |
Typography Guide (for Wordmarks, Lettermarks, Monograms)
排版指南（适用于文字商标、字形标识、字母组合标识）
| Font Type | Personality | Use when |
|---|---|---|
| Display | Decorative, unique, attention-grabbing | The brand is bold and distinctive |
| Serif | Timeless, professional, authoritative | Traditional, luxury, editorial brands |
| Sans-serif | Modern, minimal, readable | Tech, startups, clean brand identities |
| Monospace | Technical, retro, developer-oriented | Dev tools, tech brands, gaming |
| Slab serif | Powerful, authoritative, impactful | Brands wanting to command attention |
| Script | Elegant, creative, personal | Beauty, wedding, artisan brands |
When constructing letterforms programmatically with svg.js, prefer geometric construction (building letters from , , ) over for the final logo — this avoids font-dependency issues in the exported SVG.
rect()circle()path()text()| 字体类型 | 个性 | 适用场景 |
|---|---|---|
| 展示字体 | 装饰性、独特、吸睛 | 大胆有辨识度的品牌 |
| 衬线字体 | 经典、专业、权威 | 传统、奢侈品、出版类品牌 |
| 无衬线字体 | 现代、极简、易读 | 科技、初创公司、简洁品牌标识 |
| 等宽字体 | 技术感、复古、面向开发者 | 开发工具、科技品牌、游戏 |
| 粗衬线字体 | 有力、权威、有冲击力 | 想要吸引注意力的品牌 |
| 手写字体 | 优雅、创意、个性化 | 美妆、婚礼、手工艺品牌 |
使用svg.js程序化构建字形时，最终版本优先选择几何构建（用、、构建字母）而非——可以避免导出SVG的字体依赖问题。
rect()circle()path()text()Design Principles — Learn from the Best
设计原则——向优秀案例学习
Study the reference logos in before generating. Read the PNG files to visually see each logo; read the SVG files to understand construction. Key patterns:
assets/Apple — Single iconic silhouette. One path, one shape, universally recognized. The bite creates asymmetry and memorability.
OpenAI — Mathematical precision through geometric symmetry. Hexagonal knot with interlocking paths.
Anthropic — Lettermark reduced to pure geometry. Bold, structural, unmistakable at any size.
Cursor — 3D prism rendered flat. Light/shadow division creates depth illusion from a single shape.
Figma — Modular building blocks. Rounded rectangles in a grid, each a different color. Simple parts, complex whole.
Google — Letter "G" from four simple arcs. Color segmentation creates recognition from pure geometry.
FedEx — Hidden arrow in negative space between "E" and "x" — a discovery moment that reinforces the brand promise.
Nike — Abstract swoosh suggests motion and energy. No text needed. Ultimate simplicity.
Starbucks — Emblem containing a detailed illustration within a circular boundary. Shows that emblems can carry complexity inside a clean frame.
生成前请学习中的参考logo，读取PNG文件直观查看每个logo，读取SVG文件了解构建方式。核心模式：
assets/Apple — 单一标志性轮廓，一条路径、一个形状，全球通用。缺口创造了不对称性和记忆点。
OpenAI — 通过几何对称实现数学精度，带有互锁路径的六边形结。
Anthropic — 字形标识简化为纯几何形式，加粗、结构化，任何尺寸下都不会认错。
Cursor — 扁平化渲染的3D棱镜，光影分割从单一形状创造出深度错觉。
Figma — 模块化构建块，网格中的圆角矩形，每个都有不同颜色。部分简单，整体复杂。
Google — 字母“G”由四个简单的弧构成，色彩分割从纯几何形状实现识别性。
FedEx — “E”和“x”之间负空间中的隐藏箭头——这个发现时刻强化了品牌承诺。
Nike — 抽象swoosh暗示动感和活力，不需要文字，极致简约。
星巴克 — 圆形边界内包含精细插画的徽章，说明徽章可以在干净的框架内承载复杂度。
Quality Checklist
质量检查清单
Before finalizing, verify against all five principles:
Simplicity:
- Can describe the logo in one sentence
- No unnecessary elements — every shape carries meaning
- 5 or fewer shape groups in the final design
- File size under 5KB (ideally under 2KB)
Timelessness:
- Avoids trendy gradients, textures, or effects
- Would look appropriate 10 years from now
- Design rooted in brand values, not aesthetics of the moment
Uniqueness:
- No clichéd symbols (lightbulb, globe, generic swoosh)
- Distinct from competitors in the same industry
- Contains a memorable detail or hidden meaning
Relevance:
- Form language matches brand personality (adjectives from Phase 1)
- Color choices align with industry and audience expectations
- Appropriate tone (playful vs. professional vs. luxurious)
Readability:
- Browser screenshot shows a clean, professional logo
- 32px preview is still legible and recognizable
- Text elements (if any) are crisp at all sizes
- Sufficient contrast between elements
- Optically centered with 8–12% padding within viewBox
Technical quality:
- Monochrome version works independently
- No overlapping shapes creating unintended artifacts
- Final file is clean — no svg.js artifacts, no unnecessary IDs/classes
.svg - Valid SVG parseable by any browser
- Logo variants delivered (primary, monochrome, compact/icon if applicable)
最终确定前，对照所有五大原则验证：
简约性：
- 能用一句话描述该logo
- 没有不必要的元素——每个形状都承载含义
- 最终设计的形状分组不超过5个
- 文件大小小于5KB（理想情况下小于2KB）
持久性：
- 避免流行的渐变、纹理或效果
- 10年后看起来仍然合适
- 设计植根于品牌价值，而非当下的审美
独特性：
- 没有陈腐的符号（灯泡、地球、通用swoosh）
- 和同行业的竞争对手有差异
- 包含值得记忆的细节或隐藏含义
相关性：
- 形式语言匹配品牌个性（阶段1的形容词）
- 颜色选择符合行业和受众预期
- 调性合适（活泼 vs 专业 vs 奢华）
可读性：
- 浏览器截图显示清晰专业的logo
- 32px预览仍然清晰可识别
- 文本元素（如有）在所有尺寸下都锐利
- 元素之间有足够的对比度
- 视觉居中，viewBox内有8-12%的内边距
技术质量：
- 单色版本可以独立使用
- 没有重叠形状造成的意外瑕疵
- 最终文件干净——没有svg.js产物，没有不必要的ID/类
.svg - 是可被任何浏览器解析的有效SVG
- 交付了logo变体（主版本、单色、紧凑/图标版本如适用）
Common Pitfalls
常见陷阱
- Skipping the brand identity deep-dive: A logo built on "make something cool" will be generic. Invest in Phase 1.
- Jumping to color: Design monochrome first. Color should enhance, never rescue, a weak form.
- Over-complexity: 5+ shape groups in a minimalist logo = too complex. Simplify.
- Tiny vanishing details: If invisible at 32×32, remove it. The scale test in the workspace catches this.
- Generic shapes: Every shape must carry brand-specific meaning. Avoid "abstract blob" designs.
- Clichéd symbols: Lightbulbs for ideas, globes for global, gears for engineering — find a fresher metaphor.
- Poor optical centering: Use screenshots to visually verify — don't trust coordinates alone.
- Inconsistent stroke weights: Maintain visual weight consistency across elements.
- Raw path data: Only use for curves impossible to build from primitives. Prefer
draw.path(),rect(),circle(),polygon()+ transforms.group() - Skipping iteration: ALWAYS preview in browser. Never ship a logo without visual verification.
- Single variant delivery: Always deliver at minimum a color and monochrome version.
- 跳过品牌身份深度挖掘：基于“做个酷的东西”做出来的logo会很通用，在阶段1投入足够精力。
- 直接跳到颜色设计：优先做单色设计，颜色应该是增强设计，而不是拯救糟糕的形式。
- 过度复杂：极简logo有5个以上的形状组=太复杂，做简化。
- 微小的消失细节：如果在32×32下不可见，就移除它，工作区的缩放测试可以发现这个问题。
- 通用形状：每个形状都必须承载品牌特有的含义，避免“抽象 blob”设计。
- 陈腐符号：灯泡代表创意，地球代表全球化，齿轮代表工程——找更新颖的隐喻。
- 视觉居中效果差：使用截图视觉验证——不要仅依赖坐标。
- 描边重量不一致：保持元素之间的视觉重量一致。
- 使用原生路径数据：只有当曲线无法用基元构建时才使用，优先使用
draw.path()、rect()、circle()、polygon()+ 变换。group() - 跳过迭代：一定要在浏览器中预览，永远不要在没有视觉验证的情况下交付logo。
- 只交付单个变体：至少要交付彩色和单色两个版本。
Style Direction by Industry
按行业划分的风格方向
| Industry | Typical Form Language | Color Direction | Shape Tendency |
|---|---|---|---|
| Tech / AI | Geometric, angular, interconnected nodes | Blues, gradients, monochrome | Hexagons, triangles, sharp angles |
| Finance | Stable, symmetrical, strong horizontals | Navy, gold, dark green | Squares, rectangles, shields |
| Health | Organic curves, rounded, flowing | Greens, teals, warm whites | Circles, curves, organic forms |
| Food & Beverage | Warm, hand-crafted feel, circular | Earthy tones, reds, oranges | Circles, organic shapes |
| Education | Open, ascending, book/light metaphors | Blues, greens, warm yellows | Upward triangles, open books |
| Creative / Design | Asymmetric, bold, unconventional | Vibrant, multi-color, black | Mixed, rule-breaking |
| E-commerce | Dynamic, forward-moving, arrow motifs | Oranges, blues, clean whites | Arrows, dynamic angles |
| Gaming | Sharp, angular, energetic | Neons, dark backgrounds, high contrast | Sharp angles, bold geometry |
| Luxury | Refined, minimal, high contrast | Black, gold, deep jewel tones | Thin lines, serif letterforms |
| Children / Education | Rounded, playful, friendly | Bright primaries, pastels | Circles, soft rounded shapes |
These are starting points, not rules. Break conventions when the brand demands it.
| 行业 | 典型形式语言 | 色彩方向 | 形状倾向 |
|---|---|---|---|
| 科技/AI | 几何、棱角、互联节点 | 蓝色、渐变、单色 | 六边形、三角形、锐角 |
| 金融 | 稳定、对称、强水平线条 | 海军蓝、金色、深绿 | 正方形、矩形、盾牌 |
| 健康 | 有机曲线、圆角、流畅 | 绿色、青色、暖白 | 圆形、曲线、有机形状 |
| 食品饮料 | 温暖、手工感、圆形 | 大地色调、红色、橙色 | 圆形、有机形状 |
| 教育 | 开放、上升、书本/光线隐喻 | 蓝色、绿色、暖黄色 | 向上的三角形、打开的书本 |
| 创意/设计 | 不对称、大胆、非传统 | 鲜艳、多色、黑色 | 混合、打破规则 |
| 电商 | 动感、向前、箭头 motif | 橙色、蓝色、干净白色 | 箭头、动态角度 |
| 游戏 | 锐利、棱角、有活力 | 霓虹色、深色背景、高对比度 | 锐角、粗体几何 |
| 奢侈品 | 精致、极简、高对比度 | 黑色、金色、深宝石色调 | 细线条、衬线字形 |
| 儿童/教育 | 圆角、活泼、友好 | 明亮三原色、马卡龙色 | 圆形、软圆角形状 |
这些只是起点，不是规则，如果品牌需要可以打破惯例。