logo-designer

Logo 设计器

通过分析项目上下文并生成基于 SVG 的品牌素材，设计现代、专业的 Logo。

环境检查

运行此技能前，请确认：

• 当前位于包含 README 或 package.json 的项目目录中
• 有权限创建 /assets/logo/ 目录
• 项目目录是一个 Git 仓库（可选，但建议）

如果任一项未通过，此技能将停止并请求澄清。

子 Agent 架构

此技能采用 Explorer+Executor（A）+ Review Loop（C） 架构：

Phase 1: Brand Research
  ↓ (brand-researcher agent)
  ↓
Phase 2: Interactive Style Selection
  ↓ Main agent: confirm style selection with user
  ↓
Phase 3: Generate All 7 SVGs
  ↓ (svg-generator agent)
  ↓
Phase 4: SVG Validation
  ↓ (svg-reviewer agent)
  ↓
Final Output: 7 SVG files in /assets/logo/ + brand-showcase.html + Design Rationale

Agent：

1. agents/brand-researcher.md — 读取项目文件并生成结构化品牌简报
2. agents/svg-generator.md — 生成全部 7 个 SVG 文件（标志、字标、完整标识、图标、favicon、白色版、黑色版）
3. agents/svg-reviewer.md — 验证 SVG 结构（viewBox、无栅格图像、文件齐全、名称正确）

关键要点：一次性内联生成 7 个 SVG 文件是最大的上下文开销。分析多个项目文件中的品牌信息也会增加负担。审核器会在文件提交前充当质量关卡，检查 SVG 结构问题。

编辑前同步仓库（必须）

在现有仓库中创建、更新或删除文件之前，请先将当前分支与远程同步。如果工作树不干净，请先暂存更改、同步，然后恢复更改：

branch="$(git rev-parse --abbrev-ref HEAD)"
dirty=0
if [ -n "$(git status --porcelain)" ]; then
  git stash push -u -m "pre-sync"
  dirty=1
fi
git fetch origin
git pull --rebase origin "$branch"
if [ "$dirty" -eq 1 ]; then
  git stash pop
fi

如果缺少 origin、无法拉取，或发生变基／暂存冲突，请停止并在继续前询问用户。

工作流

阶段 1：项目分析

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

1. 识别产品身份 — 按以下顺序检查文件：

   • README.md — 产品名称、描述、标语
   • package.json — 名称、描述、关键词
   • pyproject.toml — 项目名称和描述
   • Cargo.toml — 包名称和描述
   • go.mod — 模块名称

2. 查找现有品牌素材 — 搜索：

   • /docs/brand_kit.md、/.docs/brand_kit.md、brand_kit.md
   • /docs/prd.md、prd.md — 包含品牌信息的产品需求文档
   • /assets/logo/、/public/logo、/static/logo — 现有 Logo
   • Tailwind 配置中的现有配色方案

3. 根据代码库结构识别项目类型：

   • 开发者／CLI／开源 — .github/、CLI 入口点、MIT 许可证
   • SaaS／生产力 — Web 应用结构、身份验证、仪表板模式
   • 初创公司 — 精简结构、MVP 模式
   • 企业／B2B — 复杂架构、集成
   • 消费者／移动端 — React Native、Flutter、移动优先模式

4. 继续前总结发现：

   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"]
   

阶段 2：Logo 设计

根据识别出的项目类型（开发者／SaaS／初创公司／企业／消费者）选择风格，然后设计简约的几何标志，确保从 16px favicon 到主视觉横幅的各种尺寸下都清晰易读。如果存在已识别的品牌色，请使用这些颜色；否则采用默认风格指南（深色基底 + 仅用霓虹绿作为高亮，绝不将其用作填充色）。生成任何包含文字的 SVG 前，请先向用户确认产品名称在字标中的大小写形式。

有关风格表、完整的视觉／颜色／排版规则，以及包含系统状态色的默认风格指南配色方案，请参阅 references/design-principles.md。

默认质量标准

全部 7 个 SVG 和 brand-showcase.html 都必须达到专业、可用于生产环境、优雅且高端的水准，即使用户没有特别要求。所选风格确定方向；此标准决定完成度（注重工艺与克制，而非装饰）：视觉平衡、描边一致、在 16px 下清晰易读的简洁路径、精细的字标字距，以及没有占位内容的精致展示页。请将此标准传达给 svg-generator。

第 3 阶段：交付内容

先生成规范标志，再根据其精确路径数据派生 6 个同系列变体，以确保所有文件共享相同的几何形状。svg-generator agent 必须接收字面量 d="" 字符串——不得改述形状。

输出结构：

/assets/logo/
├── logo-mark.svg          # Canonical 64×64 mark (source of truth)
├── logo-full.svg          # 320×72 mark + wordmark
├── logo-wordmark.svg      # 180×40 text only
├── logo-icon.svg          # 512×512 app icon (centered, padded)
├── favicon.svg            # 16×16 simplified 2-layer mark
├── logo-white.svg         # 320×72 white (for dark backgrounds)
├── logo-black.svg         # 320×72 black (for light backgrounds)
└── brand-showcase.html    # Self-contained brand identity page

写入全部 7 个文件后，重新读取 mark、full、icon、white 和 black 变体，并验证 d="" 字符串完全相同（或通过 transform 正确缩放）。继续之前先修复差异。

完整的变体规格、缩放计算、favicon 简化规则和 SVG 要求，请参阅 references/svg-deliverables.md。

第 4–5 阶段：文档与品牌展示

写入 SVG 后，输出设计理念（符号含义、颜色选择、字体设计思路）、十六进制颜色规范和 Tailwind 配置片段。随后生成 /assets/logo/brand-showcase.html——一个独立的展示页面（主视觉、设计理念、变体网格、调色板、字体、开发参考、页脚），并在浏览器中打开。

完整的 HTML 页面结构、设计指南和文档模板，请参阅 references/brand-showcase.md。

预期输出

对于名为 "fastbuild" 的 CLI 工具，该技能会生成：

/assets/logo/
├── logo-mark.svg          — 64×64 abstract "F" mark (canonical geometry)
├── logo-full.svg          — 320×72 mark + "FASTBUILD" wordmark
├── logo-wordmark.svg      — 180×40 text-only wordmark
├── logo-icon.svg          — 512×512 mark centered in rounded square
├── favicon.svg            — 16×16 simplified 2-layer mark
├── logo-white.svg         — 320×72 full logo in white (for dark backgrounds)
├── logo-black.svg         — 320×72 full logo in black (for light backgrounds)
└── brand-showcase.html    — self-contained brand identity presentation page

向用户展示的设计理念摘要：

Product: fastbuild
Type: Developer/CLI Tool
Symbol: Abstract "F" from stacked horizontal speed bars
Colors: #0A0A0A base, #00FF41 neon green accent (borders and highlights only)
Typography: Inter Bold for wordmark

边缘情况

• 未找到项目背景：生成任何内容前，询问用户产品名称、产品类型和一句话用途。
• 检测到现有品牌颜色：使用这些颜色，而非默认的深色／霓虹绿配色；继续之前先向用户确认。
• 用户未指定字标大小写形式：继续之前明确询问（有关大小写规则和示例，请参阅 references/design-principles.md）。
• 各变体的 SVG 几何形状不一致：重新运行第 3 阶段的验证步骤（重新读取并比较 d="" 字符串），并在完成前修复。
• 没有 git 仓库：跳过分支和同步步骤；直接写入当前目录，并在摘要中注明。
• favicon.svg 过于复杂：在 16×16 尺寸下，完整标志无法辨认——始终简化为 2 层（外层 + 内层），并删除中间细节层；保持比例几何关系。
• 用户拒绝提议的风格：在生成任何 SVG 文件之前，反复进行第 2 阶段（风格选择），直到用户批准。

最终报告

每次运行结束时（包括停止时），都以此简短文本块结尾。状态为 COMPLETE（已写入全部 7 个 SVG 和 brand-showcase.html，且几何验证通过）、PARTIAL（已写入文件，但仍有检查未通过）或 BLOCKED（未写入任何文件）。等待用户回答的问题不会结束运行；如果用户在未回答的情况下结束运行，状态为 BLOCKED。填写规则、PARTIAL 和 BLOCKED 示例以及读取器检查，请参阅 references/final-report.md。示例：

Result: COMPLETE. Wrote 7 SVGs and brand-showcase.html to /assets/logo/.
Evidence: Read back mark, full, icon, white and black variants: d="" strings identical. svg-reviewer: all viewBox attributes correct, no embedded rasters. Default Quality Bar passed. sync: skipped (not a git repo)
Uncertainty: Assumed a developer-tool audience from the CLI entry point; the user did not say.
Decision: No approval needed. Export PNG sizes from logo-icon.svg if you need raster assets.

验收标准

• 所有 7 个 SVG 文件均以正确的文件名写入 /assets/logo/
• 首先创建 logo-mark.svg，并在所有衍生版本中逐字使用其中的 d="" 路径字符串
• 每个 SVG 都具有正确的 viewBox 属性，且不包含嵌入式栅格图
• 单色版本（logo-white.svg、logo-black.svg）与 logo-full.svg 仅颜色不同，几何结构相同
• favicon.svg 是标志的简化 2 层版本，尺寸为 16×16
• 已编写 brand-showcase.html，并且能在浏览器中正确打开
• 在回复中记录设计理念（符号含义、颜色选择、字体排印）
• 色彩规范包含所有调色板角色的十六进制代码
• 生成任何包含文本的 SVG 之前，先向用户确认字标的大小写形式
• 每个 SVG 和展示页面都达到默认质量标准（专业、可用于生产环境、优雅、高端），无需用户提出要求
• 最终报告以 Result: 及其状态开头，并包含 Evidence:、Uncertainty: 和 Decision: 行。Evidence: 只能列出已执行的检查
• 最终报告通过 references/final-report.md 中的四项读者检查（结果易于查找、事实与假设分开、声明可追溯、下一步决策明确）。在获得人工审核者的答复之前，人工理解情况尚未确认

步骤完成报告

每个阶段结束后，输出一个 ◆ [Phase] (step N of 4) 状态块，逐项列出检查是否通过，并以 Result: 行结尾（PASS | FAIL | PARTIAL）。通过复用模板来控制 Agent 的上下文预算——不要在每个阶段重新改写模板。

完整报告模板、各阶段检查清单和已填写的 Analysis Summary 示例，请参阅 references/step-reports.md。

备注

• 始终在浅色（#FAFAFA）和深色（#0A0A0A）背景上展示标志预览
• 生成前先确认字标的大小写形式（参见 Phase 2 和 Edge Cases）
• 如果未找到项目背景，请向用户询问：产品名称、类型和用途
• 优先考虑简洁——标志在 16x16 像素下也应易于辨认
• 一致性不可妥协：每个变体在视觉上都必须可辨认为同一个标志。所有文件中的标志形状、层数和强调元素必须一致。变体之间唯一可以变化的是：颜色（单色）、尺寸（favicon、图标）以及是否包含字标。如果无法验证路径一致，则交付内容不完整。