尧图网页设计 
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-skilllogo-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%。光学修正自查清单 ✅交付前照这张清单过一遍均源自技能内置文档检查项标准出处圆形/尖角 overshoot曲线 1–3%尖顶 3–6%visual-techniques.md圆角连接处无收腰曲率渐进过渡visual-techniques.md反白版本笔画收细 2–5%与正版本并排视觉等重visual-techniques.md横竖笔画横笔细 5–10%typography.md容器内居中光学居中略高于几何中心svg_audit.py混合形状同框下圆 方 三角按目视等大小visual-techniques.md全部通过后标志才会出现在最终交付物里结语看不见的 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 1%打磨背后的隐形细节：logo-design-skill 标志设计光学修正技巧完整解析
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-skilllogo-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%。光学修正自查清单 ✅交付前照这张清单过一遍均源自技能内置文档检查项标准出处圆形/尖角 overshoot曲线 1–3%尖顶 3–6%visual-techniques.md圆角连接处无收腰曲率渐进过渡visual-techniques.md反白版本笔画收细 2–5%与正版本并排视觉等重visual-techniques.md横竖笔画横笔细 5–10%typography.md容器内居中光学居中略高于几何中心svg_audit.py混合形状同框下圆 方 三角按目视等大小visual-techniques.md全部通过后标志才会出现在最终交付物里结语看不见的 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考