跳转到主内容
极星编程网:以代码为星,赴技术山海!

如何在Figma中使用Make Designs一键生成落地页_利用Prompt提示词精准控制布局

若Make Designs生成落地页偏离预期,需用精准Prompt控制:一、明确角色与目标;二、结构化描述区块顺序与占比;三、绑定设计系统约束;四、注入真实业务文案;五、多轮局部微调。

☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜如果您在Figma中尝试通过Make Designs插件快速生成高质量落地页,但产出结果偏离预期布局或视觉结构,则可能是由于Prompt提示词未准确传达设计意图。以下是利用Prompt提示词精准控制Make Designs生成效果的具体操作方法:

一、明确角色与目标设定

Make Designs依据Prompt中的角色定义(如“资深UI设计师”)和任务目标(如“为SaaS产品生成首屏落地页”)调整生成逻辑。模糊的角色描述会导致模型默认采用通用模板,削弱定制性。

1、在Figma中打开Make Designs插件面板,点击“New Prompt”按钮。

2、在Prompt输入框顶部第一行写入角色声明:

你是一位专注B2B SaaS产品的UI设计师,擅长响应式单页落地页设计。

3、紧接着换行,写入明确目标:

生成一个包含头部导航栏、主标题区、三功能卡片模块、客户Logo墙和底部CTA的首屏落地页。

二、结构化描述页面区块顺序与占比

Make Designs将Prompt中出现的区块关键词按书写顺序映射为垂直布局流,同时识别“占比”“宽度”“高度”等尺寸限定词以控制容器比例,避免模块堆叠错乱或留白失衡。

1、在目标句后另起一行,逐项列出区块并标注相对高度或占比:

头部导航栏:高度64px;主标题区:高度520px,含H1标题+副文案+主按钮;功能卡片模块:三列等宽布局,每张卡片宽320px,高280px;Logo墙:4行×6列网格,单Logo尺寸64×40px;底部CTA:高度320px,含标题、邮箱输入框和提交按钮。

2、确保所有区块名称使用中文通用术语(如“导航栏”而非“nav bar”),避免英文缩写干扰解析。

三、绑定设计系统约束条件

通过在Prompt中嵌入颜色值、字体族名、间距数值等硬性参数,可强制Make Designs复用指定设计语言,防止生成稿与团队规范脱节。

1、新增一行,以“约束条件:”开头,罗列关键设计变量:

约束条件:主色#2563EB,辅助色#0F172A;标题字体Inter Bold,正文字体Inter Regular;行高1.5,段落间距24px;卡片圆角12px,阴影为0 4px 6px -1px rgba(0,0,0,0.1)。

2、若项目已建Figma变量,可在该行末尾追加:

优先调用当前文件中名为“Color/Primary”和“Typography/Heading”的本地变量。

四、注入真实业务语义内容

使用占位符(如{{product_name}})或直接填入真实文案,能显著提升生成内容的信息可信度与上下文连贯性,减少AI虚构无关文本的风险。

1、在区块描述后插入内容层,用“文案要求:”引导:

文案要求:主标题为“无缝集成您的工作流”,副文案为“支持API、Webhook与200+主流工具一键连接”,三张功能卡片标题分别为“实时同步”“自动归档”“权限分级”,客户Logo使用Slack、Notion、GitHub、Zoom、Linear、Figma官方图标。

2、对按钮类元素单独强调动词语气:

所有CTA按钮文字必须为动词开头,如“开始免费试用”“查看集成文档”“预约演示”

。

五、启用多轮迭代式微调

Make Designs支持基于上一轮生成稿的局部重绘,通过在Prompt中引用图层名称或位置锚点,实现对特定模块的定向优化,无需全量重做。

1、生成初稿后,右键点击需调整的图层(如功能卡片模块),选择“Make Designs → Refine selection”。

2、在新弹窗中输入聚焦指令:

将第二张卡片的图标替换为数据库备份图标,标题改为“离线数据保护”,副文案增加“本地加密缓存,断网仍可编辑”

。

3、勾选“保持周边布局不变”,点击“Generate”执行局部更新。

相关文章