Figma AI做美妆详情页图片提示词篇幅和格式怎么控制？

强制单页完整展示全部信息

美妆详情页的“首屏”至关重要，品牌调性、核心功效、成分可视化、使用前后对比这四大模块通常需要在同一画面中完整呈现。若允许AI自由分页，常见错误是将“使用前后”切至下一页，导致用户浏览中断，转化率明显下降。

解决方法很简单：在Figma AI插件（如Make Designs或Stitch）的Prompt输入框第一行，直接写入硬性约束——【必须在单个Frame内完整展示全部内容，禁止分页、禁止滚动截断、禁止自动生成多Frame】。

换行后，将尺寸指令写死：“输出画布尺寸为375×1800px（iOS标准竖屏尺寸加足够留白），所有图文元素严格限制在此范围内，底部预留120px空白区供后续添加悬浮按钮”。

若不添加此约束，AI通常会按“视觉舒适度”拆分内容，典型表现是将“成分解析图”单独生成一页。最终需要手动拼接，且拼接后比例常出现偏差。

绑定美妆类图像的结构化描述模板

方法一：五要素填空式提示词（新手友好）
按“用途+主体+细节+风格+约束”顺序编写。例如：
“美妆App详情页首屏主图，用于展示‘玫瑰玻尿酸精华液’；主体为平铺于浅杏色丝绒布上的产品瓶+滴落中的精华液特写+左侧微距水分子结构图；细节包含瓶身浮雕LOGO、液滴透明度渐变、丝绒布纹理可见、右下角带‘24H锁水+98%渗透’标签；柔焦棚拍风格，主光来自左上45°，背景纯白无影；禁止出现模特、禁止文字叠加在瓶身反光区、禁止使用任何非PNG透明底素材”。

方法二：JSON Schema注入格式控制（适合有设计系统的人）
在Prompt最前端粘贴一行代码：{"canvas":"375x1800","grid":"375x600","section-heights":[600,400,400,400],"safe-zone-bottom":120}；
后面紧跟功能描述：“Section 1：产品主视觉区，含瓶体+液滴+光影；Section 2：核心成分可视化，用微距图+文字标注；Section 3：功效数据看板，三组对比柱状图；Section 4：信任背书，含检测报告图标+‘SGS认证’文字”。

需注意：若AI未按section-heights数值分割高度，说明未识别该Schema。补救方法是下一版提示词中将每个数值加双引号并重复一次，例如“600”：“600”，通常可触发解析。

用三分法网格锁定关键信息位置

第一步：启用网格
选中目标Frame → 右键 → “Add layout grid” → 类型选“Lines”，Count填3×3，Gutter设为0，勾选“Snap to grid”。

第二步：按水平线分区配置信息
顶部1/3区域（0–600px）：只放品牌LOGO+产品名，字体大小不超过48px，禁用描边；
中部1/3区域（600–1200px）：主图居中，产品瓶的底部必须落在中间水平线上；
底部1/3区域（1200–1800px）：功效文案左对齐，起始点对齐左侧垂直线，CTA按钮右下角锚定右下交点。

第三步：隐藏AI原始图层后手动重组
生成后立即右键点击AI输出的所有图层选择“Hide layer”，然后基于网格线新建矩形、文本、图标等元素，确保每块信息都严丝合缝地落在对应的网格区内。此步骤看似笨拙，但能有效避免AI将“前后对比图”硬压进底部空白区的常见错误。