SuperAPI AI 工具集

logo-design

设计与创作

查看项目

更新于 10-16 03:47

技能介绍

用途:设计和创建专业 SVG 标志、品牌标记、字标与图标。核心原则是把 SVG 当作代码手写,保持干净、精简、语义明确,每个元素和属性都应物有所值。

主要能力与参考文档路由:路径弧线标志与常见路径形状见 references/path-patterns.md;标志设计、排版与负空间见 references/logo-techniques.md;图标设计、网格系统与像素对齐见 references/icon-design.md;渐变、蒙版、裁剪、滤镜与变换见 references/advanced-techniques.md;动画见 references/animation.md;优化、雪碧图与 SVGO 配置见 references/optimization.md;无障碍与浏览器陷阱见 references/accessibility-and-pitfalls.md;编辑流程、布尔运算与合并 SVG 见 references/editing-workflow.md。

使用方式:始终从给定 SVG 骨架结构开始,按设计画布调整 viewBox,省略 width/height 让 SVG 随容器缩放,仅在需要固定尺寸时添加。画布尺寸约定包括 16x16(微图标、favicon)、20x20(小 UI 图标)、24x24(标准图标,最常用,默认值)、32x32(中型图标、导航)、48x48(大尺寸展示图标),标志与插画用自定义尺寸匹配自然宽高比。形状与路径选择:基本几何形、强调可读性、需按属性动画或将被程序化修改时用形状图元;含曲线复杂轮廓、需最小化元素数量、需合并为单元素、从设计工具导出时用 path。样式默认值可设在根 svg 上:图标通常 fill=none、stroke=currentColor、stroke-width=2(24x24 下)、stroke-linecap 与 linejoin 为 round;标志通常为填充。stroke-width 以 viewBox 单位计,需相对画布尺寸设置。形状转路径适用于布尔运算合并、作为更大路径组合的一部分、仅支持 path 的环境或最小化 DOM;保留形状适用于可读性、属性动画或程序化修改。可使用 evenodd 处理带孔复合形状。标志设计流程要求先澄清设计方向,用 AskUserQuestion 按领域定制呈现风格、重点与灵感品牌选项;探索多个隐喻而非同一隐喻的多种布局;保证结构多样性;立即搭好预览并逐步填充,用 cp 复制 assets/preview.html,写出 SVG 后更新 variants.js,用 open 或 xdg-open 打开预览,预览每 3 秒自动重载;彩色标志始终创建 -dark.svg 变体;绘制前规划垂直空间预算。反模式方面应始终使用 viewBox,避免在 g 组上设 fill=none,避免 px 单位、编辑器元数据、xlink:href、分布 SVG 中用 text 写字标、过深嵌套变换。资料未提供收费、价格与平台支持信息。