需用“页面角色+触发条件+视觉反馈”三锚点描述功能区插画：明确位置与行为逻辑，细化像素级变化参数，并匹配表单/导航/状态类变量库，辅以canva专属格式锁与矢量约束指令。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
要在Canva里生成一张能直接嵌入网页的功能区插画——比如“用户点击按钮后弹出成功提示”的动效示意、“表单提交中”的加载状态、“权限申请弹窗”的交互预览——不能只写“蓝色UI插画”或“网页组件图”，AI无法区分这是设计稿、原型图还是空状态占位图，更不会理解“功能区”在真实页面中的上下文位置与行为逻辑。
用“页面角色+触发条件+视觉反馈”三锚点锁定功能场景
第一步：明确该插画在网页中承担什么角色。不是“按钮图”，而是“位于产品详情页右下角悬浮的‘立即试用’CTA按钮组，含主按钮+微文案气泡”。AI需要知道它贴边、悬停、固定还是吸底，否则会生成居中静物图。
第二步：写清用户动作如何触发画面变化。“鼠标悬停时按钮轻微上浮2px，阴影扩散至8px，右侧同步浮现32px宽工具提示箭头”比“带悬停效果的按钮”多出可渲染的物理参数。【AI不识别“hover”“click”等前端术语，必须转为像素级位移、尺寸变化、光影增减等视觉可观测描述】
第三步：绑定实时视觉反馈。“按钮背景色从#4F46E5渐变为#6366F1，文字保持纯白但字重从500升至600，右上角同步出现12px×12px绿色对勾图标，图标描边宽度1.5px”——所有参数必须可验证、可测量，禁用“更亮”“稍大”“微微变化”等模糊词。
按功能区类型匹配场景变量库
方法一：表单类（如登录框、注册步骤）
用“字段状态+输入痕迹+错误提示位置”组合：
“浅灰#F9FAFB背景卡片内嵌双字段表单，左侧邮箱框有半透明光标闪烁，右侧密码框显示‘••••••’且右端带隐藏/显示图标，底部红色错误提示条紧贴输入框下边缘，文字为‘请输入有效邮箱地址’，字体大小12px，行高16px”
方法二：导航类（如侧边栏、顶部Tab）
用“当前激活态+层级关系+空间占比”组合：
“深蓝#1E293B底色侧边栏，共5个垂直排列图标项，第三项‘数据分析’处于高亮态：图标填充#3B82F6，右侧二级菜单展开为3行子项，每行左侧带2px宽蓝色竖线标识，整体占据屏幕左侧240px宽度”
方法三：状态提示类（如加载中、无网络、权限拒绝）
用“中断点+设备信号+用户视线焦点”组合：
“iOS 17风格弹窗居中，顶部状态栏显示灰色信号格与‘无服务’字样，弹窗内仅一个旋转的16px直径浅灰圆环加载动画，圆环中心偏右3px处有一枚未填充的心形图标轮廓，用户视线自然落点在此图标位置”
注入硬性约束与反向排除指令
① 在提示词末尾追加平台专属格式锁：
“--ar 16:9 --no text --v 6.2 --style raw --s 800”。其中--ar 16:9不可省略，否则AI默认输出9:16竖版，无法匹配网页横屏功能区实际尺寸。
② 插入主体保护型负向提示：
“no photorealistic texture, no hand-drawn sketch lines, no gradient mesh shading, vector flat UI component only”。【这一步必须做——Canva AI默认倾向添加手绘感或摄影质感，会破坏UI插画所需的干净矢量边界】
③ 切断无效干扰源：
“不要品牌logo、不要真实人脸、不要网页URL地址栏截图、不要浏览器窗口Chrome边框”。
