编写 AI 生成 UI 提示词
提示词是你与 AI 沟通的桥梁，它通过自然语言为大语言模型（LLM）提供任务指导。高效的提示词能帮助 AI 更精准地理解需求，生成符合预期的高质量 UI 界面。
提示词核心要素
高效的提示词通常由以下几个关键要素组成。输入的提示词越明确，生成的结果越能符合你的预期。
- 应用类型：说明应用的类型，以生成符合行业需求的界面。
- 目标用户：明确目标用户群体，以便调整设计风格和功能模块。
- 页面名称：描述界面的核心功能，明确页面的用途。
- 详细的页面模块：描述页面的主要组成部分和功能模块。
- 风格描述：指定设计风格和视觉元素，包括主题色、字体和模式等信息。
❌ 避免提示词描述过于含糊：设计一个好看的界面。
✅ 使用清晰、具体的描述：一个适合年轻人的电商首页，包含顶部搜索栏、轮播广告位和底部导航栏，风格现代，配色以蓝白为主。
妙多支持上传参考图片，为生成结果提供更直观的示例。例如，通过图片明确布局结构、页面内容或设计风格。
适用场景
探索创意
当你需要快速探索灵感时，可以使用简短提示词和自由风格，生成多个创意方向，适用于头脑风暴阶段。
通常情况下，妙多 AI 一次生成一个结果。但你可以在提示词中写清要求，让妙多 AI 一次生成两版结果，然后再根据不同的使用场景选择适合的界面风格和布局方向。
- 移动端：
一个健康应用中的食谱页，用于展示精选菜品和膳食规划。请帮我生成两版结果。
- 网页端：
一个名为 GymFlow 的健身房的 CRM 后台仪表盘页面。请帮我生成两版结果。
生成初稿
当你对界面已经有了清晰的想法时，可以输入具体且详细的提示词，也可以上传参考图片，快速生成符合预期的初稿界面。
文字描述
你可以参考提示词核心要素，通过具体的描述来生成符合你预期的初稿界面。
以下是一个音乐库页面的示例，帮助你快速生成初稿并探索更多设计灵感。
- 应用类型：音乐流媒体应用。
- 目标用户：青少年群体。
- 页面名称：音乐库页面。
- 详细页面模块：顶部导航栏，标题是“音乐库”；用户可以通过该模块快捷访问收藏的专辑、歌手、播客，其中「专辑」被选中；底部导航栏，标签包括「推荐」、「发现」、「漫游」、「动态」和「我的」。
- 风格描述：页面的主题色为紫色、暗黑模式。
妙多支持「移动端」和「网页端」多种预设风格。你可以直接设置预设风格，无需再对风格进行复杂的描述。
上传图片
当你已经将需求绘制成线框图，或者找到了合适的参考图片时，可以上传参考图片，AI 会试图理解并还原图片中的布局结构、页面内容、设计风格等信息。
- 如果你想要还原该界面的设计风格和元素，可以只上传图片作为输入。
- 如果你想要参考图片的布局结构和内容，可以同时上传图片和输入文本来描述意图。
生成一套完整界面
目前 AI 生成 UI 暂不支持多轮对话。若要生成一整套界面设计，你可以逐步输入每个页面的具体提示词，或在现有提示词的基础上调整细节，以确保风格和功能的一致性.
连续生成即将上线，敬请期待。
当你需要设计一套完整的界面时，可以通过分步输入提示词，逐步生成各页面设计，最终构建完整的产品交互界面。
例如，通过以下步骤逐步生成一套完整的 AI PM 课程学习应用「AI PM Master」的产品交互界面。
- 1.输入首页的文字提示词：
一款针对 AI PM 课程学习类的 app，AI PM Master。
首页采用卡片式布局，展示精选课程。每个课程卡片包含课程封面图、标题、简短描述、难度级别和学习进度。
该应用的底部导航栏包括首页、课程、路径、社区和我的，当前选中为「首页」。
视觉风格突出科技感和专业性。
- 2.选择「移动端-自由风格」进行风格改编。输入风格名称「AI PM Master」，选择对应的模式、圆角和字体，并将主题色自定义为 #09DD59 。
在生成第一个页面时，你可以通过不断调整提示词优化生成效果，一版满意的提示词便于后续快速生成一套界面。
- 3.后续生成一套界面时，仅需对布局描述进行简单修改。例如，在生成「课程详情页」时，只需修改提示词中对页面布局以及底部导航栏选中状态的描述。
- 4.重复上述操作，生成一套完整的界面。包含「首页」、「课程详情页」、「学习路径页」、「社区讨论页」、「个人学习页」。
妙多支持全面的基础设计功能，你可以通过手动修改细节，编辑图层，设计出一套满意的界面。
提示词示例
你可以尝试复制以下提示词，逐步生成一套完整的 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。 个性化的学习控制台页面。顶部展示学习数据看板（完成课程数、学习时长、技能点等）。下方分区展示：当前进行中的课程、学习计划日历、最近的笔记和讨论。右侧添加学习伙伴和学习群组功能。 该应用的底部导航栏包括首页、课程、路径、社区和我的，当前选中为「我的」。 视觉风格突出科技感和专业性。