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

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

美妆详情页的“首屏”有多关键，不用多讲。品牌调性、核心功效、成分可视化、使用前后对比，这四大模块通常需要挤在一个画面里全部交代清楚。如果让AI自由分页，它大概率会把“使用前后”切到下一页，用户浏览动线一断，转化率直接打折。

解决方式很简单：在Figma AI插件（比如Make Designs或Stitch）的Prompt输入框，第一行就写上非常硬性的约束——

。

紧接着换行，把尺寸指令也写死：“输出画布尺寸为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把“前后对比图”硬压进底部空白区的常见错误。