AI 生成 UI

传统的界面生产存在原型制作耗时、方案验证成本高、用户反馈周期长等问题。

AI 生成 UI 致力于探索人与 AI 协作的新范式，只需简单描述你的意图，AI 可以快速将你的创意文字或参考图片转化为可视化的设计，节省大量原型设计时间。此外，你可以通过风格设置或改编精确控制设计风格，连续稳定地生成一致性高、可用性强的界面。

快速开始

Motiff AI 生成 UI 支持两种输入方式：

• 文本输入：通过提示词描述你想要的界面。
• 图片输入：上传参考图片作为设计参考。

你可以通过以下步骤快速开始使用 Motiff AI 生成 UI：

1. 1.

   点击工具栏的 AI - AI 生成 UI 选项。

   

2. 2.

   在弹窗中输入提示词或上传参考图。

   

3. 3.

   选择合适的预设风格（可选）。

4. 4.

   点击生成按钮。

文本输入指南

你可以通过点击输入框下方的随机按钮来获取示例提示词，或者直接输入你想要描述的界面需求。

提示词技巧

有效的提示词可以帮助 AI 更准确地理解你的需求。以下是一些提示词技巧：

提示词结构建议

一个完整的提示词可以包含以下要素：

• 页面名称/功能。
• 应用类型。
• 目标用户。
• 详细的页面模块描述。

提示词复杂度

你也可以根据自己的需要输入不同复杂度的提示词：

• 简短提示词：适合头脑风暴和创意探索。
  • 例如：「电商 App 的首页」。
• 详细提示词：适合精确描述需求（无论是页面内容、结构布局或者是样式风格等信息，AI 都会严格遵循你的指令生成对应的界面）。
  • 例如：「一个面向年轻人的电商 App 首页，包含顶部搜索栏、轮播广告位、热门商品推荐区、分类导航和底部标签栏」。

使用技巧

• 在风格设置入口选择手机端或网页端对应的风格（默认为「移动端 - 自由风格」）。
• 描述具体的页面结构和布局。
• 指明特定的交互元素。
• 色彩和风格偏好（可选，如果不在提示词说明 AI 将会根据界面内容和产品类型给出合适的风格；如果你想要更准确地控制风格，也可以选择直接切换或改编风格选项。详情见下方风格设置模块）。

图片输入指南

上传参考图

你可以通过两种方式上传参考图：

1. 1.上传本地图片
   1. a.点击图片上传按钮。
   2. b.打开本地文件夹选择并上传图片。
2. 2.上传 Motiff 画布中的图层
   1. a.选中画布中的图层。
   2. b.复制选中的图层：
      • 右键菜单 -「复制为 PNG」
      • 或使用快捷键：
        • macOS：Shift + Command + C
        • Windows：Ctrl + Shift + C
   3. c.粘贴图片到输入框，等待上传完毕。

参考图使用建议

图片包含了布局结构、页面内容、设计风格等不同参考维度：

• 仅上传图片：如果你想要还原该界面的设计风格和元素，可以只上传图片作为输入。AI 会尽量还原图片中的设计风格和元素。需要注意的是，为了避免对模型产生干扰，建议参考图中只包含一个界面。
• 图片 + 文本：如果你想要更精确地控制图片的某个具体参考维度，也可以同时上传图片和输入文本来描述意图。以下为提示词示例参考：
  • 当你想要参考上传图片的内容和结构时，你可以说“请你参考上传线框图的内容和结构，帮我生成一个页面，页面的主题色为紫色、暗黑模式”。
  • 当你想要参考上传图片的风格、主题色时，你可以说“请你参考上传图片的风格帮我生成一个页面”。

风格设置

风格选项

Motiff AI 生成 UI 提供了多种预设风格，以提升界面生成的稳定性和可控性：

• 移动端风格
  • 自由风格：AI 不受特定风格限制，自由发挥。
  • Material Design：遵循 Google 的 Material Design 设计语言，为移动端应用提供了丰富的可定制组件和主题系统。
• 网页端风格
  • 自由风格：AI 不受特定风格限制，自由发挥。
  • Ant Design：由蚂蚁金服提供的企业级 UI 设计语言，提供了丰富的可定制组件和主题系统。
  • shadcn/ui：shadcn/ui 是一个简洁、现代化的 UI 组件库风格，旨在提供一个简洁的设计语言，方便设计、开发人员快速构建现代化的 Web 应用程序。

后续我们将持续补充更多设计风格。

切换预设风格

1. 1.点击风格设置按钮打开预设风格下拉菜单。
2. 2.选择目标预设风格。

   选择预设风格后，AI 会自动调整输出 UI 的尺寸（移动端或网页端），无需在提示词中重复指定设备类型。

风格改编

改编风格功能

Motiff 支持对预设风格进行个性化改编，让你可以精确控制设计风格的细节，创建符合项目需求的一致性设计。

改编风格步骤

1. 1.

   悬浮至想要改编的风格所在行，点击改编风格按钮。

   

2. 2.

   在弹窗中调整对应风格的参数（不同设计系统参数有所不同，图中所示为 shadcn/ui 的可更改参数）。

   

3. 3.

   点击保存按钮保存改编后的风格。

4. 4.

   修改参数后可保存为自定义风格，支持后续选用。保存后的改编风格也支持再次编辑调整。

可调整的参数

由于各设计系统的原始定义存在差异，我们在风格改变面板中的参数设置也有所不同：

其中字体仅支持从 Motiff 的云端字体列表中选择。

使用保存的改编风格

• 保存后的改编风格会出现在预设风格列表中。
• 可以随时选择使用或再次编辑。

进阶技巧

连续生成

当前 Motiff 的 AI 生成 UI 暂不支持多轮对话，如果你想要连续生成：

• 可以多次、连续地输入不同版本的提示词，快速生成多个方案进行对比。
• 尝试在同一提示词基础上微调细节，观察不同结果。

组合使用

• 先用文本生成基础界面，再用图片参考调整风格。
• 结合预设风格和详细提示词，获得更精确的结果。

迭代优化

1. 1.生成初始界面。
2. 2.分析结果，调整提示词或参考图。
3. 3.重新生成，不断优化直至满意。

提示词模板

以下是一些常用的提示词模板，可以根据需要调整：

移动应用模板

一个[面向目标用户]的[应用类型]应用的[页面名称]，包含[具体模块和功能描述]。风格[风格描述]。

网页界面模板

一个[行业类型]的[网站类型]网站的[页面名称]，需要展示[内容描述]，包含[功能模块]。整体风格[风格描述]。

常见问题

生成结果与预期不符

• 问题：生成的界面与我的描述不太匹配。
• 解决方案：尝试使用更详细的提示词，明确指出页面结构、功能模块和风格要求。

风格不一致

• 问题：多次生成的界面风格不一致。
• 解决方案：使用预设风格或创建改编风格，确保生成结果的一致性。

复杂界面生成

• 问题：复杂界面生成效果不理想。
• 解决方案：将复杂界面拆分为多个部分分别生成，或提供更具体的参考图片。

设备适配问题

• 问题：生成的界面不适合目标设备。
• 解决方案：确保选择了正确的预设风格分组（移动端或网页端），当前移动端的默认尺寸为 390px，网页端的默认尺寸为 1440px，暂不支持其他尺寸的页面。

最佳实践

• 问题：有没有推荐的最佳实践？
• 解决方案：
  1. a.探索阶段：使用简短提示词和自由风格，快速生成多个创意方向。
  2. b.明确阶段：使用详细提示词和预设风格，生成符合项目要求的界面。
  3. c.优化阶段：通过风格改编和迭代生成，精细调整界面细节。

希望本文档能帮助你充分利用 Motiff AI 生成 UI 功能，提升设计效率，激发创意灵感。如有任何问题或建议，欢迎随时联系我们的支持团队。