Logo 设计技能 — 终极版
全面的 Logo 和视觉品牌标识设计。涵盖：品牌背景捕获、视觉标识策略、AI 图像生成、直接 SVG 创建、光栅到矢量转换、Logo 动画、品牌系统文档、字体选择和品牌一致性交付。
视觉工具 — 修复与验证
当用户发送 Logo/图像作为参考并要求组合创意时：vision_analyze 必须工作。 如果它返回“I don't see an image”而不是分析结果，则 MiniMax-M2.7 缺乏原生视觉能力，需要修复辅助配置。
正确的修复方法（运行两个命令，2026年7月验证）：
hermes config set auxiliary.vision.provider minimax
hermes config set auxiliary.vision.model MiniMax-Image-01
运行后检查配置 — 它应该出现在顶层 vision: 部分（~/.hermes/config.yaml 中约第559行），与嵌套的 auxiliary.vision: 部分分开。如果 vision_analyze 仍然失败，可能是图像 URL 无法访问 — 尝试重新下载或使用不同的路径。此修复会在会话间持久生效。
视觉失败时的回退方案： 使用 PIL/Pillow 从图像中取样像素颜色并进行分析性描述。读取文件，对关键区域（顶部中央、中央、底部、角落）进行采样，并报告主色调、亮度分布和基本形状。当 vision_analyze 出现问题时，此方法已作为回退方案验证有效——图像被确认为浅灰色背景上的纯黑色翅膀，带有一个泪滴形锚点。
渐变确认协议（关键 — 在编写任何 SVG 之前必需）
用户通过自然语言描述渐变，这具有模糊性，直到变为视觉可见。在编写 SVG 之前，务必使用他们确切的颜色名称口头确认序列。 这可以避免 3 轮迭代的重做。
编码前步骤（强制要求）：
用户说：“金色 祖母绿 青色 祖母绿 金色”
→ 正确：说“收到 — 金色 → 祖母绿 → 青色 → 祖母绿 → 金色，两端金色，青色在最中心。”然后编写 SVG。
→ 错误：假设你知道他们意思。直接编写 SVG。
用户说：“青色蓝色到金色，中间有祖母绿”
→ 正确：说“所以是 金色 → 祖母绿 → 青色 → 祖母绿 → 金色？还是 金色 → 青色 → 祖母绿 → 青色 → 金色？请从左到右说明。”
→ 错误：选择一种解释并编写。
来自真实迭代的关键经验（2026年7月 — 组织迭代）：
-
“青色蓝色到金色，中间有祖母绿，两端金色” → 用户确认金色在外端。祖母绿和青色在中间。
-
“青色在中间” → 青色在 50% 偏移位置，祖母绿/其他颜色在其两侧。
-
如有疑问：使用用户自己的颜色名称，给出确切的从左到右序列，并询问“这样对吗？”
-
渐变点的颜色应明确确认 — 它是独立于渐变线的元素。
-
金色在主要方向点（3/6/9/12点钟方向）的渐变边框：使用 CSS 的
conic-gradient()通过foreignObject或border-image— SVG 1.1 不支持<conicGradient>。尝试使用它会静默失败。 -
Telegram 风格的圆角图标：黑色圆形底座 + 渐变边框描边 + 中心填充。在圆形上使用
fill="none" stroke="url(#grad)"作为边框。确保 SVG 圆的半径与背景半径匹配，避免产生间隙。 -
确认后：编写 SVG → 通过 Playwright 渲染为 PNG → 单独一行发送为
MEDIA:/path/to/file.png。
V形凹口标记的光学居中对齐（来自组织迭代的关键经验）：
当标记具有向下延伸的 V 形凹口时，几何中心（50% y）看起来过高——视觉重心位于中心下方。对于 512×512 的画布，V形凹口顶点在标记组内的局部 y≈28，translate(256, 290) 为较高的组合标记（翅膀 + V形凹口）提供了正确的光学平衡。进行视觉迭代——从 +20px 开始，逐渐增加直到看起来合适。
Telegram/社交图标边框约束：
黑色圆形底座的 r 必须精确等于边框描边的内半径——不能有间隙。如果边框描边为 8px，中心位于 r=252，则内边缘为 r=248。黑色圆形也必须为 r=248。任何不匹配都会导致可见间隙或重叠。
Telegram 图标合成经验（2026年7月 — 组织迭代）：
- “无边框，仅图标” → 用户希望没有边框环，只有黑色背景上的标记。删除
<circle>边框元素，只保留黑色<rect>背景和标记组。 - “向下移动，以便看到整个 Logo” → 对于较高的标记（翅膀 + V形凹口），几何中心（50% y）会裁剪顶部。在 512 画布上将 translate y 移动到约 290。从 +20px 开始进行视觉迭代，直到顶部有空间且底部不感到拥挤。
- “使 Logo 更大” → 按比例增大标记路径坐标和描边宽度。对于示波器标记，将臂长从 ±196 扩展到 ±234 使其充满空间。臂端点的金色装饰点应正好位于圆形边缘内侧（512 画布上距边缘约 20px）。
- “将翅膀与示波器 V 形凹口结合” → V 形凹口顶点成为有机的“泪滴锚点”汇聚点。翅膀从信号臂端点向上伸展。青色点保持在信号起点（V 形凹口底部）。保持信号臂作为结构基础——它们支撑着有机的翅膀形态。
- “居中” → 几何居中（平移到画布中心）适用于视觉重心平衡的标记。对于具有向下 V 形扩展的标记，光学居中对齐需要从几何中心向下移动 40–60px。从 +20px 开始调整。
将两个 Logo 合二为一（设计合成）：
- 当用户说“将 X 与 Y 结合”时，识别每个的语义核心：X = 有机翅膀对称 + 泪滴锚点（黑色轮廓），Y = 示波器 V 形凹口 + 渐变信号 + 青色点
- 合成：保持示波器信号作为结构基础，添加有机翅膀形态作为从信号臂流出的次要叶片
- 渐变和青色点是品牌标识元素，应在合成过程中保持不变
- 不要随机混合风格——从每个中挑选最强的结构元素，并进行有目的的创作
首次迭代容易误读的标记类型
信号脉冲标记（心跳图 / 示波器 / EKG）。 当简报要求“信号”或“脉冲”标记，您将其绘制为 \_/\_（平坦基线、峰值、较小峰值、平坦基线）时，第一次迭代很可能被读作一个手臂伸展的人、波浪或地形隆起，因为人眼首先进行身体形状模式匹配。两个具体修复方法：
- 保持平坦基线段短，靠近峰值。 远离峰值的长的基线段会被读作“手臂”。将它们紧贴峰值的上升/下降处。
- 确保上坡和下坡清晰。 具有远离中心的平坦段的对称峰值被读作身体（手臂 + 头部）。一个明显不对称的下降（从基线急剧上升、峰值、然后在下降处有一个较小的二次凸起）被读作有活动的数据——那是信号，不是身体。
- 在主导峰值之外添加至少一个次要特征。 即使在下降处有一个小刻度，也会将解读从“形状”变为“数据”。没有它，信号标记默认为身体轮廓。
六边形 / 菱形 / 正方形轮廓。 当简报是“现代科技”且标记是六边形或菱形时，检查边缘是否意外地形成了字母（六边形内部的“X”会拼出某些东西，或者菱形的角度被读作指向错误方向的“V”）。如果有歧义，将顶点角度调整 5°。
作为应用图标的圆角正方形。 验证圆角半径是否与平台匹配。iOS 使用“squircle”（连续转角，在数学上与简单的 border-radius 不同）。在 200×200 的正方形上使用简单的 border-radius: 36px 会被读作“Android Material”而不是“iOS”。如果平台重要，请使用专用的 iOS 风格 squircle 生成器。
SVG 1.1 没有原生圆锥渐变元素。<conicGradient> 无效。变通方法：
- 在
foreignObject的<div>内使用 CSSconic-gradient()— 在浏览器中有效，可通过 Playwright 渲染 - 在
foreignObject内的<div>上使用border-image: conic-gradient(...) 1 - 回退到使用多停止
linearGradient旋转 45° 的圆形stroke— 可在 4 个点（包括金色）提供 4 种颜色，但不能完美地同时位于 3/6/9/12 点钟方向
常见误读模式：
- “青色到金色”+“中间有祖母绿”= 金色 → 祖母绿 → 青色 → 祖母绿 → 金色（而非 金色 → 青色 → 祖母绿 → 青色 → 金色）
- “两端金色”= 外部停止点是金色，不是青色
- “青色在中心”= 青色在 50% 偏移位置，祖母绿/其他颜色在其两侧
在询问颜色反馈之前，务必渲染为 PNG 并直观展示。 文本中的颜色描述不可靠——视觉才是真理。
环境说明
图像生成（FAL.ai FLUX.2）在此 Hermes 环境中不可用 — 未设置 FAL_KEY。请勿尝试使用 ImageGenerate 进行 Logo 工作。无论如何，SVG 优先更优：生成的是实际矢量文件，而非光栅。
通过 Playwright 渲染 SVG（2026年7月已验证可用）：
import asyncio
from playwright.async_api import async_playwright
async def render(svg_path, png_path, width=900):
async with async_playwright() as p:
browser = await p.chromium.launch()
page = await browser.new_page(viewport={'width': width, 'height': int(width*0.9)})
await page.goto(f'file://{svg_path}')
await asyncio.sleep(0.8)
await page.screenshot(path=png_path, full_page=False)
await browser.close()
asyncio.run(render('/path/to/logo.svg', '/path/to/preview.png'))
在 Telegram 上交付： 图像必须作为独立一行的 MEDIA:/absolute/file.png 发送。Markdown 图像语法  在 Telegram 上不渲染——将会静默失败。切勿在 markdown 文本块中嵌入图像链接。
黄金法则
- Logo 应首先考虑 SVG。 生成直接 SVG 矢量——而不是 AI 图像生成。SVG 无限可缩放、可编辑、可动画化，并能通过 Playwright 即时渲染。仅在概念需要照片级参考或 SVG 无法实现的复杂纹理时，才使用 ImageGenerate。已验证可靠的工作流（2026年7月）： 编写 SVG → 通过 Playwright 无头渲染为 PNG → 作为
MEDIA:/path/to/file.png发送到 Telegram。 - 进行视觉迭代。 概念 → PNG 预览 → 优化。用户在看到标记而非描述时能更好地优化。在锁定概念之前，生成 2-4 个探索不同维度（移除箭头、仅图标、颜色变化）的变体。
- 在每个维度都要具体。 “现代”毫无意义。“几何、紧凑字距、海军蓝 + 金色”才有意义。
- 强制执行避免列表。 大多数糟糕的 AI Logo 都是因为没有告诉模型要拒绝什么。
- 可扩展性不容妥协。 Logo 必须在 16×16 像素下清晰可读。
- 最小平滑几何图形就是可动画化的几何图形。 具有 400 个点的复杂追踪路径无法进行编排。
阶段 1：品牌背景捕获
首先读取现有背景
检查 .agents/brand-context.md 是否存在。如果存在，请读取它——不要询问已捕获的信息。
成熟品牌快捷方式： 如果品牌有公开网站，请在提问之前导航到该网站并直观地提取品牌背景。读取首页文案、标语、关键信息、产品名称和颜色。检查项目仓库中的 public/logo.png 或 public/favicon.ico 以查看当前 Logo。将发现保存到本技能下的 references/<brand-name>.md 中。
如果没有背景信息 — 快速收集
最多问 3 个问题：
- “品牌名称是什么？它做什么？”（一句话）
- “描述个性的 3 个词？”（例如：大胆、技术、高端）
- “您倾向于哪些颜色——或者需要避免哪些？”（或说“给我惊喜”）
从这三个答案中推断出其他所有内容。
存储品牌背景
保存到 .agents/brand-context.md：
# 品牌背景
## 品牌
- **名称**：[名称]
- **类别**：[行业/细分市场]
- **描述**：[一句话描述]
- **阶段**：[未发布 / 早期 / 成长 / 成熟]
## 品牌个性
- **个性词汇**：[词, 词, 词]
- **语气**：[正式/随意] · [严肃/俏皮]
- **欣赏的竞争对手**：[可选]
## 颜色
- **偏好颜色**：[颜色或“给我惊喜”]
- **避免颜色**：[如果指定]
## 目标
- **主要用途**：[应用图标 / 网站 / 社交媒体 / 印刷 / 包装 / 所有]
- **关键要求**：[必须单色可用 / 几何 / 等]
- **动态效果**：[品牌是否需要动画 Logo / 揭示 / 启动画面？]
阶段 2：视觉标识策略
在生成任何内容之前定义设计方向。
8 个维度
| 维度 | 问题 | 示例 |
|---|---|---|
| 名称 | 需要出现什么？ | “目标平台” |
| 行业 | 什么领域？ | 金融科技 / 交易 |
| 核心价值 | 品牌本质的一个词 | 精准 |
| 个性 | 品牌性格？ | 大胆、技术、高端 |
| 色彩情感 | 颜色传达什么？ | 金色 = 财富/高端 |
| 竞争对手差距 | 其他品牌长什么样？ | “彭博社很杂乱；我们想要极简” |
| Logo 类型 | 哪种最合适？ | 组合 / 字母标记 / 抽象 |
| 使用环境 | 它将出现在哪里？ | 应用图标、网站、深色终端 |
Logo 类型选择指南
| 类型 | 最适合 | 示例 |
|---|---|---|
| 文字标记 | 新品牌、易记名称 | Google, Coca-Cola |
| 字母标记 | 长名称、缩写 | IBM, HBO |
| 组合标记 | 最多才多艺 | Slack, Spotify |
| 抽象标记 | 科技、AI、全球品牌 | Nike, Apple |
| 徽章 | 餐厅、体育、官方机构 | Starbucks |
| 吉祥物 | 消费者应用、食品品牌 | Mailchimp |
| 花押字 | 个人品牌、机构 | Vogue |
配色框架
主品牌色 — 一个主导情感：
| 颜色 | 情感 | 最适合 |
|---|---|---|
| 海军蓝 (#0A1628) | 信任、稳定、安全 | 金融、科技、法律 |
| 祖母绿 (#00C853) | 成长、繁荣、崭新 | 金融科技、健康、环保 |
| 青色 (#00E5FF) | 精准、科技、清晰 | 科技、工程、数据 |
| 金色 (#FFD700) | 高端、奢华、成就 | 金融、优质、里程碑 |
| 黑色 (#0D0D0D) | 力量、精致、权威 | 奢华、科技、时尚 |
次要色 — 不引入新的情感。增强主色。 强调色 — 用于 CTA、数据点和 5% 关键元素。 背景色 — 纸/屏幕色，黑色或白色，中性。
阶段 3：SVG 生成与动画
编写 Logo SVG
- 使用 256×256 或 512×512
<viewBox> <defs>中的<linearGradient>用于渐变色- 干净的
<path>数据 — Adobe Illustrator 点越多 = 动画越差 - 位置使用
translate()/rotate()— 使 CSS 动画更容易
动画参考 — 来自顶级 Vercel 品牌的 5 个原则
- 单一起源点。 所有元素从同一个 (0,0) 点出现。
- 时间线分摊。 各元素在 200-600ms 范围内交错出现，并非同时。
- 有限的美丽。 包含一个稍大或稍慢的元素。
- 对比度作为工具。 亮元素在深色上移动更快。
- 没有随机移动。 每个元素的变化都有原因。
Playwright 渲染
编写.svg -> 调用 Playwright -> 生成.png -> 作为单独行MEDIA:/path/to/file.png发送
阶段 4：字体选择
最佳字体选项
- Oswald — 紧凑、几何、出色字距，适用于品牌标题
- Inter — 清晰、现代，适用于正文和 UI 文本
- JetBrains Mono — 开发者 DNA，用于技术品牌
- Space Grotesk — 未来感、高度可读，适用于科技
- Playfair Display — 衬线、优雅，适用于高端
字体来源
- Google Fonts（开源，易获取）
- Fontshare（高质量免费字体）
- Betype（专业，高质量免费字体）
- Future Fonts（抢先体验付费字体）
阶段 5：一致性 & 交付
需要避免的事项
- 动物（猫、狗、熊）——对品牌区分度极低
- 常见符号（闪电、齿轮、火箭）——过度使用
- 通用图标（心形、星星、云）——毫无区别
- 复杂阴影 —— 在小尺寸下会糊
- 多色彩过度 —— 保持 2-3
- 通用手写字体 —— 除非是古怪的消费品
- KPI 度量标准 —— 品牌足够酷时不需要膨胀的度量
完整品牌交付包
结构
brand/
├── logo/
│ ├── logo.svg # 主 Logo
│ ├── logo-icon.svg # 仅图标
│ ├── logo-horizontal.svg # 水平布局
│ ├── logo-vertical.svg # 垂直布局（如需要）
│ └── logo-monochrome.svg # 单色版本
├── brand-guidelines.pdf # 正式指南 PDF
├── brand-guidelines.md # 指南 markdown 版本
├── fonts/
│ ├── FontFile.woff2
│ └── FontFile.ttf
└── assets/
├── social-icon.svg
├── favicon.svg
└── app-icon.svg
品牌指南 .md 模板
# [品牌名称] — 品牌指南 v1.0
## Logo
- **类型**：[文字标记 / 字母标记 / 组合 / 抽象 / 徽章 / 吉祥物 / 花押字]
- **变体**：主、图标、水平、垂直、单色 [具有主、图标、水平或全部]
- **安全区域**：Logo 高度 = 1X，两侧各 0.5X
- **最小尺寸**：Web 24px = 36px
## 颜色
- **主色**：[十六进制]，[情感]
- **次要色**：[十六进制]
- **强调色**：[十六进制]
- **背景色**：黑色 #000000 或 白色 #FFFFFF
## 排版
- **标题**：[字体名称]，追踪 [X]px，粗细 [X]
- **正文**：[字体名称]，行高 [X]
- **字母标记 / 花押字**：[字体名称]，追踪 [X]px（如适用）
## 色调 / 品牌语调
- [语调指南]
## 避免
- [设计禁忌列表，例如：不要拉伸 Logo｜不要添加额外投影｜不要更改颜色百分比]
品牌复活
当品牌需要新 Logo 时的故障排除
- 品牌是否已建立？ 是 → 需要顺畅过渡（而非突然背离）。保留可识别的元素。
- 当前 Logo 是否有遗产价值？ 更新和重塑，而不是抛弃。保留命名和感性元素。
- 有竞争压力吗？ 进行竞争分析。确定与竞争对手的独特空间。
- 核心产品是否发生了变化？ 转变不一定要抛弃视觉标识。
视觉重塑战术
- 更新字体：更现代化、间距更紧凑的字体。
- 扁平化：移除复杂形状、内发光和数十个渐变。
- 添加缩略：对于反应式，将字距向上调整 0.01。
- 重塑比例：赋予徽章更适合新时代的比例，使其更现代。
在企业环境中的位置
该技能文件 (SKILL.md) 位于 .hermes/skills/logo-design/SKILL.md。
用法：在 HERMES_CHAT_MODE=true 时被 LLM 自动加载，或通过 hermes use logo-design 手动激活。
附件预览：当用户想要设计 Logo 时，他们在 LLM 上输入“设计一个名为 X 的品牌的 Logo”或“创建品牌标识”。
附录
光栅转矢量工作流
- 使用Pixel2Motion 将导出的 PNG/JPG 重新生成为干净的 SVG
- 要求：较高的对比度、干净的背景、标准字体
- 推荐 512×512+
光栅到矢量至动画
- 视觉验证后导出为 SVG 路径
- 在标准 CSS 关键帧动画中使用 SVG
- 要求：路径的点数保持在 200 像素以下，点越少，动画越流畅
这是一项用于创建专业 Logo 和品牌系统的综合技能。通过优先考虑 SVG、视觉迭代和结构化的品牌背景来获得高质量的结果。随附 Claude Code、Cursor、Codex 和类似环境中的 Hermes CLI。