recraft ai可通过icons模式与结构化流程高效生成符合淘宝/京东详情页规范的矢量图标：启用icons模式并配置1024×1024 svg画布、禁用写实词确保纯矢量输出、批量生成6张一致图标、上传品牌图标作为style reference复用视觉特征、用frame画板叠加图文层导出png+json。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
如果您希望为淘宝或京东商品详情页快速制作规范、统一、可直接嵌入的图标物料，但面临风格不一致、尺寸错乱或无法适配平台UI规范等问题，则Recraft AI可通过专用模式与结构化流程高效生成符合电商前端开发要求的图标资源。以下是实现该目标的具体操作路径：
一、启用Icons模式并配置电商图标画布参数
Icons模式强制激活矢量渲染管线与平台级网格系统，确保输出图标具备像素对齐、无背景、单色兼容及响应式缩放能力，完全匹配淘宝/京东详情页中“参数表”“卖点标签”“服务图标”等高频使用场景。
1、登录Recraft官网（https://www.recraft.ai/）并进入新项目；
2、在画布左上角工具栏下拉菜单中，明确选择Icons模式；
3、点击Canvas设置，将画布尺寸设为1024×1024（兼容双平台导出），输出格式选为SVG；
4、在右下角Style Tags面板中，点击启用Material Design或Fluent UI标签，自动加载24dp/36dp/48dp三档电商图标基准网格。
二、构建禁用写实干扰词的结构化提示词
电商详情页图标需严格遵循语义清晰、无冗余装饰、纯路径结构原则，提示词中混入“photorealistic”“3D”“texture”等词汇将触发位图生成路径，导致导出文件含栅格像素、无法被H5页面矢量渲染引擎识别。
1、在提示框中输入标准格式指令：“24px outline icon of free shipping, Material Design style, no shadow, no gradient, single-color fill, centered composition, SVG vector only”；
2、手动检查并删除提示中所有出现的“realistic”“3D”“background”“photo”“textured”等关键词；
3、在Advanced Settings中将Detail level设为Low，关闭Background generation开关。
三、批量生成详情页图标集并锁定视觉一致性
单个图标无法支撑完整详情页信息架构，Image Set功能基于同一种子值与提示词，可批量输出6张结构统一、锚点数量一致、坐标原点对齐的图标变体，满足“7天无理由”“正品保障”“闪电发货”等多卖点图标需求。
1、点击顶部导航栏Image set按钮，进入批量生成界面；
2、粘贴步骤二中已验证的提示词，确保未修改任何风格限定词；
3、在Seed字段填入固定数值如123，勾选Consistent style across all outputs；
4、点击生成，从预览栏中选取全部6张图标，右键选择Export as SVG。
四、上传原始图标作为Style Reference复用品牌视觉
当已有品牌标准图标（如官方VI中的“售后”“客服”图标），可将其上传为Style Reference，使AI在生成新图标时自动继承线条粗细、圆角半径、负空间比例等微观特征，避免人工调参误差，保障详情页整体视觉连贯性。
1、在画布空白区点击Upload image，上传一张已有的品牌图标SVG或PNG；
2、上传后点击该图，在右侧面板中选择Use as Style Reference；
3、新建一个Icons画板，输入新提示词（如“24px icon of 24h customer service”），系统将自动匹配参考图的笔触逻辑；
4、生成后对比查看线条端点闭合度、转角平滑度是否与参考图一致，不一致则微调Seed值重试。
五、使用Frame画板叠加电商专属图文层
淘宝/京东详情页常需在图标旁添加文字说明（如“包邮”“假一赔十”），Frame画板支持在同一画布中分层管理图标与文案，避免PS类工具手动对齐，且导出时可保留图层结构供前端CSS控制显隐。
1、在项目内点击+ New Frame新建画板，尺寸设为1200×200（适配详情页横向图标栏）；
2、将已生成的SVG图标拖入画板，右键选择Convert to raster（仅限此步，确保文字层可自由编辑）；
3、点击顶部工具栏Text按钮，在图标右侧插入文本框，输入中文文案如“极速发货”；
4、选中文本，设置字体为PingFang SC或HarmonyOS Sans，字号14px，颜色#333；
5、点击右上角Export，选择PNG + JSON layers格式，供前端工程师按需调用图层。
