编写 AI 生成 UI 提示词

提示词是你与 AI 沟通的桥梁，它通过自然语言为大语言模型（LLM）提供任务指导。高效的提示词能帮助 AI 更精准地理解需求，生成符合预期的高质量 UI 界面。

提示词核心要素

高效的提示词通常由以下几个关键要素组成。输入的提示词越明确，生成的结果越能符合你的预期。

• 应用类型： 说明应用的类型，以便生成符合行业需求的界面。
• 目标用户： 明确目标用户群体，以便调整设计风格和功能模块。
• 页面名称： 描述界面的核心功能，明确页面的用途。
• 详细的页面模块： 描述页面的主要组成部分和功能模块。
• 风格描述： 指定设计风格和视觉元素，包括主题色、字体和模式等信息。

适用场景

探索创意

当你需要快速探索灵感时，可以使用简短提示词和自由风格，生成多个创意方向，适用于头脑风暴阶段。

Motiff 妙多每次会生成两版参考界面。可以根据不同的使用场景选择适合的界面风格和布局方向。

• 移动端：一个健康应用中的食谱页，用于展示精选菜品和膳食规划。
• 网页端：一个名为 GymFlow 的健身房的 CRM 后台仪表盘页面。

生成初稿

当你对界面已经有了清晰的想法时，可以输入具体且详细的提示词，也可以上传参考图片，快速生成符合预期的初稿界面。

文字描述

你可以参考提示词核心要素来明确提示词的描述，通过具体的提示词来生成符合你预期的初稿界面。

以下是一个音乐库页面的示例，帮助你快速生成初稿并探索更多设计灵感。

• 应用类型： 音乐流媒体应用。
• 目标用户： 青少年群体。
• 页面名称： 音乐库页面。
• 详细页面模块： 顶部导航栏，标题是「音乐库」；用户可以通过该模块快捷访问收藏的专辑、歌手、播客，其中「专辑」被选中；底部导航栏，标签包括「推荐」、「发现」、「漫游」、「动态」和「我的」。
• 风格描述： 页面的主题色为紫色、暗黑模式。

上传图片

当你已经将需求绘制成线框图，或者找到了合适的参考图片时，可以上传参考图片，AI 会试图理解并还原图片中的布局结构、页面内容、设计风格等信息。

• 如果你想要还原该界面的设计风格和元素，可以只上传图片作为输入。
• 如果你想要参考图片的布局结构和内容，可以同时上传图片和输入文本来描述意图。

生成一套完整界面

当你需要设计一套完整的界面时，可以通过分步输入提示词，逐步生成各页面设计，最终构建完整的产品交互界面。

例如，通过以下步骤逐步生成一套完整的 AI PM 课程学习应用「AI PM Master」的产品交互界面。

1. 1.

   输入首页的文字提示词：

   一款针对 AI PM 课程学习类的 app，AI PM Master。
   首页采用卡片式布局，展示精选课程。每个课程卡片包含课程封面图、标题、简短描述、难度级别和学习进度。
   该应用的底部导航栏包括首页、课程、路径、社区和我的，当前选中为「首页」。
   视觉风格突出科技感和专业性。
   

   

2. 2.

   在改编预设风格中，选择「移动端-自由风格」进行改编。输入风格名称「AI PM Master」，选择对应的模式、圆角和字体，并将主题色自定义为 #09DD59。

   在生成第一个页面时，你可以通过不断调整提示词优化生成效果，一版满意的提示词便于后续快速生成一套界面。

3. 3.

   后续生成一套界面时，仅需对布局描述进行简单修改。例如，在生成「课程详情页」时，只需修改提示词中对页面布局以及底部导航栏选中状态的描述。

4. 4.

   重复上述操作，生成一套完整的界面。包含「首页」、「课程详情页」、「学习路径页」、「社区讨论页」、「个人学习页」。

   Motiff 妙多支持全面的基础设计功能，你可以通过手动修改细节，编辑图层，设计出一套满意的界面。

提示词示例

你可以尝试复制以下提示词，逐步生成一套完整的 AI 产品经理课程学习应用「AI PM Master」的交互界面。

• 首页：

  一款针对 AI PM 课程学习类的 app，AI PM Master。
  首页采用卡片式布局，展示精选课程。每个课程卡片包含课程封面图、标题、简短描述、难度级别和学习进度。
  该应用的底部导航栏包括首页、课程、路径、社区和我的，当前选中为「首页」。
  视觉风格突出科技感和专业性。
  

• 课程详情页：

  一款针对 AI PM 课程学习类的 app，AI PM Master。
  左侧是课程大纲，采用树形结构展示章节内容；右侧是学习区域，包含视频播放器、课程文档和交互式练习区域。
  该应用的底部导航栏包括首页、课程、路径、社区和我的，当前选中为「课程」。
  视觉风格突出科技感和专业性。
  

• 学习路径页：

  一款针对 AI PM 课程学习类的 app，AI PM Master。
  可视化的 AI PM 技能树页面。使用流程图样式展示完整的学习路径，突出显示核心技能模块。
  该应用的底部导航栏包括首页、课程、路径、社区和我的，当前选中为「路径」。
  视觉风格突出科技感和专业性。
  

• 社区讨论页：

  一款针对 AI PM 课程学习类的 app，AI PM Master。
  主体采用双栏设计：左侧是讨论帖子列表，支持按热度/时间排序；右侧是精华内容和活跃用户榜单。
  帖子卡片包含标题、预览内容、互动数据和标签。
  该应用的底部导航栏包括首页、课程、路径、社区和我的，当前选中为「社区」。
  视觉风格突出科技感和专业性。
  

• 个人学习页：

  一款针对 AI PM 课程学习类的 app，AI PM Master。
  个性化的学习控制台页面，顶部展示学习数据看板（完成课程数、学习时长、技能点等）；下方分区展示，当前进行中的课程、学习计划日历、最近的笔记和讨论；右侧添加学习伙伴和学习群组功能。
  该应用的底部导航栏包括首页、课程、路径、社区和我的，当前选中为「我的」。
  视觉风格突出科技感和专业性。