企业官网建设流程全解析

1%打磨背后的隐形细节：logo-design-skill 标志设计光学修正技巧完整解析

【免费下载链接】logo-design-skillA comprehensive logo-design skill for Claude, Gemini CLI, Codex and other AI agents: principles, process, SVG craft, testing tools and a 1,400+ logo reference library.项目地址: https://gitcode.com/gh_mirrors/lo/logo-design-skill

logo-design-skill 是一款面向 Claude、Gemini CLI、Codex 等 AI 智能体的开源logo 设计技能，它把品牌标志从创意简报一路推进到可投产的 SVG 文件。而真正让 AI 画的标志从"像那么回事"跨入专业水准的，正是它内置的一套**光学修正（optical corrections）**规则——这些 1% 级别的隐形细节，肉眼几乎察觉不到，却决定了标志的档次。本文为你完整解析 overshoot、骨感效应、辐照效应等五大技巧，以及如何在 SVG 中落地和验证它们。👁️

上面这张图是该技能跑完 28 个虚构品牌后的成果。仔细看这些图标：没有任何一个元素是"数学上居中"的——圆形、弧线、文字都做了细微的视觉补偿，这就是本文要拆解的功夫。

为什么是"光学"修正：眼睛不撒谎，但也不诚实

设计师早就发现：几何相等 ≠ 视觉相等。两个测量尺寸完全一样的形状，放一起时一个会显得偏小、偏轻、偏下。logo-design-skill 把这条原理写进了核心准则："几何、光学修正、间距——这些隐形细节让好与伟大分道扬镳"（见 SKILL.md 的原则第 11 条）。

在它的 完整流程 中，光学修正被安排在Phase 5 测试与打磨阶段（循环至少两次），与缩放测试、镜像测试并列，是交付前的硬性关卡，而不是可选的润色。

五大核心光学修正技巧

以下全部出自 references/visual-techniques.md 第 3 节，这是整个技能中"工艺层"的核心文档。

1️⃣ Overshoot（超线）：让圆形"长高"一点

圆形和尖角形状在同样测量高度下，看起来比平边形状小：O挨着H会显得矮一截，夹在两个方块中间的圆显得太小。

修法：让弧线与顶点略微越过基线/字高线，幅度约为高度的 1–3%，尖锐顶点（三角形）可放到 3–6%。注意这属于最后阶段的微调，只需动一两个锚点。文档原话很直白："这就是 great 和 perfect 之间的差距。"

在 svg-construction.md 里你能看到具体的构造描述：字母 M 的外侧竖笔画"向下延伸 4 个单位，用于尖顶点 overshoot"——把抽象原则翻译成了可执行的几何语言。

2️⃣ 骨感效应（Bone Effect）：胶囊形为什么看起来"收腰"

当曲线与直线相切连接时（胶囊形、圆角矩形、圆角三角形），直线段会像骨头一样视觉上向内捏紧。技能给出了三档由快到好的修法：

• 把端部曲线拉伸成椭圆（缓和但除不尽）
• 调整贝塞尔手柄，让曲率从零渐进爬升到完整圆弧
• 使用平滑曲率过渡（squircle 类圆角），并把调好的曲线复制到对称角

💡 小技巧：并非每处都要修——有时"骨感"本身有体积感表达力。但修掉它通常能释放内部空间，让圆角标志在 16 px 下更利落。SVG 中的落地方案见 svg-construction.md 平滑圆角：曲线手柄长度约为圆角尺寸的 0.6 倍，并从切点前约 1.3 倍圆角尺寸处起笔。

3️⃣ 辐照效应（Irradiation）：白底黑字"显瘦"，黑底白字"显胖"

浅色形状在深色背景上看起来更大更粗。所以反白（白 on 黑）版本的 logo 会比正版本显得更重——处理办法是提供一份笔画略细 2–5% 的反白版本，通过把路径向内偏移再减除来实现。

这份要求被写进了测试清单的硬指标："单色白 on 黑要成立，且不能看起来比黑色版更重"（见 testing-checklist.md 颜色与明度一节）。另一个连带细节：深色底上的细白线会视觉"晕开"糊成一片，所以字母内腔（counter）要保持开敞。

4️⃣ 横笔比竖笔细：等宽 ≠ 等重

同样粗细的水平笔画看起来比垂直笔画更粗。在文字与几何标志中，横笔通常要做细 5–10%才能视觉等重；笔画在锐角相交处，还要在交点附近收细，避免小尺寸下出现"墨团"。这一条在 typography.md 字形工艺 中与"间距看面积、不看距离"的光学字距并列为基本纪律。

5️⃣ 光学中心：几何居中 = 视觉偏低

一个区域的光学中心略高于几何中心——在容器里数学居中的标志，看起来往往是偏下的；而不对称图形（向右的三角、播放按钮）要朝视觉质量中心偏移，而不是包围盒中心。

在 SVG 中落地：让工具替你"抬"标志

原则再好，落地才是关键。logo-design-skill 的光学修正不止于文档，而是有工具兜底的：

• 居中检测：svg_audit.py 会检查 viewBox 内标志的四周留白。发现水平/垂直边距不等时，它给出的提示不是"居中它"，而是——"是有意的光学居中吗？否则请居中"，并特别提醒你"光学中心略高于几何中心"。也就是说，轻微偏上是被工具认可的正确偏差。
• 交付期偏移：export_variants.py 提供--optical-offset参数，例如-0.02就能把方形/应用图标/favicon 输出整体上抬画布的 2%——为 App 磁贴和 favicon 做光学居中不再靠手抖。
• 打磨阶段兜底：在 SKILL.md Phase 5 中，光学修正（overshoot、骨感、横笔收细、光学居中、反白版收细）与缩放、平衡、镜像误读一起，构成至少跑两轮的打磨循环；选定方向进入 Phase 7 套件制作 时，"最终几何 + 光学修正 + 小尺寸简化版 + 收细的反白版"再次被列为第一项任务。

概念阶段就带真实尺寸预览，也方便你直接"看到"这些修正的效果：

图中每个方案下方都按 64/32/16 px 真实像素排出了缩放序列——overshoot 是否足够、横笔是否收细，在这种并排对照下无所遁形。

验证光学效果：用尺寸阶梯和反白测试说话

修正做得对不对，最终要过测试这一关。技能用preview_sheet.py生成测试表，把方案并排放到 96/32 px、单色、反白，再沿尺寸阶梯一路走到 16 px：

这张真实测试表来自 Maison Orvelle 案例：三个方案并排过尺寸阶梯，能清楚看到字标方案在小尺寸下逐渐糊掉、而带 overshoot 的 Didone 字距单字母标志依然站得住——光学修正的收益，全部浓缩在这条阶梯上。

对应的检查项散落在 testing-checklist.md 的"形式"一节（overshoot、骨感、横笔收细、光学中心四项打包成一条）和 process.md 的打磨阶段；做评审批评时，critique.md 甚至给出了一行速查："圆挨着字母显得小 → 缺少 overshoot → 把圆形放大 1–3%"。

光学修正自查清单 ✅

交付前，照这张清单过一遍（均源自技能内置文档）：

全部通过后，标志才会出现在最终交付物里：

结语：看不见的 1%，看得见的高下

光学修正的魅力恰恰在于它的"隐形"：overshoot 的那 1–3%、横笔收细的那 10%、图标上抬的那 2%，观众说不出哪里不对，只觉得"这个标志就是顺眼、耐看"。logo-design-skill 把这些经验从资深设计师的直觉，变成了 可查的文档、可跑的脚本 和 可勾选的清单——这正是它能把普通 AI 变成"有纪律的识别设计师"的关键。下次你让 AI 画 logo 时，不妨把"overshoot 和光学居中做了吗"加进提示词，那 1% 的分寸，往往就是作品与作品之间的距离。

【免费下载链接】logo-design-skillA comprehensive logo-design skill for Claude, Gemini CLI, Codex and other AI agents: principles, process, SVG craft, testing tools and a 1,400+ logo reference library.项目地址: https://gitcode.com/gh_mirrors/lo/logo-design-skill