AI 技能/插件AI 评测【免费下载链接】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 仓库中 references/svg-construction.md 的全部实操规范如何以 AI 直接书写 SVG 标记的方式把设计概念转成干净、几何化、生产级的 SVG 标志代码并配套仓库的审计与验证脚本链路。读完你将掌握文件级规范、图元化构造策略、路径几何书写、负空间与布尔并集、文字路径化、变体导出以及用 svg_audit.py、preview_sheet.py 和 render_png.py 做自动化校验的完整工作流。1. 文件规范先定好画布与骨架在写出任何路径数据之前先固定 SVG 文件的顶层结构。规范给出了一个可直接套用的模板svg xmlnshttp://www.w3.org/2000/svg viewBox0 0 256 256 width256 height256 roleimg aria-labelledbytitle title idtitleHarbor logo/title path fill#0F7C80 d…/ /svg关键约束逐条展开viewBox 优先在干净的整数画布上工作。符号symbol用256 × 256或512 × 512组合标lockup固定高度 256宽度跟随内容例如0 0 960 256。仓库内置的 1400 参考库遵循同一约定——从 catalog.json 可以看到库内文件的宽度/高度与宽高比记录约 99% 的文件宽度为 256 或 512。svglib.py的view_box()解析 viewBox 时若缺失则回退到width/height属性但这样的文件会被审计脚本标记为no-viewbox警告svg_audit.py无 viewBox 时logo 无法按预期缩放。留白Padding在 viewBox 内保持一致的留白符号约画布尺寸的 4–8%或者干脆裁切紧凑、把间距交给 clear-space 规则——关键是整个标志组内保持一致。整数或 1–2 位小数坐标过度精度如127.99999既膨胀文件体积又掩盖对齐问题。审计脚本对此有专门的检测坐标出现 4 位以上小数会触发precision提示svg_audit.py建议四舍五入到 0–2 位。包含title为无障碍而设ID 要有语义如symbol、wordmark。缺少 title 会触发no-title提示。逻辑分组用g idsymbol、g idwordmark组织便于组合标重组。命名规范每个变体一个文件命名可预测如brand-logo-horizontal-color.svg、brand-symbol-black.svg。2. 构造策略先用语言描述再选图元写路径数据之前先用文字描述构造过程。文档给出两个范例圆心 (128,128)、半径 r96 的圆从右上角切除一个 45° 楔形缺口处放一个 r28 的小圆作为点。字母 M 由 256 网格上的三根 40 单位宽竖条构成中间顶点升到 y96外侧笔画在基线下方伸出 4 个单位以抵消尖顶的视觉过冲。然后为每个部分选择最简图元circle、ellipse、rect rx基本图元易读易调path其余一切以及最终合并的剪影polygon直线边形状。同时选定一个单位如 256 画布上的 8 或 16把关键尺寸对齐到它的整数倍标志会显得系统化后续网格对齐几乎零成本。记录用到的半径与角度清单反复复用。这一图元优先策略在源码中同样可见svglib.py的shape_to_subpaths()svglib.py把rect含圆角、circle、ellipse、polygon、line全部转换为等价路径后再做几何分析——审计器正是按此路径统计锚点数、包围盒与线段角度的。3. 路径书写干净的几何命令集M移动、L/H/V直线、A椭圆弧圆段曲线的利器、C三次贝塞尔、Q二次贝塞尔、Z闭合。大写 绝对坐标设计阶段优先小写 相对坐标。圆弧表达圆形几何A r r 0 largeArc sweep x y。基于圆的曲线半径一致、易于验证。半圆帽示例M 64 128 A 64 64 0 0 1 192 128。贝塞尔表达有机曲线锚点放在极值点曲线的上、下、左、右控制柄在极值处水平或垂直这样曲线平滑可预测、锚点少。用三次贝塞尔画四分之一圆时控制柄长度 ≈ 0.5523 × 半径。锚点要少每个多余点都是抖动wobble的隐患。曲线需要很多点时拆成圆弧。角度精确对角线端点由精确角度计算。30°/60° 用 sin/cos 偏移0.5、0.86645° 用相等的 x/y 偏移。避免近似角度如 44°、偏离垂直 2°。审计脚本正是为此而设CLEAN_ANGLES [0, 15, 30, 45, 60, 75, 90, 105, 120, 135, 150, 165, 180]凡直线段角度与最近整洁角度偏差在 0.3°–3° 之间、且长度不小于画布 4% 的都会被标记为near-miss-angle——它们读起来像错误吸附到标准角度svg_audit.py、svg_audit.py。平滑圆角抗骨节效应不要用一段平直圆弧直接接直线边而是延伸曲线控制柄让曲率渐进。尺寸为s的优质 squircle 圆角约在转角前 1.3 × s 处开始控制柄约 0.6 × s。闭合形状填充路径永远以Z结尾。4. 负空间与复合形状把外轮廓与孔洞放进同一条路径使用fill-ruleevenodd——子路径重叠奇数次的区域即成为孔洞或者让孔洞按相反方向绕行、配合默认nonzero规则。示例path fill-ruleevenodd dM128 16 A112 112 0 1 1 127.9 16 Z M128 80 A48 48 0 1 0 128.1 80 Z/若在两个形状之间隐藏图形箭头、字母先设计负形再围绕它构建正形保证负形干净。主文件master中避免mask和clipPath除非万不得已——部分工具以及刺绣/切割软件支持不佳。最终文件把几何烘焙进路径探索阶段用 mask 提速没问题。两个同色且接触的填充形状合并为一条路径避免渲染或切割时出现发丝缝隙。这一条与审计器的white-knockout警告直接呼应svg_audit.py会检测白色形状画在彩色形状之上的伪镂空提示它们应在彩色/照片背景上成为白斑、并破坏单色版本——真正的孔洞应该用fill-ruleevenodd或减法路径实现svg_audit.py。export_variants.py的 docstring 也警告白色伪切割在单色转换中会变成白块需要用真实孔洞修复主文件export_variants.py。5. 描边 vs 填充探索阶段可以用描边stroke-width、stroke-linecapround、stroke-linejoinround快速迭代。主文件中把描边转换为填充轮廓使标志在任何地方等比缩放、且能挺过忽略描边设置的工具。作为没有描边转轮廓工具的 AI有两个选择直接构造偏移轮廓几何按半描边宽偏移曲线或保留描边并确认整份 SVG 缩放时描边宽度随之等比缩放当描边位于被缩放的 viewBox 内部时确实如此。剩余描边要在交付说明中标注交由矢量编辑器扩展。单线monoline标志描边宽度相对尺寸设定若需在 24 px 可读宽度应 ≥ 标志宽度的 8%。审计脚本的strokes提示会统计带有效描边的元素数量建议在主文件中把描边扩展为填充轮廓或注明这是基于描边的变体svg_audit.py。6. SVG 中的文字最终标志绝不依赖字体最终标志不得依赖已安装字体text在其他机器上渲染不同甚至完全不显示。按优先级的三条路径几何化构造字形为路径适合短 wordmark、monogram、字母符号——也强制产出可拥有的自定义字母若用户有字体文件和矢量工具设置文字、定制后转轮廓粘贴路径数据仅限探索/演示时用text 明确命名的字体栈并注明交付前必须转轮廓。绝不以text作为最终主文件。审计器对此是硬性检查存在text/tspan直接报FAIL / live-text最终标志必须使用转轮廓路径字体因机器而异svg_audit.py。绘图细节统一笔画宽度、圆字母过冲、水平笔画略细、光学间距参见 references/typography.md。7. 颜色、渐变与变体使用色板中的精确 HEX 值限制在已批准颜色内。颜色直接放在元素上fill#…而非style块兼容性最好可选currentColor做 UI 友好的单色变体。审计脚本对style块给出style-block提示内联 fill 属性跨工具更便携svg_audit.py。渐变定义在defs中用gradientUnitsuserSpaceOnUse与显式坐标保证各处渲染一致始终同时保留一份纯色主文件。审计器对渐变给出gradient警告并引用库内数据约 19% 的参考标志使用渐变对应 stats.json 中gradient_share: 0.19。从主文件生成的变体集export_variants.py 自动化颜色替换*-color.svg全彩、*-black.svg、*-white.svg反白可考虑略薄的几何、*-mono-hex.svg单一品牌色组合标lockuphorizontal、stacked、symbol、wordmark应用/收藏夹图标符号置于纯色圆角方形或圆形容器上符号光学尺寸通常为容器的 60–70%。从源码看export_variants.py的具体实现recolor()用正则同时替换fill/stroke/stop-color属性和 CSS 样式中的颜色none、transparent、url(...)保持不变未上色形状通过给根元素补fill跟随新色export_variants.pysquare_wrap()把真实包围盒居中到 256×256 画布——square变体 padding 默认 0.08faviconpadding 0.02app-icon用rx0.22522.5% 圆角的容器、符号缩放默认--icon-scale 0.62并支持--optical-offset光学微调上移export_variants.py、export_variants.py。--web-icons还会生成 favicon.ico16/32/48、apple-touch-icon180、icon-192/512、maskable-512maskable 版本把符号限制在 80% 安全区内symbol_scalemin(icon_scale, 0.5)、site.webmanifest 与 head-snippet.htmlexport_variants.py。小尺寸建议用简化画稿通过--favicon-source传入。8. 常见构造配方带缺口的完美圆开口环——探索阶段写法交付前需扩展为填充轮廓path fillnone stroke#111 stroke-width32 stroke-linecapround dM 201.5 54.5 A 104 104 0 1 0 232 128/圆角方形容器应用图标22% 圆角半径256 画布上 rx56 ≈ 22% × 256rect x0 y0 width256 height256 rx56 fill#0F7C80/等边三角形边长 203.2、高 176按包围盒居中——其视觉重心质心偏低若在容器中显得头重脚轻可上移几个单位polygon points128,40 229.6,216 26.4,216 fill#111/字母 A 作为字母符号——平顶、所有边同一 1:2 坡度、恒定 48 单位笔画腿、横杠、顶点全为 48path fill#111 fill-ruleevenodd dM104 32 H152 L248 224 H200 L184 192 H72 L56 224 H8 Z M96 144 H160 L128 80 Z/圆 尾巴合成的对话气泡已合并为一条路径path fill#111 dM128 24 A104 104 0 1 1 61.6 208 L28 236 L37.9 180 A104 104 0 1 0 128 24 Z/这些是起点按概念需要精修比例并加入独有转折。9. 主文件中应避免的内容避免原因改用text依赖字体转轮廓路径image/ 内嵌 PNG非矢量、模糊矢量路径filter模糊、阴影、发光渲染不一致、不可打印平面形状用更深的形状模拟阴影大量mask/clipPath工具兼容性烘焙进路径深层嵌套 transform难编辑、舍入误差把 transform 应用到坐标单一包裹层translate/scale如export_variants.py写出的那样可以接受20 颜色 / 大量渐变复现差、记忆弱≤3 个纯色阶梯渐变小于尺寸 1/64 的微细节缩小时消失合并或删除偏离 1° 的角度看起来像失误精确角度编辑器元数据、超高精度膨胀干净标记审计脚本对表格中多项有直接检查raster-imageFAIL、filterWARN、maskINFO、editor-metadata检测sodipodi/inkscape:/sketch:/data-name等、precision、near-miss-angle、many-colors超过 4 色告警并引用约 75% 的参考标志 ≤3 色对应 stats.json 中n_colors中位数 2。10. 轮廓与布尔并集生产交付没有矢量编辑器就无法做布尔并集但可以接近同一条path内、默认nonzero规则下按同一方向绕行的重叠子路径在屏幕与印刷中渲染为无缝并集——对网页与多数印刷主文件可接受。切割机、乙烯基刻字机与刺绣软件偏好真正合并的轮廓。若安装了 Inkscape可用命令行扩展描边并合并一切inkscape logo.svg --actionsselect-all:all;object-stroke-to-path;path-union;export-plain-svg;export-filename:logo-outlined.svg;export-do否则在交接说明中注明设计师需在矢量编辑器中执行Outline StrokeUnite。svglib.py的parse_path()svglib.py与shape_to_subpaths()正是按子路径 线段模型解析路径数据的这为同路径多子路径的复合形状审计提供了底层支持。11. 验证每次重要迭代后都跑一遍python3 scripts/svg_audit.py path/to/logo.svg # 结构、颜色、复杂度、角度、文字/栅格检查 python3 scripts/preview_sheet.py path/to/logo.svg -o preview.html # 尺寸、背景、单色、模糊、镜像、favicon python3 scripts/render_png.py path/to/logo.svg --size 512 -o look.png # 快速渲染查看在浏览器中打开预览实际查看若你是 Agent使用可用的浏览器/截图工具。审计会把文件复杂度与参考库的分布对比让你看出某个标志对 logo 来说是否异常复杂。从源码看三个脚本的能力边界svg_audit.py除前述检查外还统计锚点数并与库内百分位对比——anchors_all中位数 75、p95 379.45方形标志anchors_square中位数 53、p95 274stats.json。锚点数超过 p95 报complex警告超过 95% 的可比参考标志请简化超过 p75 报complexity提示。微细节按尺寸比例判定方形标志以画布 1/48 为基准约 48 px 时的 1 px宽型/横版组合标以高度 1/32 为基准svg_audit.py。它还检查溢出画布overflow、水平/垂直居中偏差off-centre-x/y、画布填充率small-in-canvas、对比度--bg时对对比度 3:1 的部件告警、 4.5:1 的小文字告警svg_audit.py并给出production-readiness score满分 100FAIL 扣 25、WARN 扣 8、INFO 扣 1svg_audit.py。支持--json输出机器可读报告。preview_sheet.py生成 HTML 测试表含 16 px 起的尺寸阶梯[16, 20, 24, 32, 48, 64, 96, 128, 256]、像素级 favicon 测试、浅/深/品牌色/照片/图案背景、灰阶/单色/模糊/镜像/180° 旋转、真实上下文浏览器标签、应用图标、头像裁剪、网站页头、名片、并排对比与货架测试--refs或--refs-industrypreview_sheet.py。内置十项自查清单16–24 px 是否清晰、剪影是否通过模糊测试、单色是否仍承载概念、反白是否显重、镜像/旋转是否有意外读法、品牌色/照片/图案上是否成立、favicon 是否光学居中、货架上是否突出、灰阶是否分离、能否凭记忆再认。render_png.py按顺序尝试 cairosvg → rsvp-convert → inkscape → 无头 Chrome/Chromium → macOS Quick Look把 SVG 渲染为精确尺寸的透明 PNGrender_png.py。渲染前端不可用时保持几何尽可能简单显式。全套规范与 SKILL.md 中的 Phase 4–5黑色先行构建与测试精修)以及 references/testing-checklist.md 构成完整闭环规范负责写出干净的几何脚本负责证明它经得起缩放、单色、反白与印刷的考验。赞分享AI 技能/插件AI 评测【免费下载链接】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 构建可扩展 Identity System 的完整指南从标志到品牌身份系统基于 logo design skill 构建可扩展 Identity System 的完整指南 品牌标识的最终交付物往往不止一个标志文件AI 技能/插件AI 评测logo-design-skill 标志类型决策指南从 Wordmark 到 Emblem 的选择、权衡与实战依据logo design skill 标志类型决策指南从 Wordmark 到 Emblem 的选择、权衡与实战依据 标志类型的选择是发生在绘制之前的第一步战略AI 技能/插件AI 评测SVGL基于 SvelteKit 与 Tailwind CSS 的开源 SVG Logo 图标库 —— 从图标提交规范到本地 API 部署全指南SVGL基于 SvelteKit 与 Tailwind CSS 的开源 SVG Logo 图标库 —— 从图标提交规范到本地 API 部署全指南 SVGLS前端开发工具上一篇DigitalHippo监控告警Prometheus与Grafana集成终极指南下一篇SwiftyUserDefaults社区贡献指南如何参与开源项目开发 创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考