Recraft AI生成App图标指南：UI/UX设计师入门与实战教程
你是否遇到过这种情况：用Recraft AI生成的App图标，尺寸总是不对，风格飘忽不定，或者导出的SVG文件在Figma里根本无法编辑？这通常是因为没有正确启用其专业图标模式，或者在提示词中混入了干扰信息。
实际上，只需调整几个核心设置，就能让Recraft AI稳定输出符合Material Design或iOS SF Symbols规范的矢量图标。遵循以下步骤，你可以将生成结果从“概念草图”升级为“生产就绪”的资产。
一、切换至 Icons 模式并绑定平台级 UI 风格库
Recraft AI的默认模式生成的是通用图像，不会考虑像素对齐、等宽描边等UI图标的硬性规范。必须切换到专门的“Icons”模式，它才会调用为界面设计优化的底层引擎，自动应用居中构图、单色填充、响应式缩放等预设规则。
操作路径清晰：首先，在画布左上角的工具栏中，从模式下拉菜单里明确选择“Icons”，避免误选“Images”或“Illustrations”。
随后，注意界面右下角出现的“Style Tags”浮动面板。这里列出了Material Design、iOS SF Symbols、Fluent UI、Line Icon等经过预校准的风格库。点击你需要的风格标签，例如“iOS SF Symbols”，系统便会自动加载对应的24pt/27pt/32pt基准网格、±0.25px的圆角容差、1.5pt的标准描边宽度等参数，为后续生成奠定技术基础。
二、构建含“SVG vector”约束的结构化提示词
Recraft对提示词中的技术指令非常敏感。如果缺少“SVG vector”这一核心约束，或无意中混入写实类词汇，模型就可能输出位图。这会导致图标内嵌栅格像素，破坏纯粹的矢量路径结构，从而无法被设计系统识别和使用。
标准的提示词结构应如下所示：“24px outline icon of home, iOS SF Symbols style, no shadow, no gradient, white fill, centered composition, SVG vector only”。
关键操作：务必手动审查并移除提示词中所有“realistic”、“3D”、“photorealistic”、“texture”、“background”、“drop shadow”这类词汇。它们是触发位图生成的主要因素。
最后，在高级设置（Advanced Settings）中，将“Detail level”调整为Low，同时关闭“Background generation”开关。这两项设置能强制输出结构简洁、无背景干扰的纯矢量图形。
三、上传线框图作为 Style Reference 进行矢量化重构
如果你已有在Figma或Sketch中绘制好的线框图（Wireframe），流程可以进一步简化。Recraft支持上传SVG格式的参考图，反向解析其中的几何约束、负空间比例和拓扑关系，从而生成与原始UI布局结构高度吻合的图标。
具体操作如下：首先，在左侧工具栏选择Vector Art模型。
接着，点击右上角的“+ Style Ref”按钮，上传你的线框图。建议文件为纯黑白的SVG格式，分辨率不低于512×512，并确保路径闭合、锚点清晰、无填充色。
之后，在提示词框中仅需输入功能关键词即可，例如“back arrow, search bar icon, tab bar indicator”，无需添加任何风格修饰词。
提交生成后，系统会自动匹配从参考图中提取的主曲线曲率半径、最小负空间阈值、坐标原点偏移量等参数，输出的矢量图标可直接覆盖并导入到你的设计系统中。
四、使用 Image Set 批量生成结构统一的图标集
单个图标的实用价值有限，我们通常需要的是整套视觉统一的图标集。Recraft的Image Set功能正是为此设计，它能基于同一组提示词和固定的Seed值，批量生成6张在结构、色彩映射、锚点数量上均保持一致的图标变体。
操作流程：点击顶部导航栏的“Image set”按钮，进入批量生成界面。
输入与前述步骤完全一致的提示词，确保风格限定词和“SVG vector only”后缀保持不变。
然后，在“Seed”字段中输入一个固定数值，例如“89”，并勾选“Consistent style across all outputs”选项。这是保证同批次图标风格一致性的关键。
生成完成后，在任意一个图标上右键，选择“Export all as SVG”，即可获得一组能直接拖入Figma Assets面板的矢量图标集。
五、启用 Grid Prompt 横向对比筛选视觉一致性
最后一个技巧，能帮助你高效筛选出视觉一致性最高的图标组合。Grid Prompt功能允许你一次性提交多个语义相关的图标提示，系统会在相同推理条件下生成一个3×3的网格图，便于进行横向对比评估。
点击提示词框右上角的“Grid”按钮，切换到网格模式。
在第一行输入基础风格指令，例如“outline icon, iOS SF Symbols, 24px, SVG vector only”。
在第二行，使用竖线分隔输入你所需的功能标识，如“home | search | settings | profile | notifications”。
点击生成后，Recraft会返回9张图标。由于它们共享同一套底层风格参数，你可以轻松进行横向比较，勾选出笔触权重、圆角处理、视觉焦点位置最为统一的那一组。一个经验：系统通常会将结构最简洁、锚点最少、负空间最平衡的版本放置在奇数位（第1、3、5、7、9张），可以优先从这些位置查看。