AI生成UI 全套高质量落地手册（规范+工作流+高阶技巧）

适用场景：AI文生UI、高保真页面设计、移动端C端 / Web B端后台界面

核心宗旨：规范定底线，技巧提上限，流程稳质量，告别廉价、杂乱、翻车AI界面

使用说明：全文可直接作为AI正向Prompt约束、团队UI验收标准、个人出图标准化工作流

第一部分：AI生成UI 统一高级设计规范（硬性底线）

一、栅格与间距规范（解决杂乱、拥挤、对齐错乱）

基础强制规则：全局遵循 8pt 网格系统，所有间距、边距、内边距必须为8的整数倍数，禁止零碎小数、奇数间距。

1.1 移动端通用间距

• 页面左右安全边距：16px

• 模块与模块外间距：24px

• 卡片内部内边距：16px / 24px

• 组件内部间距（图标、文字、标签）：8px、16px

1.2 Web/B端后台间距

• 页面整体边距：24px

• 卡片模块间距：24px / 48px

• 采用 12列栅格布局，模块占整列展示，禁止不规则碎块布局

二、圆角统一规范（根治AI圆角混乱）

全局圆角体系固定，同一页面禁止圆角大小随机、混搭，杜绝一半大圆角、一半小圆角。

2.1 C端移动端（轻盈高级）

• 按钮、输入框、搜索框：12px

• 卡片、弹窗、底部浮层：16px

• 标签、Tag、小徽章：8px

2.2 B端Web后台（专业克制）

• 按钮、输入框、选择器：8px

• 数据卡片、列表模块：8px

• 弹窗、大面板：12px

三、阴影质感规范（高级感核心）

彻底杜绝廉价厚重质感，统一克制高级光影逻辑

• 全局使用单层、低透明度、柔和灰色投影

• 禁止：厚重黑阴影、多层叠加阴影、彩色阴影、强发光阴影

• 常规卡片弱阴影轻立体，极简页面可无阴影，用分割线分层

• 悬浮状态仅轻微加深阴影，不夸张、不突兀

四、字体层级规范（统一视觉比例）

AI文字均为乱码，此规范用于固定视觉字号、字重比例，后期统一替换真实文案。

4.1 移动端字体层级

• 页面大标题：24px / 600

• 模块小标题：18px / 600

• 正文常规内容：16px / 400

• 辅助说明文字：14px / 400

• 标签、备注、脚注：12px / 400

• 全局行高：1.5

4.2 Web/B端字体层级

• 页面标题：20px

• 模块标题：16px

• 正文内容：14px

• 辅助文字：12px

• 全局行高：1.6

五、色彩规范（杜绝花哨廉价配色）

• 仅使用 1个主色，低饱和度，主色只用于按钮、重点强调，不铺满背景

• 辅助色最多2个，仅用于标签、状态、小额点缀

• 文本、分割线、背景全部使用中性灰阶，严控彩色元素占比

• 功能色（成功/警告/错误）仅用于状态提示，不随意滥用

• 禁止：多高饱和艳色、随机渐变、彩色描边、彩虹配色

5.1 暗黑模式专属规则

• 背景使用深灰底色，禁止纯黑#000，提升通透质感

• 文字分层清晰：标题纯白、正文浅灰、辅助文字深灰

• 点缀色低饱和弱发光，拒绝高亮刺眼效果

六、组件统一规范

6.1 按钮规范

• 固定三类：主按钮、次按钮（描边）、文字按钮

• 移动端按钮高度：48px

• Web端按钮高度：40px

• 按钮内文字居中，图文间距固定8px，无拉伸变形

6.2 卡片规范

• 样式二选一：弱阴影 / 分割线，不叠加使用，避免厚重杂乱

• 禁止异形卡片、切割角、多重渐变、花边装饰

• 卡片内容统一左对齐，排版规整、留白均匀

6.3 分割线

• 全局 1px 细灰纯色分割线

• 禁止粗线条、彩色线条、虚线、渐变分割线

七、布局与排版规范

• 信息层级优先级：标题 > 操作按钮 > 正文 > 辅助文字

• 单页面模块数量控制在 3–5个，禁止满屏堆砌模块

• 大面积留白，呼吸感充足，排版宽松不拥挤

• 内容优先，装饰最小化，无多余插画、贴纸、特效

• 主流内容左对齐，减少无脑居中堆砌

八、AI 负面禁止规范（必加约束）

所有生成界面严格禁止：间距混乱、非8倍数边距、圆角大小混乱、厚重黑阴影、多层阴影、彩色阴影、高饱和艳色、色彩堆砌、元素拥挤、排版杂乱、错位重叠、乱码文字、异形卡片、花哨渐变、发光特效、卡通贴纸、多余装饰、3D渲染、水印、写实照片

第二部分：高阶提质技巧（规范之外的核心提分点）

仅靠规范约束有上限，搭配以下实操技巧，彻底解决AI排版乱、质感差、逻辑错、成品率低的问题

一、素材辅助法（告别纯文字主观描述）

1.1 图生图参考（最高效提质手段）

• 输入1-3张高质量参考图（Dribbble、优质产品截图、Figma精选稿），拒绝插画、海报、摄影图

• 参考权重控制 0.4-0.6，权重过高照搬界面，过低无效参考

• 分工参考：一张定布局结构、一张定配色质感、一张定组件风格

1.2 线框草图先行

提前手绘极简黑白线框图，框定导航、卡片、列表、按钮位置，先锁布局，再生成视觉，彻底避免AI自由乱排模块。无需精美，结构清晰即可。

二、Prompt 高阶编写策略

2.1 拆分模块生成，拒绝一次性复杂页面

AI无法处理多模块复杂页面，模块越多错乱越严重。

正确逻辑：分区域分步生成——先主体内容区、再导航栏、最后弹窗/浮层，后期人工拼接整合。单页模块严格控制3-5个。

2.2 明确产出物身份，杜绝生成插画

强制限定产出类型，避免AI跑偏：固定加入「Figma高保真UI、产品界面、矢量设计稿、可落地商用界面」

2.3 增加设计师专业视角描述

固定加持短句：面向产品开发可用、注重可用性、内容优先、商业级UI、克制简约、符合现代产品设计规范

2.4 标准化Prompt结构

固定顺序：产出物类型 → 设备/场景 → 页面业务 → 布局结构 → 视觉质感 → 规范约束 → 负面禁止词

三、工具分工策略（拒绝单一工具全包）

不同工具精准分工，兼顾灵感、落地、可编辑性

• 文生图工具（Midjourney/即梦/通义万相）：负责视觉灵感、配色、质感参考，仅做效果图，不做落地稿

• Figma AI插件（Magicul、UIzard）：生成可编辑图层UI，适配设计系统，直接落地修改

• 智能文案工具：辅助梳理页面文案、优化信息层级

最优组合工作流：AI出视觉参考 → Figma AI生成可编辑初稿 → 人工规范化优化

四、迭代生成技巧（大幅提升成品合格率）

4.1 三轮迭代法

• 第一轮：只看布局、留白、模块排布，忽略颜色细节，布局不合格直接重开

• 第二轮：锁定优质布局，图生图优化配色、阴影、质感

• 第三轮：局部重绘修复瑕疵，不整体重跑，保留优质区域

4.2 局部精细化修复

页面整体合格、局部瑕疵（按钮丑、卡片错乱、配色突兀），仅框选问题区域重绘，避免全盘返工。

第三部分：AI出图后标准化后处理SOP（必做）

AI永远无法100%合规，所有AI稿件必须执行以下流程，才能达到商用高级标准

1. 清空乱码文字：删除所有AI虚假文字，按字体层级替换真实业务文案

2. 校正栅格间距：统一所有间距为8px倍数，删除零碎像素、杂乱边距

3. 统一圆角体系：全覆盖校验组件圆角，杜绝大小混搭

4. 优化阴影质感：替换厚重、多层阴影，统一单层柔和投影

5. 校准色彩体系：吸色替换为标准化色板，统一主色、中性色、功能色

6. 删减多余装饰：删除AI自动生成的多余图标、特效、贴纸、冗余元素

7. 校验组件逻辑：修正不合理控件、错乱按钮、不符合交互逻辑的组件

第四部分：核心避坑认知（从根源减少翻车）

• AI擅长：视觉质感、配色、留白、布局参考、简约页面设计

• AI短板：复杂业务逻辑、复杂表单、数据表格、精准组件交互、规范精细化落地

• 禁止让AI一次性生成复杂B端页面、多状态表单、高密度数据页面

• 放弃一次出完美稿思维：优质AI UI = 多轮迭代 + 局部修复 + 人工规范落地

• AI只做70%视觉灵感，人工完成30%规范化、可落地、可开发的核心优化

第五部分：全套通用成品Prompt（直接复制即用）

5.1 移动端C端通用Prompt

Figma高保真UI设计稿，移动端APP，现代极简高级风格，8pt网格系统，所有间距为8px倍数，页面左右安全边距16px，模块间距24px；按钮12px圆角，卡片弹窗16px圆角，标签8px圆角，圆角体系完全统一；单层微弱柔和灰色阴影，无厚重黑阴影；严格字体层级，标题醒目、正文舒适、辅助文字弱化；低饱和单一主色，中性灰文本体系，无花哨配色；充足留白，信息层级清晰，排版规整，无多余装饰，干净商业产品UI --no 杂乱拥挤、乱码文字、厚重阴影、高饱和颜色、异形元素、多余特效、插画堆砌

5.2 Web B端后台通用Prompt

Figma高保真Web后台UI，B端SaaS系统，专业极简商务风格，12列栅格布局，24px基础间距；按钮与卡片8px统一圆角，克制干净；微弱单层阴影，层级分明；标准B端字体层级，清晰可读；低饱和专业配色，中性灰为主，功能色点缀；模块化整洁布局，留白舒适、对齐严谨，高级轻量化企业UI --no 花哨渐变、鲜艳色彩、杂乱装饰、拥挤排版、错位元素、3D效果

（注：部分内容可能由 AI 生成）