一、产品简介
为了解决公司设计师图标/插图创作效率低的问题，我开发了一款 figma 插件： AI Icon Generator，让设计师能够借助 AI 的力量，快速生成风格统一的图标和插图。只需提供简单的草图和风格参考，AI 就能帮你完成细节绘制，将图标生产时间从 1 小时缩短至 10 分钟。
由于目前 AI 生成的 SVG 的能力有限，所以在生成复杂图形上存在无法达到预期的问题，但是在简单图形上的能力还是不错的
核心价值
痛点 | 解决方案 |
从零绘制图标耗时长 | AI 帮你完成大概，你只需把控创意方向 |
多人协作风格难统一 | 通过风格参考库确保输出风格一致 |
第三方图标库难融合 | 基于你自己的设计语言生成图标 |
二、首次使用：配置 API
在使用生成功能前，需要先配置 Claude API Key。或者从第三方中转站获取
步骤
- 获取 API Key
- 访问 Anthropic Console 注册账号
- 在 API Keys 页面创建新的 API Key
- 打开设置
- 在插件右上角点击 ⚙️ 设置图标
- 填写配置
- API Base URL：默认为官方地址，如使用代理服务可自定义
- API Key：粘贴你的 Claude API Key
- AI 模型：选择要使用的 Claude 模型（推荐 claude-opus-4-5-20251101，经过多次测试，是生成的结果最符合预期的模型）
- 验证配置
- 点击 验证 按钮确认配置有效
- 验证成功后点击 保存设置
> 💡 安全提示：API Key 仅存储在你的本地设备中，不会上传到任何服务器。
三、核心功能：生成图标
3.1 工作流程概览
选择风格参考 → 输入主题描述 → (可选)添加草图 → 生成 → 预览 → 插入画布
3.2 详细步骤
步骤 1：选择风格参考
风格参考决定了生成图标的视觉风格。
- 在「生成」页面的风格参考区域，点击已有的参考图标进行选择
- 可以选择 多个参考，AI 会综合学习这些风格特点
- 如果还没有参考，点击 去添加 跳转到参考库
步骤 2：输入主题描述
在「主题描述」输入框中描述你想要的图标内容：
单个生成示例：
云服务器
批量生成示例（每行一个主题）：
云服务器
数据库
安全盾牌
消息通知
> 💡 支持一次性生成多个图标，插件会逐个生成并自动保存到历史记录。
步骤 3：选择提示词模板（可选）
如果需要特定的风格效果，可以选择预设模板：
模板名称 | 适用场景 | 效果描述 |
科技风图标 | 技术产品 | 渐变、光晕、科技感 |
扁平化图标 | 通用 UI | 简洁清晰、纯色块 |
插画风格 | 营销页面 | 活泼有趣、细节丰富 |
线性图标 | 工具类应用 | 线条统一、简约大方 |
步骤 4：添加草图（可选但推荐）
草图能让 AI 更准确地理解你想要的构图布局。
- 在 Figma 画布上用简单的形状画一个粗略草图
- 选中这个草图
- 在插件中点击 获取草图 按钮
- 草图预览区域会显示你的草图
> 💡 草图不需要精细，重点是表达元素的位置关系和大致比例。
步骤 5：设置输出尺寸
根据使用场景设置合适的尺寸：
- 图标：建议 48×48 或 64×64
- 插图：建议 400×300 或 600×400
步骤 6：生成图标
点击 生成图标 按钮，等待 AI 生成（通常需要 5-15 秒）。
步骤 7：预览与插入
生成完成后：
- 在预览区域查看生成结果
- 满意则点击 插入到画布 将图标添加到 Figma
- 不满意可点击 重新生成 尝试新的结果
四、风格参考库管理
风格参考库是保持设计一致性的关键。
4.1 添加风格参考
- 切换到 参考库 标签页
- 在 Figma 中选中一个代表你期望风格的图标/插图
- 点击 添加参考 按钮
- 在弹窗中点击 从 Figma 选中获取 获取 SVG
- 填写参考名称（如「品牌主图标风格」）
- 添加描述说明风格特点（可选）
- 点击 添加 保存
4.2 管理参考
操作 | 方法 |
查看详情 | 点击参考卡片 |
编辑 | 悬停卡片，点击 ✏️ 按钮 |
删除 | 悬停卡片，点击 🗑️ 按钮 |
4.3 最佳实践
- 添加 3-5 个 代表性的参考，覆盖不同的元素类型
- 选择 已完成的、高质量的 图标作为参考
- 在描述中详细说明风格特点（如：渐变方向、圆角大小、线条粗细）
五、提示词模板
5.1 使用预设模板
- 切换到 模板 标签页
- 浏览预设模板列表
- 生成时在下拉菜单中选择对应模板
5.2 创建自定义模板
- 在模板页面点击 添加模板
- 填写模板名称（如「我的品牌风格」）
- 在模板内容中编写提示词，使用 {theme} 作为主题占位符
- 保存模板
模板示例：
生成一个现代简约风格的图标，主题是{theme}。
要求：
- 使用品牌主色 #3B82F6
- 圆角统一为 8px
- 2px 描边
六、历史记录
所有生成结果都会自动保存到历史记录中。
功能
操作 | 说明 |
预览 | 查看之前生成的图标 |
重新插入 | 将历史结果再次插入画布 |
复用设置 | 使用相同的参考和提示词重新生成 |
删除 | 移除不需要的记录 |
清空 | 一键清空所有历史 |
> 💡 历史记录最多保存 50 条，超出后会自动删除最早的记录。
七、使用技巧
提高生成质量
- 风格参考越具体越好 - 参考图标的风格越接近你想要的效果，生成质量越高
- 使用草图引导构图 - 草图能大幅提高 AI 对布局的理解
- 描述要简洁明确 - 「数据库」比「一个用来存储数据的东西」效果更好
批量生成效率
- 将同一风格的图标主题放在一起批量生成
- 每行一个主题，一次最多建议 10 个
- 批量生成时每个结果都会单独保存到历史记录
迭代优化
- 如果第一次生成不满意，可以点击 重新生成 尝试新的结果
- 在「其他要求」中补充具体的修改意见（如「减少细节」「使用更粗的线条」）
八、常见问题
Q：生成失败怎么办？
- 检查 API Key 是否正确配置
- 确认网络连接正常
- 如果使用代理，检查 Base URL 是否正确
Q：生成的图标风格不对怎么办？
- 添加更多、更具代表性的风格参考
- 在参考描述中详细说明风格特点
- 使用提示词模板提供更具体的要求
Q：如何保持多个图标风格一致？
- 使用 相同的风格参考组合
- 使用 相同的提示词模板
- 批量生成同一系列的图标
Q：草图应该画成什么样？
- 不需要精细，简单的形状即可
- 重点表达元素的位置、大小关系
- 可以用矩形、圆形、线条组合
九、快捷操作一览
操作 | 位置 | 说明 |
⚙️ 设置 | 右上角 | 配置 API 和默认参数 |
获取草图 | 生成页 | 从 Figma 选中导入草图 |
去添加 | 生成页 | 跳转到参考库添加参考 |
插入到画布 | 结果预览 | 将 SVG 插入 Figma |
拖拽角标 | 右下角 | 调整插件窗口大小 |