先用【结构先行】锁死页面骨架

关键在于，在正向提示词的最开头，必须明确写下：【结构先行】。

紧接着，把页面布局像写代码一样精确描述出来。比如：顶部导航栏高度60px、左侧侧边栏宽240px、主内容区占宽75%、右上角悬浮按钮距顶32px且直径48px。所有区域仅显示#e0e0e0灰底色块与像素标注，无图标无文字。

这句话是“开关指令”。不加它，AI就会跳过布局思考阶段，直接去渲染那些模糊的“科技感背景”。

千万别小看这个细节。 漏掉“px”单位或具体数值，AI就会自动按默认比例缩放，侧边栏可能窄成一条线。

最后，再补上基础画质要求：高质量线稿，1px等宽描边，无阴影无渐变，8K分辨率。

把功能模块转成可定位的锚点

骨架搭好了，接下来就是填充内容。要避免AI生成“四不像”的图标和按钮，你得用“锚点”的方式把它们钉在页面上。

一种方法是“相对位置锚定”。比如：“左侧侧边栏第三项图标为齿轮形，居中对齐。图标下方文字‘Settings’距图标底部12px。主内容区中央放置数据看板，看板宽520px、高320px，内含3列折线图，每列间距48px”。

另一种更高级的方法是“栅格编号锁定”，尤其适合响应式布局。你可以这样描述：“主内容区按12列栅格布局：

• 左列（第1–3列）显示客户头像网格，每张头像圆角50%，直径64px。
• 中列（第4–8列）为动态仪表盘，背景为#F9FAFB浅灰。
• 右列（第9–12列）为操作按钮组，含‘Export CSV’与‘Schedule Report’两个按钮，按钮宽140px，圆角6px，字重600。

这里有个坑要避开： 漏掉“px”“%”“圆角”等物理约束，AI会把按钮渲染成椭圆或毛边矩形。

分层注入视觉细节，顺序不能乱

这一步是“点睛之笔”，但顺序错了就会前功尽弃。正确的流程是：

1. 先确认结构图已生成，并且尺寸标注清晰无误。
2. 复制这张图作为参考图，上传至图生图页。
3. 在新提示词的开头，加上一句：“保持原结构布局与像素级尺寸，仅替换视觉样式”。
4. 最后，再开始描述你想要的风格和细节：“Figma UI Kit风格，图标使用Material Design 3规范。按钮悬停态加#4F46E5微光反馈。字体用Inter Medium，字号14px。数据图表使用#3B82F6主色+#8B5CF6辅助色”。

从布局到内容，再到视觉风格，一层层地往下做，就像搭积木一样。这样产出的画面，才能精准地嵌入到你的SaaS首屏中，而不是一张需要你再次手动返工的“草图”。

《夸克》非常好用的免费AI浏览器

下载APP查看