“帮我做几个适合网站的图标”看起来很小，真正交付时却容易出现线条粗细不一、缩小以后看不清、颜色改不动、客户不知道该用哪个文件等问题。AI 能帮助构思和起草 SVG，但客户需要的是一套含义明确、能放进页面、可以维护的素材。
本文用搜索、下载、清单三个原创教学图标，演练一项范围明确的 AI 设计辅助服务。从需求确认到 SVG 源文件、尺寸预览、页面用法和交付说明一步步完成，不虚构客户订单或收入。图形由本站为示例编写，不声称是某个模型的一次生成结果。
一、先限定这单服务做什么
本例交付三个线性图标，使用统一的二十四乘二十四内部坐标、二的描边宽度、圆头与圆角连接，提供 SVG 原文件及预览页。它们表示一般功能，不是品牌标志，不包含特定产品的商标形象。
不包含整站 UI、字体图标库、动效、复杂插画和上线开发。需要增加数量、定制填充版、深色主题或其他文件格式时，先确认工作范围与验收方式。数量、尺寸、风格和用途都应在生成前写下来。
这类服务的价值在于理解使用位置、保证一致性并提供可用文件，不在于向客户展示生成了多少候选图。报价应考虑沟通、设计、修订、导出、测试与说明成本；本文不给出保证成交的价格或收益预期。
二、收集必要的使用信息
先问图标放在工具栏、文字前还是卡片中，实际显示多大，背景是浅色还是深色，旁边有没有文字。单独出现的搜索按钮与“搜索资料”文字旁的装饰图标，需要的可访问说明不同。
再确认三个概念的含义。下载图标用向下箭头与托盘表达；搜索用放大镜；清单用三个行项目表达。不要把删除、保存和下载混成相似箭头，也不要因为客户说“高级”就加入会降低辨识度的细节。
准备一份简短需求表，记录用途、显示尺寸、主色、文件名、使用方式和修改轮次。客户提供参考图时，先确认它用于描述风格还是允许直接使用，不能把照描别人的图标包装为原创交付。
三、让 AI 先提出结构，再生成代码
可以使用已开通、能生成代码的 AI 助手，不限定某个模型或付费套餐。先让它用文字说明每个图标由哪些几何元素组成，再按统一约束生成。下面是一份可改写的任务说明：
请为一般知识网站起草搜索、下载、清单三个线性SVG图标。
先说明各自用什么简单几何元素表达，避免品牌标志和外部素材。
统一viewBox为0 0 24 24，描边宽度2，圆头和圆角连接。
不嵌入脚本、外部图片、字体、动画或远程资源。
使用currentColor方便在内联场景修改颜色，不添加渐变和滤镜。
图形保留边缘空间，分别给出独立SVG代码和建议文件名。
说明如何在16、24、32像素显示时检查，不宣称已经测试。检查代码时，除了看画面，也要看是否突然出现外链、脚本或大段不明数据。SVG 是结构化文件，不是“看着像图片就不用检查”的附件。 本例图形只需要圆、线和路径，不应为了三个简单符号引入复杂依赖。
如果助手生成了一整套前端项目，要求收回到三个独立文件与一个预览页；如果混用了不同坐标范围，先统一坐标再比较。约束越具体，后续修订越容易说明原因。
四、把三个参考图标分别保存
新建一个练习文件夹，将下面三个代码块分别保存为 search.svg、download.svg、checklist.svg，编码使用 UTF-8。代码是本站原创教学参考，只表达通用功能概念。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
width="24" height="24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="10.5" cy="10.5" r="6.5"/>
<path d="M15 15 21 21"/>
</svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
width="24" height="24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 3v12m-5-5 5 5 5-5M4 17v4h16v-4"/>
</svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
width="24" height="24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m3 6 1 1 2-2M9 6h12m-18 6 1 1 2-2M9 12h12m-18 6 1 1 2-2M9 18h12"/>
</svg>viewBox 定义内部绘图坐标范围，width 与 height 控制默认显示尺寸。改变显示尺寸时保留相同宽高比，不要把图标拉成扁长矩形。MDN 对 viewBox 的说明可以帮助理解内部坐标如何映射到显示区域。
描边沿路径两侧展开，所以图形不能紧贴坐标边缘。清单右端到二十一，线条仍留有空间；放大预览时看起来没问题，也要在小尺寸重新检查。不要只把画布做大，就认为细节自然会在十六像素下清楚。
五、分别检查三种尺寸和两种用法
先用浏览器打开独立 SVG，确认没有解析错误、缺线或明显裁切。再把三个图标放进同一预览页，分别以十六、二十四、三十二像素显示，对比笔画、视觉重量与含义是否一致。
本例统一的是设计坐标中的描边宽度。等比缩放时，线条也会跟着变细或变粗；如果项目要求所有显示尺寸都保持固定的屏幕像素线宽，应另行讨论是否采用非缩放描边，并重新检查，不能混用两种规则却仍声称风格一致。
currentColor 的作用也需要讲清楚。内联 SVG 可以使用所在页面的文字颜色；通过 img 引用的外部 SVG，不会自动继承外层页面的颜色。 如果客户用的是 img 而不是内联代码，应提供明确颜色的版本，或与开发者约定其他实现方式，不要承诺改父元素颜色就一定生效。
下面是内联装饰图标与可见文字一起出现的用法。链接确实定位到本页说明区域，不是只有外观没有行为的按钮：
<a href="#download-notes" style="color:#21578c">
<svg aria-hidden="true" focusable="false" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
style="vertical-align:middle">
<path d="M12 3v12m-5-5 5 5 5-5M4 17v4h16v-4"/>
</svg>
查看下载说明
</a>
<section id="download-notes" tabindex="-1">
<h2>下载说明</h2><p>这是定位演示，不提供真实文件下载。</p>
</section>这里已有可见文字表达链接用途，图标可以作为装饰隐藏给辅助技术，避免重复朗读。若只放一个图标作为实际操作按钮，应给按钮清楚的可访问名称，不能仅靠图形或悬停提示让所有人猜用途。W3C 的装饰图片教程说明了如何判断图片是否增加信息。
六、给客户一份能复查的验收记录
记录每个文件是否可打开，内部坐标、描边与命名是否一致，十六像素下是否仍能辨认，三种显示尺寸下是否有明显裁切。把实际截图与发现的问题保存下来，修改后再跑一遍同样的预览。
本站对这组三个参考 SVG 做了结构检查，并使用浏览器预览尺寸组合及内联颜色。该检查不能替代所有目标产品环境中的兼容测试，也没有覆盖读屏软件和完整无障碍审查。验收记录里只写实际做过的检查。
图标是否被普通用户理解，还需要在目标界面上验证。放大镜通常表达搜索，但如果客户把它放在“放大图片”位置，含义可能不同。不要因为图形符合通用习惯，就忽略真实页面中的文字与上下文。
七、整理文件、授权与修改边界
交付文件夹可以包含三个 SVG、preview.html、README.md 和修改记录。说明每个图标的用途、内部尺寸、默认颜色行为、推荐使用方式和已经验证的环境；若额外导出 PNG，分别写清像素尺寸，不把放大的小图当高清原稿。
真实商业交付应在约定中明确使用范围、源文件是否交付、后续修改如何计费、是否存在第三方素材，以及哪些权利能够授予客户。本例提供的是原创教学代码，不代表客户可以把其他项目生成的任何内容都当作无争议资产。
客户要求把清单图标换成某品牌标志，已经改变题材和权利范围，应重新确认；要求修改线条粗细可能属于原有修订，但新增几十种图标或改整站导航不是同一个小任务。先约定这些边界，比交付时反复解释更有效。
八、常见问题与可复用流程
浏览器显示源码文本，检查是否误存成 .svg.txt，或服务器是否以合适类型返回；图形颜色改不动，先区分内联代码与 img 文件引用；边缘裁切，检查路径范围、描边宽度和画布留白，而不是随意压扁图形。
小尺寸看不清，优先删减细节、调整间距与几何关系，再考虑是否需要独立的小尺寸版本。不同图标看起来一粗一细，检查是不是混用了填充、不同描边和不同内部坐标。文件太大，检查是否夹带编辑器元数据或不需要的嵌入内容，但不要盲目删除会改变图形含义的元素。
一项可以复用的服务流程应该留下需求、生成约束、人工修订、结构检查、尺寸预览与交付说明。AI 可以加快起草，真正让客户愿意使用的，是图标在指定位置表达清楚、文件可维护，并且交付边界明确。
还没有公开评论，欢迎分享你的想法。