logo-designer

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Logo Designer

Logo设计工具

Design and iterate on logos using SVG. Generates side-by-side previews and exports to PNG at standard sizes.

使用SVG设计并迭代Logo，可生成并排预览效果，并导出为标准尺寸的PNG文件。

Phase 1: Interview

第一阶段：需求调研

Before generating anything, gather context and ask the user what they need.

在生成任何内容前，先收集上下文，询问用户的需求。

Step 1: Gather context automatically

步骤1：自动收集上下文

If the user points to a repo, URL, or existing project:

Read the README, package.json, CSS/config files, and any existing branding
Extract: project name, purpose, tech stack, color palette, design language, fonts
Summarize what you found before asking questions — this avoids asking things you already know

If the user just says "design a logo" with no project context, skip to Step 2.

如果用户指向仓库、URL或现有项目：

读取README、package.json、CSS/配置文件，以及任何现有品牌资料
提取：项目名称、用途、技术栈、配色方案、设计语言、字体
在提问前总结你收集到的信息，避免询问已经知晓的内容

如果用户仅说「设计一个logo」且没有项目背景，直接跳转到步骤2。

Step 2: Ask structured questions

步骤2：结构化提问

Use the

AskUserQuestion

tool to ask these questions. Batch related questions together (up to 4 per call) and skip any question already answered by the context gathered in Step 1 or by the user's initial message.

Question 1 — Format:

question: "What format do you need?"
header: "Format"
options:
  - label: "Icon only (512x512)"
    description: "Square icon, works for favicons, app icons, social avatars"
  - label: "Wordmark only"
    description: "Text logo, 1024x512"
  - label: "Combination mark"
    description: "Icon + text together, 1024x512"

Question 2 — Style direction:

question: "What style direction?"
header: "Style"
options:
  - label: "Minimal / geometric"
    description: "Clean lines, simple shapes, modern feel"
  - label: "Playful / hand-drawn"
    description: "Friendly, casual, organic shapes"
  - label: "Bold / corporate"
    description: "Strong, professional, high contrast"
  - label: "Match existing app style"
    description: "I'll extract the design language from your project"

Question 3 — Color preferences:

question: "Any color preferences?"
header: "Colors"
options:
  - label: "Use project colors"
    description: "I'll pull colors from your existing design system"
  - label: "Surprise me"
    description: "I'll pick a palette that fits the vibe"
  - label: "I have specific colors"
    description: "I'll ask you for them"

Question 4 — Output size (only if the user mentioned a specific platform):

question: "Any specific size requirements?"
header: "Size"
options:
  - label: "Standard sizes"
    description: "16, 32, 48, 192, 512, 1024, 2048px — covers most uses"
  - label: "Custom size needed"
    description: "I'll ask for the exact dimensions"

使用

AskUserQuestion

工具询问以下问题。将相关问题合并批量提问（每次调用最多4个问题），跳过步骤1收集的上下文或用户初始消息中已经回答过的问题。

问题1 — 格式：

question: "What format do you need?"
header: "Format"
options:
  - label: "Icon only (512x512)"
    description: "Square icon, works for favicons, app icons, social avatars"
  - label: "Wordmark only"
    description: "Text logo, 1024x512"
  - label: "Combination mark"
    description: "Icon + text together, 1024x512"

问题2 — 风格方向：

question: "What style direction?"
header: "Style"
options:
  - label: "Minimal / geometric"
    description: "Clean lines, simple shapes, modern feel"
  - label: "Playful / hand-drawn"
    description: "Friendly, casual, organic shapes"
  - label: "Bold / corporate"
    description: "Strong, professional, high contrast"
  - label: "Match existing app style"
    description: "I'll extract the design language from your project"

问题3 — 配色偏好：

question: "Any color preferences?"
header: "Colors"
options:
  - label: "Use project colors"
    description: "I'll pull colors from your existing design system"
  - label: "Surprise me"
    description: "I'll pick a palette that fits the vibe"
  - label: "I have specific colors"
    description: "I'll ask you for them"

问题4 — 输出尺寸（仅当用户提及特定平台时询问）：

question: "Any specific size requirements?"
header: "Size"
options:
  - label: "Standard sizes"
    description: "16, 32, 48, 192, 512, 1024, 2048px — covers most uses"
  - label: "Custom size needed"
    description: "I'll ask for the exact dimensions"

Adapting to context

适配上下文场景

User points to a repo: Gather context first, then ask only format + style (colors are likely known).
User says "design a logo for X": Ask format, style, and colors together.
User gives detailed description: Skip everything already covered, ask only what's missing.
User says "just make something": Use sensible defaults (icon only, minimal, surprise me) and go straight to Phase 2.

Move to Phase 2 once you have enough to generate distinct concepts.

用户指向仓库： 先收集上下文，仅询问格式+风格（配色大概率已知晓）。
用户说「给X设计一个logo」： 同时询问格式、风格和配色。
用户给出详细描述： 跳过所有已覆盖的内容，仅询问缺失的信息。
用户说「随便做一个就行」： 使用合理默认值（仅图标、极简风格、随机配色）直接进入第二阶段。

收集到足够信息可以生成差异化概念方案后，进入第二阶段。

SVG Conventions

SVG规范

When generating SVG logos, follow these rules:

viewBox sizing — Always use
```
viewBox="0 0 W H"
```
without fixed
```
width
```
/
```
height
```
attributes. Use 512x512 for icons, 1024x512 for wordmarks/combination marks.
Self-contained — No external fonts, images, or
```
<use>
```
references to other files. Everything inline.
Text handling — Use widely available system fonts (Arial, Helvetica, Georgia, etc.) or convert text to
```
<path>
```
elements. When using system fonts, always include a generic fallback (e.g.,
```
font-family="Helvetica, Arial, sans-serif"
```
).
Meaningful groups — Wrap logical sections in
```
<g>
```
elements with descriptive IDs:
```
id="icon"
```
,
```
id="wordmark"
```
,
```
id="tagline"
```
. This makes iteration easier when the user says "make the icon bigger" or "change the wordmark color".
Flat fills by default — Use solid
```
fill
```
colors. Only use gradients (
```
<linearGradient>
```
,
```
<radialGradient>
```
) when the user requests them or the style clearly calls for it.
Small-size legibility — Logos must work at 16-32px (favicons). Prefer solid fills over thin strokes, avoid fine details that disappear at small sizes, and use
```
stroke-width
```
of 6+ for any outlines that need to remain visible. Test this mentally: if a detail won't survive being 32px wide, simplify it.
Clean markup — No unnecessary transforms, no empty groups, no default namespace clutter. Keep the SVG readable.

生成SVG logo时，请遵循以下规则：

viewBox尺寸 — 始终使用
```
viewBox="0 0 W H"
```
，不要添加固定的
```
width
```
/
```
height
```
属性。图标使用512x512，文字商标/组合商标使用1024x512。
自包含 — 不引用外部字体、图片，也不使用指向其他文件的
```
<use>
```
标签，所有内容都内联。
文本处理 — 使用广泛可用的系统字体（Arial、Helvetica、Georgia等），或将文本转换为
```
<path>
```
元素。使用系统字体时，务必添加通用兜底字体（例如
```
font-family="Helvetica, Arial, sans-serif"
```
）。
语义化分组 — 将逻辑区块用
```
<g>
```
元素包裹，并添加描述性ID：
```
id="icon"
```
、
```
id="wordmark"
```
、
```
id="tagline"
```
。当用户提出「把图标调大」或「修改文字商标颜色」时，这种结构能提升迭代效率。
默认使用纯色填充 — 使用纯色
```
fill
```
，仅当用户要求或风格明确需要时才使用渐变（
```
<linearGradient>
```
、
```
<radialGradient>
```
）。
小尺寸可读性 — Logo必须在16-32px尺寸下（favicon场景）清晰可用。优先使用纯色填充而非细描边，避免小尺寸下会消失的精细细节，所有需要保留可见的轮廓线
```
stroke-width
```
不小于6。可以在脑海中测试：如果某个细节在32px宽度下无法保留，就简化它。
简洁代码 — 不要有多余的transform、空分组、默认命名空间冗余，保持SVG代码可读性。

Phase 2: Explore

第二阶段：方案探索

Generate 3-5 distinct SVG logo concepts. Each concept should take a meaningfully different creative direction — vary the icon metaphor, typography style, layout, or overall aesthetic. Do not generate minor variations of the same idea.

生成3-5个完全不同的SVG logo概念方案，每个方案的创作方向要有明显差异——调整图标隐喻、排版风格、布局或者整体美学风格，不要生成同一个思路的微小变体。

Parallel generation

并行生成

Use the

Task

tool to generate all concepts in parallel. This is significantly faster than writing them sequentially.

Create the
```
logos/concepts/
```
directory first
Dispatch one
```
Task
```
agent per concept, all in the same message so they run concurrently. Each agent should:
- Receive the full design brief (format, style, colors, viewBox, SVG conventions)
- Be assigned a specific creative direction (e.g., "geometric letterform", "abstract symbol", "mascot-based")
- Write its SVG to a specific file path (e.g.,
```
logos/concepts/concept-1.svg
```
  )
- Use
```
subagent_type: "general-purpose"
```
  and
```
mode: "bypassPermissions"
```
After all agents complete, generate
```
logos/preview.html
```
and present the results

Example dispatch pattern (all in one message):

Task 1: "Write logos/concepts/concept-1.svg — geometric letterform using [colors]. viewBox 512x512. Self-contained SVG, no external fonts. [full SVG conventions]."

Task 2: "Write logos/concepts/concept-2.svg — abstract symbol using [colors]. viewBox 512x512. Self-contained SVG, no external fonts. [full SVG conventions]."

Task 3: "Write logos/concepts/concept-3.svg — mascot-based icon using [colors]. viewBox 512x512. Self-contained SVG, no external fonts. [full SVG conventions]."

Each agent prompt must include: the full SVG conventions from this skill, the target file path, the specific creative direction, and all relevant context (project name, colors, style preferences). Agents do not share context — give each one everything it needs.

使用

Task

工具并行生成所有方案，比顺序编写快得多。

先创建
```
logos/concepts/
```
目录
每个概念方案分配一个
```
Task
```
agent，都在同一条消息中发送让它们并发运行。每个agent需要：
- 接收完整设计需求（格式、风格、配色、viewBox、SVG规范）
- 分配明确的创作方向（例如「几何字母造型」、「抽象符号」、「吉祥物风格」）
- 将生成的SVG写入指定文件路径（例如
```
logos/concepts/concept-1.svg
```
  ）
- 使用
```
subagent_type: "general-purpose"
```
  和
```
mode: "bypassPermissions"
```
所有agent完成后，生成
```
logos/preview.html
```
并展示结果

调用示例（全部放在同一条消息中）：

Task 1: "Write logos/concepts/concept-1.svg — geometric letterform using [colors]. viewBox 512x512. Self-contained SVG, no external fonts. [full SVG conventions]."

Task 2: "Write logos/concepts/concept-2.svg — abstract symbol using [colors]. viewBox 512x512. Self-contained SVG, no external fonts. [full SVG conventions]."

Task 3: "Write logos/concepts/concept-3.svg — mascot-based icon using [colors]. viewBox 512x512. Self-contained SVG, no external fonts. [full SVG conventions]."

每个agent的prompt必须包含：本技能规定的完整SVG规范、目标文件路径、具体创作方向，以及所有相关上下文（项目名称、配色、风格偏好）。Agent之间不共享上下文，所以要给每个agent提供它需要的全部信息。

File output

文件输出结构

logos/
├── concepts/
│   ├── concept-1.svg
│   ├── concept-2.svg
│   ├── concept-3.svg
│   └── ... (up to concept-5.svg)
└── preview.html

After all parallel agents complete:

Generate
```
logos/preview.html
```
using the preview template below
Tell the user to open
```
logos/preview.html
```
in their browser
Briefly describe each concept (1 sentence each) so the user can match descriptions to visuals
Ask: "Which direction do you want to explore? Pick a number, or describe what you like/dislike across them."

logos/
├── concepts/
│   ├── concept-1.svg
│   ├── concept-2.svg
│   ├── concept-3.svg
│   └── ... (最多到concept-5.svg)
└── preview.html

所有并行agent完成后：

使用下方的预览模板生成
```
logos/preview.html
```
告知用户在浏览器中打开
```
logos/preview.html
```
简要描述每个方案（每个1句话），方便用户对应描述和视觉效果
询问：「你想要探索哪个方向？选择对应的编号，或者描述你对这些方案的喜好/不满。」

Preview HTML Template

预览HTML模板

When generating

logos/preview.html

, use this template. Replace

{{CARDS}}

with one card per SVG file. Set

{{PHASE}}

to "Concepts" during explore or "Iterations" during refine.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Logo Preview — {{PHASE}}</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    padding: 2rem;
    transition: background-color 0.3s, color 0.3s;
  }
  body.light { background: #f5f5f5; color: #333; }
  body.dark { background: #1a1a1a; color: #eee; }
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
  }
  h1 { font-size: 1.5rem; font-weight: 600; }
  .toggle {
    padding: 0.5rem 1rem;
    border: 1px solid currentColor;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 0.875rem;
  }
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
  }
  .card {
    border: 1px solid rgba(128, 128, 128, 0.3);
    border-radius: 12px;
    overflow: hidden;
  }
  .card-img {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    min-height: 240px;
  }
  body.light .card-img { background: #fff; }
  body.dark .card-img { background: #2a2a2a; }
  .card-img img {
    max-width: 100%;
    max-height: 200px;
  }
  .card-label {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-top: 1px solid rgba(128, 128, 128, 0.3);
  }
  body.light .card-label { background: #fafafa; }
  body.dark .card-label { background: #222; }
</style>
</head>
<body class="light">
  <div class="header">
    <h1>Logo Preview — {{PHASE}}</h1>
    <button class="toggle" onclick="document.body.classList.toggle('dark'); document.body.classList.toggle('light'); this.textContent = document.body.classList.contains('dark') ? '☀️ Light' : '🌙 Dark';">🌙 Dark</button>
  </div>
  <div class="grid">
    {{CARDS}}
  </div>
</body>
</html>

生成

logos/preview.html

时使用该模板，将

{{CARDS}}

替换为每个SVG文件对应的卡片，探索阶段将

{{PHASE}}

设为「Concepts」，优化阶段设为「Iterations」。

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Logo Preview — {{PHASE}}</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    padding: 2rem;
    transition: background-color 0.3s, color 0.3s;
  }
  body.light { background: #f5f5f5; color: #333; }
  body.dark { background: #1a1a1a; color: #eee; }
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
  }
  h1 { font-size: 1.5rem; font-weight: 600; }
  .toggle {
    padding: 0.5rem 1rem;
    border: 1px solid currentColor;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 0.875rem;
  }
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
  }
  .card {
    border: 1px solid rgba(128, 128, 128, 0.3);
    border-radius: 12px;
    overflow: hidden;
  }
  .card-img {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    min-height: 240px;
  }
  body.light .card-img { background: #fff; }
  body.dark .card-img { background: #2a2a2a; }
  .card-img img {
    max-width: 100%;
    max-height: 200px;
  }
  .card-label {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-top: 1px solid rgba(128, 128, 128, 0.3);
  }
  body.light .card-label { background: #fafafa; }
  body.dark .card-label { background: #222; }
</style>
</head>
<body class="light">
  <div class="header">
    <h1>Logo Preview — {{PHASE}}</h1>
    <button class="toggle" onclick="document.body.classList.toggle('dark'); document.body.classList.toggle('light'); this.textContent = document.body.classList.contains('dark') ? '☀️ Light' : '🌙 Dark';">🌙 Dark</button>
  </div>
  <div class="grid">
    {{CARDS}}
  </div>
</body>
</html>

Favicon size check strip

Favicon尺寸检查条

During Phase 3 (Refine), add a "Favicon Size Check" section below the iteration grid. This renders each iteration at 64px, 32px, and 16px so the user can spot legibility issues early. Use this HTML pattern:

html

<h2>Favicon Size Check</h2>
<div style="display:flex;gap:2rem;flex-wrap:wrap;align-items:end;">
  <!-- Repeat for each iteration -->
  <div style="display:flex;flex-direction:column;align-items:center;gap:0.5rem;">
    <div style="font-size:0.8rem;font-weight:500;">{{LABEL}}</div>
    <div style="display:flex;gap:1rem;align-items:end;">
      <div><img src="{{PATH}}" width="64" height="64"><div style="font-size:0.75rem;opacity:0.6;">64px</div></div>
      <div><img src="{{PATH}}" width="32" height="32"><div style="font-size:0.75rem;opacity:0.6;">32px</div></div>
      <div><img src="{{PATH}}" width="16" height="16"><div style="font-size:0.75rem;opacity:0.6;">16px</div></div>
    </div>
  </div>
</div>

This is especially important for icon-only logos. If details disappear at 32px, suggest simplifying (remove fine details, thicken strokes, drop decorative elements).

Each

{{CARDS}}

entry is:

html

<div class="card">
  <div class="card-img">
    <img src="{{PATH}}" alt="{{LABEL}}">
  </div>
  <div class="card-label">{{LABEL}}</div>
</div>

Where

{{PATH}}

is the relative path from

logos/

(e.g.,

concepts/concept-1.svg

iterations/iteration-3.svg

) and

{{LABEL}}

is the filename without extension (e.g., "concept-1" or "iteration-3").

During explore, show all concepts. During refine, show all iterations (most recent first).

在第三阶段（优化），在迭代方案网格下方添加「Favicon尺寸检查」区块，将每个迭代方案以64px、32px、16px尺寸渲染，方便用户尽早发现可读性问题。使用如下HTML结构：

html

<h2>Favicon Size Check</h2>
<div style="display:flex;gap:2rem;flex-wrap:wrap;align-items:end;">
  <!-- 每个迭代版本重复一次 -->
  <div style="display:flex;flex-direction:column;align-items:center;gap:0.5rem;">
    <div style="font-size:0.8rem;font-weight:500;">{{LABEL}}</div>
    <div style="display:flex;gap:1rem;align-items:end;">
      <div><img src="{{PATH}}" width="64" height="64"><div style="font-size:0.75rem;opacity:0.6;">64px</div></div>
      <div><img src="{{PATH}}" width="32" height="32"><div style="font-size:0.75rem;opacity:0.6;">32px</div></div>
      <div><img src="{{PATH}}" width="16" height="16"><div style="font-size:0.75rem;opacity:0.6;">16px</div></div>
    </div>
  </div>
</div>

这对仅图标类的logo尤为重要，如果细节在32px尺寸下消失，建议简化（移除精细细节、加粗描边、去掉装饰元素）。

每个

{{CARDS}}

条目结构如下：

html

<div class="card">
  <div class="card-img">
    <img src="{{PATH}}" alt="{{LABEL}}">
  </div>
  <div class="card-label">{{LABEL}}</div>
</div>

其中

{{PATH}}

是相对于

logos/

的相对路径（例如

concepts/concept-1.svg

或

iterations/iteration-3.svg

），

{{LABEL}}

是不带后缀的文件名（例如「concept-1」或「iteration-3」）。

探索阶段展示所有概念方案，优化阶段展示所有迭代版本（最新的排在最前）。

Phase 3: Refine

第三阶段：方案优化

Once the user picks a concept direction, iterate on it.

用户选定概念方向后，对其进行迭代优化。

Single vs. batch iterations

单次迭代 vs 批量迭代

Single iteration — When the user gives specific feedback ("make the icon bigger", "change the blue to green"), apply the change directly and write the next iteration SVG yourself.

Batch variations — When exploring multiple directions at once ("try different color palettes", "show me 5 variations of the eye shape", "experiment with bar count"), use the

Task

tool to generate variations in parallel, just like Phase 2:

Dispatch one
```
Task
```
agent per variation, all in the same message
Each agent receives: the base SVG content (copy the full SVG inline in the prompt), the specific variation to apply, the target file path, and the full SVG conventions
After all agents complete, regenerate
```
logos/preview.html
```
and present the results

Example batch dispatch:

Task 1: "Take this base SVG [full SVG content] and create a variation with a warm color palette (reds, oranges, yellows). Write to logos/iterations/iteration-5.svg."

Task 2: "Take this base SVG [full SVG content] and create a variation with a cool color palette (blues, teals, purples). Write to logos/iterations/iteration-6.svg."

Task 3: "Take this base SVG [full SVG content] and create a variation with a monochrome palette (grays + one accent). Write to logos/iterations/iteration-7.svg."

Use

subagent_type: "general-purpose"

and

mode: "bypassPermissions"

for each agent. Always include the full base SVG content in each agent's prompt — agents do not share context.

单次迭代 — 当用户给出明确反馈时（「把图标调大一点」、「把蓝色改成绿色」），直接修改并生成下一个迭代版本的SVG。

批量变体 — 同时探索多个方向时（「试试不同的配色方案」、「给我看5种眼睛造型的变体」、「试试不同的柱状数量」），和第二阶段一样使用

Task

工具并行生成变体：

每个变体分配一个
```
Task
```
agent，都在同一条消息中发送
每个agent接收：基础SVG内容（将完整SVG直接写在prompt里）、要应用的具体变体要求、目标文件路径、完整SVG规范
所有agent完成后，重新生成
```
logos/preview.html
```
并展示结果

批量调用示例：

Task 1: "Take this base SVG [full SVG content] and create a variation with a warm color palette (reds, oranges, yellows). Write to logos/iterations/iteration-5.svg."

Task 2: "Take this base SVG [full SVG content] and create a variation with a cool color palette (blues, teals, purples). Write to logos/iterations/iteration-6.svg."

Task 3: "Take this base SVG [full SVG content] and create a variation with a monochrome palette (grays + one accent). Write to logos/iterations/iteration-7.svg."

每个agent都使用

subagent_type: "general-purpose"

和

mode: "bypassPermissions"

，务必在每个agent的prompt里包含完整的基础SVG内容——agent之间不共享上下文。

File output

文件输出结构

logos/
├── iterations/
│   ├── iteration-1.svg    # First refinement (based on chosen concept)
│   ├── iteration-2.svg
│   └── ...
└── preview.html           # Regenerated to show iterations

Copy the chosen concept as the starting point — save the first refinement as
```
logos/iterations/iteration-1.svg
```
Apply the user's feedback and save each new version with an incrementing number
Regenerate
```
logos/preview.html
```
after each iteration, showing all iterations (most recent first) so the user can compare
Tell the user to refresh their browser after each iteration
After each iteration, briefly describe what changed and ask for next feedback

logos/
├── iterations/
│   ├── iteration-1.svg    # 第一个优化版本（基于选定的概念方案）
│   ├── iteration-2.svg
│   └── ...
└── preview.html           # 重新生成以展示迭代版本

将选定的概念方案作为起点，第一个优化版本保存为
```
logos/iterations/iteration-1.svg
```
应用用户反馈，每个新版本编号递增保存
每次迭代后重新生成
```
logos/preview.html
```
，展示所有迭代版本（最新的排在最前）方便用户对比
告知用户每次迭代后刷新浏览器
每次迭代后简要说明修改内容，询问下一步反馈

Iteration tips

迭代提示

If the user says "go back to iteration N", use that as the new base
If the user wants to compare specific iterations, mention which filenames to look at in the preview
Keep SVG structure consistent across iterations (same group IDs) so the user can track what changed
Use parallel agents for batch exploration (3+ variations), sequential writes for single tweaks
Check small-size legibility — After generating iterations, include the favicon size check strip in the preview. If thin strokes vanish at 32px, proactively suggest thickening them. If fine details (clocks, sparkles, thin icons) become unreadable, suggest removing or simplifying them. This saves iteration cycles.
When the user is satisfied, move to Phase 4

如果用户说「回到迭代版本N」，使用该版本作为新的基础
如果用户想要对比特定迭代版本，告知用户预览中对应的文件名
迭代版本之间保持SVG结构一致（相同的分组ID），方便用户追踪修改内容
3个及以上变体的批量探索使用并行agent，单个调整使用顺序写入
检查小尺寸可读性 — 生成迭代版本后，在预览中加入favicon尺寸检查条。如果细描边在32px下消失，主动建议加粗。如果精细细节（时钟、闪光效果、细图标）变得无法识别，建议移除或简化，可减少迭代次数。
用户满意后进入第四阶段

Phase 4: Export

第四阶段：导出

When the user says "export", "I'm happy with this", "this is the one", or similar:

Identify the final iteration SVG (ask the user to confirm which one if ambiguous)
Create the
```
logos/export/
```
directory
Copy the final SVG to
```
logos/export/logo.svg
```
Run the bundled export script to generate PNGs:

bash

bash <path-to-skill>/scripts/export.sh logos/export/logo.svg logos/export/

The script produces:

```
logo-16.png
```
```
logo-32.png
```
```
logo-48.png
```
```
logo-192.png
```
```
logo-512.png
```
```
logo-1024.png
```
```
logo-2048.png
```

Report the results: list all exported files with their sizes
If the export script fails (no conversion tool found), tell the user:
"No SVG-to-PNG converter found. Install one of:
```
npm install -g @aspect-build/resvg
```
, or install Inkscape, or install librsvg. Then run export again."

当用户说「导出」、「我对这个很满意」、「就用这个了」或类似表述时：

确认最终迭代版本的SVG（如果有歧义询问用户确认）
创建
```
logos/export/
```
目录
将最终SVG复制到
```
logos/export/logo.svg
```
运行内置的导出脚本生成PNG：

bash

bash <path-to-skill>/scripts/export.sh logos/export/logo.svg logos/export/

脚本会生成：

```
logo-16.png
```
```
logo-32.png
```
```
logo-48.png
```
```
logo-192.png
```
```
logo-512.png
```
```
logo-1024.png
```
```
logo-2048.png
```

汇报结果：列出所有导出文件及其尺寸
如果导出脚本运行失败（未找到转换工具），告知用户：
"未找到SVG转PNG转换器，请安装以下任意工具：
```
npm install -g @aspect-build/resvg
```
，或安装Inkscape，或安装librsvg，之后重新运行导出。"

Export script location

导出脚本位置

The export script is bundled with this skill at

scripts/export.sh

relative to the SKILL.md file. Use the skill's directory path to locate it.

导出脚本与该技能绑定，位于SKILL.md文件相对路径

scripts/export.sh

处，使用技能目录路径定位即可。

Phase 5: Repo Integration (optional)

第五阶段：仓库集成（可选）

If the user asks to commit the logo to a project repo or create a PR:

Identify target files — Check the repo for existing icon/logo files:

public/favicon.svg

public/favicon.ico

public/pwa-*.png

public/apple-touch-icon.png

assets/logo.svg

ios/.../AppIcon.appiconset/

public/manifest.json

, etc.

Clone and branch — Clone the repo (or use the existing checkout), create a branch like
```
chore/new-logo
```
Replace files — Copy the final SVG as the favicon/logo. Generate platform-specific sizes:
- ```
favicon.ico
```
  — 48px (use ImageMagick
```
convert
```
  or
```
magick
```
  )
- ```
apple-touch-icon.png
```
  — 180px
- ```
pwa-192x192.png
```
  — 192px
- ```
pwa-512x512.png
```
  — 512px
- iOS
```
AppIcon-512@2x.png
```
  — 1024px
- Only replace files that already exist in the repo — don't add new ones the project doesn't use
Commit and PR — Commit with a message like
```
chore: replace logo with new [description]
```
, push, and create a PR with a summary of what was updated

如果用户要求将logo提交到项目仓库或者创建PR：

确定目标文件 — 检查仓库中现有图标/logo文件：

public/favicon.svg

、

public/favicon.ico

、

public/pwa-*.png

、

public/apple-touch-icon.png

、

assets/logo.svg

、

ios/.../AppIcon.appiconset/

、

public/manifest.json

等。

克隆并创建分支 — 克隆仓库（或使用现有检出版本），创建类似
```
chore/new-logo
```
的分支。
替换文件 — 将最终SVG复制为favicon/logo，生成平台对应尺寸：
- ```
favicon.ico
```
  — 48px（使用ImageMagick
```
convert
```
  或
```
magick
```
  命令）
- ```
apple-touch-icon.png
```
  — 180px
- ```
pwa-192x192.png
```
  — 192px
- ```
pwa-512x512.png
```
  — 512px
- iOS
```
AppIcon-512@2x.png
```
  — 1024px
- 仅替换仓库中已存在的文件 — 不要添加项目未使用的新文件。
提交并创建PR — 使用类似
```
chore: replace logo with new [description]
```
的信息提交，推送后创建PR，汇总更新内容。