2小时内可交付合规电商app详情页：用figma ai插件按结构化模板输入商品信息，分段生成首屏、卖点模块并用锚点精准对齐，结合本地组件库调用确保样式统一。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你需要在2小时内交付一套结构清晰、风格统一、平台合规的电商App详情页，但手头只有商品图和基础参数，没有设计团队支持，也没有现成组件库可复用。
用结构化提示词模板触发Figma AI精准生成
这一步操作起来很简单，直接把模板里方括号内的内容替换成你的商品信息就行，但必须严格保留标点、换行和字段顺序，否则AI会把“价格”误读为“类目”。
1、在Figma中打开Stitch或Galileo AI插件，确保当前文件已启用Beta功能（Settings → Account → Beta features）。
2、粘贴以下模板，只替换【】内文字，其余字符一个都不能动：
“生成电商App产品详情页界面，适配iOS与Android双端。【商品属性】- 名称:[北欧风羊毛混纺沙发套];- 类目:[家居软饰];- 价格:[¥199];- 主图特征:[浅灰麻布纹理、带松紧包边设计、平铺于米色布艺沙发上];- 核心卖点:[① 95%羊毛+5%氨纶弹性面料；② 机洗不缩水；③ 适配深度45–60cm沙发];- 场景需求:[需包含主图展示区、3个卖点卡片、材质微距图占位框、尺寸标注弹窗入口、底部悬浮加购按钮];- 风格指令:[简约轻奢，留白充足，主色#2E2E2E+辅色#E0D6C9，无装饰性图标]。”
【字段名必须原样保留，比如“核心卖点”不能写成“卖点”或“产品优势”，否则AI无法识别该字段应渲染为卡片组】
绑定本地组件库让AI调用预设样式
如果你已经建好Figma组件库，这步能让AI输出结果立刻可用，避免字体错乱、间距崩塌等常见问题。
方法一：显式引用组件路径
在提示词末尾追加一句：“请使用组件库中名为‘/Card/SalePoint’的卡片样式渲染全部卖点；标题文字必须调用‘/Text/Headline-H2’；材质图区域预留‘/Image/Detail-Macro’占位符。”
方法二：拖拽式绑定（适合没命名规范的旧文件）
先选中你希望AI复用的某个标题组件→右键→Copy as Component Reference→回到AI插件输入框→粘贴到提示词任意位置→提交生成。
注意：组件库必须处于当前Figma文件可见状态，隐藏图层或外部链接库AI无法读取。
分段生成+锚点定位规避布局塌陷
单次生成整页容易导致卖点区被挤到主图下方、加购按钮错位到顶部——这是Figma AI对长页面流式布局解析能力不足的典型表现。
第一步：生成首屏固定区块
输入“仅生成详情页首屏，含主图轮播区（宽高比3:4）、产品名称、价格标签、立即购买按钮，背景纯白，其他区域留空”，生成后锁定该Frame图层。
第二步：生成卖点模块
新建画板，输入“生成3个横向排列的卖点卡片，每张卡片含图标+短标题+1行说明文字，卡片宽度320px，间距24px，使用#2E2E2E主色”，生成后拖入首屏Frame下方。
第三步：用锚点对齐关键节点
在首屏Frame底部边缘添加一个不可见的Reference Point（矩形宽1px高1px，填充透明），再在卖点模块顶部边缘放置同名Reference Point，选中两个点→右键→“Align to Anchor”→选择垂直居中对齐。
第四步：检查层级与导出
确保所有生成元素都在同一Frame内，且卖点模块图层顺序在首屏之下，最后导出时勾选“Preserve layers”保持可编辑性。
