SaaS 产品的插画设计，必须精准匹配页面布局与技术规范，绝非随意生成就能交付。直接套用通用提示词，通常需要返工三次以上——要么 UI 元素错位、要么人物比例失调、要么界面文字模糊、要么风格过于游戏化。这里有一套实战方法：选择 Canvas 模式、锁定 16:9 或 4:3 比例，采用四段式提示词（角色 + 场景 + 界面 + 风格），并明确声明“no text, no logos”，配合反向排除法优化，最终按照手部交互、UI 边缘、暗色对比、细节增强四步核验。

先确认一个关键问题：这张插画具体要放置在哪里？登录页 Banner、功能模块示意图，还是定价页对比图？不同位置对信息密度、人物朝向、背景留白的要求截然不同。例如，Banner 图需要强烈的视觉焦点和充足的负空间，而功能示意图则必须保留可识别的界面框线与图标位置。

打开 Leonardo AI，务必进入「Canvas」模式，不要使用「Fast Generate」——后者无法锁定构图比例和关键元素布局。在画布设置中，【强制选择 16:9 或 4:3 宽高比，禁用“Auto”】。为什么？因为 SaaS 页面适配需要精确的像素控制，Auto 模式会随机裁切掉按钮区域或导航栏，后期调整会非常麻烦。

构建分层式提示词结构

方法一：角色 + 场景 + 界面 + 风格四段式。写法示例：“a confident female SaaS product manager in modern office, interacting with clean dashboard UI showing analytics charts and toggle switches, flat vector style, soft shadows, #F0F4FF background, no text, no logos”

注意，“no text, no logos”必须显式声明，否则 AI 大概率会生成虚构按钮文字或品牌水印，后期抠图成本极高。这一点经验之谈，值得牢记。

方法二：反向排除法，适合已有失败图的情况。把上次生成失败的图上传到 Leonardo 的「Image Guidance」，在 Prompt 框开头加：“remove distorted hands, remove floating UI elements, remove pixelated graphs, keep consistent isometric perspective”

这个步骤能有效压制 AI 的惯性错误，尤其对仪表盘类插画很管用——AI 不会自动理解“仪表盘要对齐”，但它能听懂“remove floating UI elements”。

执行检查清单（按顺序逐项核验）

第一步：检查人物手部是否自然接触界面元素。如果手指悬空或穿模，说明提示词缺少交互动词（如“tapping”, “hovering over”, “dragging slider”），需要补全动作描述。

第二步：放大查看 UI 组件边缘。出现毛边、半透明重叠或图标粘连，说明模型混淆了“flat design”与“glassmorphism”。解决方案是将风格词替换为【“sharp-edged flat vector, 1px stroke, zero blur”】。

第三步：切换到暗色模式预览。如果插画在深灰背景上主体发灰、对比度崩塌，说明主色未指定明度范围。在 Prompt 末尾追加“#4F46E5 foreground, #FFFFFF highlights, #1E293B background contrast”即可。

第四步：导出前启用「Enhance Detail」并勾选「Preserve Composition」。不勾选的话，AI 重绘时可能会挪动核心 UI 模块的位置，Banner 图标题区被替换成无关图表这种事，真不罕见。