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将“前后对比图”硬压进底部空白区的常见错误。

来源：互联网