AI 生成 UI
Motiff 妙多致力于探索人与 AI 协作的新范式， AI 生成 UI 只需你简单描述意图，AI 可以快速将你的创意文字或参考图片转化为可视化的设计，节省大量设计时间。此外，你可以通过风格设置或改编精确控制设计风格，连续稳定地生成一致性高、可用性强的界面。
使用 AI 生成 UI
你可以通过以下步骤使用「AI 生成 UI」功能：
- 1.点击工具栏的
，选择「AI 生成 UI」。
- 2.在弹窗中输入提示词或上传参考图。
- 3.选择「移动端」或「网页端」的预设风格。
- 4.点击生成按钮。
风格默认设置为「移动端 - 自由风格」，点击 
可以切换风格，如「网页端 - 自由风格」。
Motiff 妙多支持在「AI 生成 UI」弹窗中进行如下操作：
- 1.展示文字提示词区域，支持直接输入。
- 2.点击
能够获取提示词示例。 - 3.点击
上传参考图片。 - 4.设置生成界面的风格，Motiff 妙多提供了移动端和网页端多种预设风格。
- 5.点击
关闭弹窗。
输入 UI 需求
Motiff 妙多支持两种类型的输入方式：
- 文本输入：通过文本提示词描述你想要的界面。
- 图片输入：上传参考图片作为设计参考。
输入文本提示词
有效的提示词可以帮助 AI 更准确地理解你的需求，无论是页面内容、结构布局或者是样式风格等信息，AI 都会严格遵循你的指令生成对应的界面。
你可以根据自己的需要输入不同复杂度的提示词。
- 简短提示词：适合头脑风暴和创意探索，例如「电商 app 的首页」。
- 详细提示词：适合精确描述需求，例如「一个面向年轻人的电商 App 首页，包含顶部搜索栏、轮播广告位、热门商品推荐区、分类导航和底部标签栏」。
一个完整的提示词通常包含：页面名称/功能、应用类型、目标用户、详细的页面模块描述等信息。
上传参考图片
Motiff 妙多支持以下两种方式上传参考图片：
-
上传本地图片： 点击
，打开本地文件夹选择并上传图片。 -
上传画布中的图层：
- a.选中画布中的图层。
- b.右键菜单，选择「复制为 PNG」。
你可以使用快捷键复制选中图层：
- macOS： ⇧ shift + ⌘ Command + C
- Windows： Ctrl + Shift + C
- c.粘贴图片，等待上传完成。
为了避免对模型产生干扰，建议参考图中只包含一个界面。
设置预设风格
Motiff 妙多提供了移动端和网页端多种预设风格，以提升界面生成的稳定性和可控性。
- 移动端风格
- 自由风格：AI 不受特定风格限制，自由发挥。
- Material Design：遵循 Google 的 Material Design 设计语言，为移动端应用提供了丰富的可定制组件和主题系统。
- 网页端风格
- 自由风格：AI 不受特定风格限制，自由发挥。
- Ant Design：由蚂蚁金服提供的企业级 UI 设计语言，提供了丰富的可定制组件和主题系统。
- shadcn/ui：shadcn/ui 是一个简洁、现代化的 UI 组件库风格，旨在提供一个简洁的设计语言，方便设计、开发人员快速构建现代化的 Web 应用程序。
Motiff 妙多将持续补充更多的设计系统风格。
切换预设风格
- 1.点击预设风格旁边的
打开菜单。 - 2.选择目标预设风格。
选择预设风格后，AI 会自动调整输出 UI 的尺寸（移动端或网页端），无需在提示词中重复指定设备类型。
改编预设风格
Motiff 支持对预设风格进行个性化改编，让你可以精确控制设计风格的细节，创建符合项目需求的一致性设计。
- 1.
光标悬浮至想要改编的风格类型，点击
。
- 2.
调整风格参数（不同设计系统可调整参数有所不同，图中所示为 shadcn/ui）。
- 3.
点击「改编」保存风格。Motiff 妙多会将该风格存于风格菜单中，便于后续使用。
将光标悬浮至改编后的风格，可以进行编辑调整。
支持调整的风格参数
Motiff 妙多力求遵循各大设计系统官网所支持的参数类型，确保设计师能够高效、准确地调整设计风格，满足多样化的项目需求。
| 支持的参数 | 移动端 - 自由风格 | Material Design | 网页端 - 自由风格 | Ant Design | shadcn/ui |
|---|---|---|---|---|---|
| 模式 | ✓ | ✓ | ✓ | ✓ | ✓ |
| 对比度 | x | ✓ | x | x | x |
| 主题色 | ✓ | ✓ | ✓ | ✓ | ✓ |
| 其他颜色 | x | x | x | ✓（支持成功色、警告色、错误色等） | x |
| 圆角 | ✓ | x | ✓ | ✓ | ✓ |
| 基础文本尺寸 | x | x | x | ✓ | x |
| 字体 | ✓ | ✓ | ✓ | ✓ | ✓ |
字体仅支持从 Motiff 的云端字体列表中选择。
FAQ
- 1.
我如何能够连续生成一套界面？
目前 AI 生成 UI 暂不支持多轮对话。若要生成一整套界面设计，你可以逐步输入每个页面的具体提示词，或在现有提示词的基础上调整细节，以确保风格和功能的一致性。
连续生成即将上线，敬请期待。