logo-designer

徽标设计师

使用 SVG 设计和迭代徽标。生成并排预览，并以标准尺寸导出为 PNG。

阶段 1：访谈

开始生成之前，先收集背景信息并询问用户的需求。

步骤 1：自动收集背景信息

如果用户提供了仓库、URL 或现有项目：

• 阅读 README、package.json、CSS/配置文件以及现有品牌资料
• 提取：项目名称、用途、技术栈、配色方案、设计语言、字体
• 先总结你发现的信息，再提出问题——这样可以避免询问已知信息

如果用户只说“设计一个徽标”，没有提供项目背景，则跳到步骤 2。

步骤 2：提出结构化问题

使用 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"

根据背景信息调整

• 用户提供了仓库： 先收集背景信息，然后只询问格式和风格（颜色可能已知）。
• 用户说“为 X 设计一个徽标”： 一并询问格式、风格和颜色。
• 用户提供了详细描述： 跳过已经涵盖的内容，只询问缺少的信息。
• 用户说“随便做一个”： 使用合理的默认设置（仅图标、简约、给我惊喜），并直接进入阶段 2。

收集到足以生成不同概念的信息后，进入阶段 2。

SVG 规范

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

• viewBox 尺寸——始终使用 viewBox="0 0 W H"，不设置固定的 width/height 属性。图标使用 512x512，字标/组合标使用 1024x512。
• 独立完整——不使用外部字体、图像或引用其他文件的 <use>。所有内容都内嵌其中。
• 文本处理——使用广泛可用的系统字体（Arial、Helvetica、Georgia 等），或将文本转换为 <path> 元素。使用系统字体时，始终包含一个通用后备字体（例如 font-family="Helvetica, Arial, sans-serif"）。
• 语义明确的分组——使用带描述性 ID 的 <g> 元素包裹逻辑部分：id="icon"、id="wordmark"、id="tagline"。当用户要求“放大图标”或“更改字标颜色”时，这样更便于迭代。
• 默认使用纯色填充——使用纯色 fill。仅在用户提出要求或风格明显适合时才使用渐变（<linearGradient>、<radialGradient>）。
• 小尺寸下清晰易辨——徽标必须能在 16-32px（网站图标）下清晰呈现。优先使用纯色填充而非细描边，避免在小尺寸下会消失的精细细节；任何需要保持可见的轮廓，其 stroke-width 应为 6 以上。请先在脑中测试：如果某个细节在宽度为 32px 时无法保留，就将其简化。
• 保持标记简洁——不要使用不必要的变换、空分组或默认命名空间杂项。保持 SVG 易读。

阶段 2：探索

生成 3-5 个各不相同的 SVG 徽标概念。每个概念都应采用有实质差异的创意方向——改变图标隐喻、字体风格、布局或整体美感。不要生成同一构想的细微变体。

并行生成

使用 Task 工具并行生成所有概念。这比按顺序编写快得多。

1. 首先创建 logos/concepts/ 目录
2. 在同一条消息中为每个概念分派一个 Task Agent，让它们并行运行。每个 Agent 都应：
   • 收到完整的设计说明（格式、风格、颜色、viewBox、SVG 规范）
   • 被分配一个具体的创意方向（例如“几何字形”“抽象符号”“吉祥物风格”）
   • 将 SVG 写入指定的文件路径（例如 logos/concepts/concept-1.svg）
   • 使用 subagent_type: "general-purpose" 和 mode: "bypassPermissions"
3. 所有 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 的提示词必须包含：此技能的完整 SVG 规范、目标文件路径、具体创意方向，以及所有相关背景信息（项目名称、颜色、风格偏好）。Agent 之间不会共享上下文，因此要为每个 Agent 提供它所需的全部信息。

文件输出

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

所有并行 Agent 完成后：

1. 使用下方的预览模板生成 logos/preview.html
2. 告诉用户在浏览器中打开 logos/preview.html
3. 简要描述每个概念（每个 1 句话），以便用户将描述与视觉效果对应起来
4. 询问：“你想进一步探索哪个方向？请选择一个编号，或描述你喜欢或不喜欢的地方。”

预览 HTML 模板

生成 logos/preview.html 时，请使用此模板。将 {{CARDS}} 替换为每个 SVG 文件对应的一张卡片。在探索阶段，将 {{PHASE}} 设为 "Concepts"；在精修阶段，将其设为 "Iterations"。

<!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>

网站图标尺寸检查栏

在阶段 3（精修）期间，在迭代网格下方添加一个“网站图标尺寸检查”部分。该部分会以 64px、32px 和 16px 的尺寸呈现每个迭代版本，帮助用户尽早发现可读性问题。使用此 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="{{FAVICON_PATH}}" width="64" height="64"><div style="font-size:0.75rem;opacity:0.6;">64px</div></div>
      <div><img src="{{FAVICON_PATH}}" width="32" height="32"><div style="font-size:0.75rem;opacity:0.6;">32px</div></div>
      <div><img src="{{FAVICON_PATH}}" width="16" height="16"><div style="font-size:0.75rem;opacity:0.6;">16px</div></div>
    </div>
  </div>
</div>

对于纯图标 Logo，{{FAVICON_PATH}} 为迭代文件路径。对于组合标志，请从有意义的 #icon 组创建独立的正方形 SVG，并将其路径用作 {{FAVICON_PATH}}。切勿将完整的横向文字标志塞进正方形网站图标单元格中。如果细节在 32px 尺寸下消失，请建议简化（移除精细细节、加粗描边、删去装饰元素）。

每个 {{CARDS}} 条目如下：

<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"）。

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

阶段 3：精修

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

单个迭代与批量迭代

单个迭代——当用户给出具体反馈（“把图标放大”“把蓝色改成绿色”）时，直接应用更改并自行编写下一版迭代 SVG。

批量变化——当用户想同时探索多个方向（“试试不同的配色方案”“给我看看 5 种眼睛形状”“尝试不同的横条数量”）时，像阶段 2 一样使用 Task 工具并行生成多个变化版本：

1. 在同一条消息中为每个变化版本分派一个 Task Agent
2. 每个 Agent 都会收到：基础 SVG 内容（在提示词中内联完整 SVG）、要应用的具体变化、目标文件路径，以及完整的 SVG 规范
3. 所有 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 的提示词中加入完整的基础 SVG 内容——Agent 之间不会共享上下文。

文件输出

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

1. 复制选定的概念作为起点——将首次优化结果保存为 logos/iterations/iteration-1.svg
2. 根据用户反馈进行修改，并使用递增编号保存每个新版本
3. 每次迭代后重新生成 logos/preview.html，按最新版本优先的顺序显示所有迭代，方便用户比较
4. 提醒用户每次迭代后刷新浏览器
5. 每次迭代后简要说明改动内容，并询问用户的下一步反馈

迭代提示

• 如果用户说“回到第 N 次迭代”，则以该版本作为新起点
• 如果用户想比较指定的迭代版本，请在预览中说明要查看哪些文件名
• 保持各次迭代中的 SVG 结构一致（使用相同的组 ID），以便用户追踪改动
• 批量探索（3 个或更多变体）时使用并行 Agent；进行单项微调时按顺序写入
• 检查小尺寸下的可读性——生成迭代版本后，在预览中加入 Favicon 尺寸检查条。如果细线在 32px 下消失，请主动建议加粗。如果精细细节（时钟、闪光效果、细线图标）变得难以辨认，请建议删除或简化。这有助于减少迭代次数。
• 用户满意后，进入阶段 4

可选的 Lineage 审查（仅在用户明确选择时）

独立 SVG 文件和 logos/preview.html 始终是默认选项。不要仅仅因为 Lineage 可能已安装或存在运行时描述符，就查找、启动或连接 Lineage。只有用户明确要求使用画布审查，并提供 Lineage 检出目录或适配器命令后，才能使用 Lineage。

用户明确要求审查时，保持单向传递，且仅使用公开边界。使用明确指定的资源、选择器和目标运行 Lineage 适配器，然后将其唯一的带版本 JSON 回执传入内置的只读标准输入交接程序：

npm --prefix /absolute/path/to/lineage-logo --silent run agent:submit -- \
  --mode replace \
  --artifact /absolute/path/to/logos/iterations/iteration-2.svg \
  --selector '#logo' \
  --target-name logo | \
node <path-to-skill>/scripts/lineage-handoff.mjs \
  --logos /absolute/path/to/logos

交接程序不会启动或查找 Lineage，也不接受令牌、API 来源、资源参数或连接上下文。它只会从标准输入读取适配器回执。收到有效回执后，它会以原子方式创建下一个不会冲突的 logos/iterations/iteration-N.svg，重新读取已发布的字节并验证，然后输出仅包含元数据的回执，其中包括 iterationPath、bytes 和 sha256。在输出该后续回执前，会同步文件数据和受支持的目录元数据。事务开始前收到的无效或不可用适配器回执，不会包含虚构的事务、源路径或版本标识，并且可由同一交接程序作为终止回执处理。

仅从该确切的 iterationPath 继续优化，然后重新生成 logos/preview.html，确保已验证的迭代版本在常规工作流中保持可见。

对于已撤销、已拒绝、过期、不可用、冲突、超时或无效回执，请遵循输出的终止指引，不要创建或预留迭代版本。即使编辑器临时断开连接，生产方也会持续等待，以免画布重新连接后，在交接程序已停止监听的情况下接受同一提案。如果无法持久保存权威的已接受回执，退出码 27 会保留其事务标识、字节数和哈希值。请修复本地存储问题，然后使用同一事务 ID 和相同资源重新运行适配器命令；不要创建新事务。超时或冲突后，绝不要自动重新提交。只有在检查当前画布状态后，用户明确要求时，才能进行新的提交。如果 Lineage 报告其本地服务在临时接受期间被替换，不要推断终止结果，也不要从浏览器内存继续。请检查已锁定的画布，并使用其明确的恢复上一个文档恢复操作；只有在该确切事务已解决后，用户才能明确开始另一次交接。

阶段 4：导出

当用户说“导出”“我对此很满意”“就是这个”或类似的话时：

1. 确认最终迭代的 SVG（如果不明确，请用户确认是哪一个）
2. 创建 logos/export/ 目录
3. 将最终 SVG 复制到 logos/export/logo.svg。对于组合标志，还要从其有意义的 #icon 组创建独立的方形 logos/export/icon.svg。保留图标的外观，并为其设置紧凑的方形 viewBox；不要包含字标。
4. 运行随附的导出脚本以生成 PNG。支持传入已位于目标位置的 SVG：

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

对于组合标志，将独立图标作为可选的第三个参数传入：

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

脚本会生成：

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

如果提供了图标 SVG，脚本还会保留 icon.svg，并生成对应的 icon-16.png 至 icon-2048.png 系列。将 icon-* 资源用于网站图标和应用图标；在需要完整组合标志的地方使用 logo-* 资源。

5. 报告结果：列出所有导出的文件及其大小
6. 如果导出脚本失败（未找到转换工具），请告知用户：

   “未找到 SVG 转 PNG 转换器。请安装以下任一工具：npm install -g @aspect-build/resvg，或安装 Inkscape，或安装 librsvg。然后再次运行导出。”

导出脚本位置

导出脚本随此技能一并提供，路径相对于 SKILL.md 文件为 scripts/export.sh。请使用此技能的目录路径来定位脚本。

阶段 5：仓库集成（可选）

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

1. 确定目标文件 — 检查仓库中现有的图标/标志文件：public/favicon.svg、public/favicon.ico、public/pwa-*.png、public/apple-touch-icon.png、assets/logo.svg、ios/.../AppIcon.appiconset/、public/manifest.json 等。
2. 克隆并创建分支 — 克隆仓库（或使用现有检出目录），创建类似 chore/new-logo 的分支
3. 替换文件 — 将最终 SVG 复制为网站图标/标志。生成平台专用尺寸：
   • favicon.ico — 48px（使用 ImageMagick convert 或 magick）
   • apple-touch-icon.png — 180px
   • pwa-192x192.png — 192px
   • pwa-512x512.png — 512px
   • iOS [email protected] — 1024px
   • 仅替换仓库中已存在的文件；不要添加项目未使用的新文件
4. 提交并创建 PR — 使用类似 chore: replace logo with new [description] 的提交说明，推送并创建 PR，概述更新内容