什么是 UI 原型图
UI 原型图是设计师和开发者用来展示产品界面外观和功能的视觉模型。
它就像是软件或网站的"草图"，帮助团队在开发前先看到产品的样子。
UI 原型图可以有不同的精细度，从简单的线框图到高保真的交互式设计。
创建一个好的 UI 原型图通常需要设计技能和专业工具，这对很多开发者来说可能是个挑战。
为什么需要 AI 生成 UI 原型图
传统制作 UI 原型图的方式有几个痛点：
首先，设计工具学习曲线陡峭，不是所有人都有时间精通 Figma 或 Sketch。
其次，从零开始设计界面需要大量时间，特别是在项目初期探索阶段。
再者，很多开发者更擅长编写代码而非设计界面，设计往往成为瓶颈。
这时，AI 生成 UI 原型图就派上用场了：
- 只需用自然语言描述你想要的界面
- 几秒钟内就能获得可视化的设计参考
- 无需深厚的设计背景也能创建专业外观的界面
- 快速迭代多个设计方案，促进头脑风暴
AI 不是要取代设计师，而是为大家提供一个快速起步的工具，尤其适合原型验证和概念展示阶段。
如何使用 Cursor 生成 UI 原型图
非常简单，只要在 Cursor Agent 中使用合适的 Prompt，就可以快速生成 UI 原型图。
下面是我使用的 UI 原型图 Prompt，它是一个结构化的 Prompt 模版，你可以根据自己的需求进行调整：
你是一位资深 UI 设计师，根据以下需求创建 UI 原型图：
## 产品需求
- 应用类型：高端健康管理移动应用
- 核心模块：
* 数据仪表盘 (实时健康指标)
* 运动计划系统 (训练课程+进度追踪)
* 睡眠质量分析 (多维数据可视化)
* 营养管理 (智能食物数据库)
## UI 设计
- 单个页面尺寸为 375x812PX，带有描边，模拟手机边框
- 高保真，贴近真实 iOS/Android 设计规范的界面，使用现代化的 UI 元素，使其具有良好的视觉体验。
- 视觉层次
* 使用玻璃拟态
* 多层阴影系统
- 交互细节
* 悬停时组件的微缩放
* 聚焦状态的光晕扩散（box-shadow过渡）
## 技术规范
- 使用 HTML + Tailwind CSS（CDN方式）生成所有原型界面
- 使用 FontAwesome（或其他开源 UI 组件）让界面更加精美、接近真实的 App 设计。
- 图标: 引用在线矢量图标库内的图标（任何图标都不要带有背景色块、底板、外框）
- 图片: 使用开源图片网站链接的形式引入
## 输出规范
- 每个界面应作为独立的 HTML 文件存放
- show.html 作为 UI 原型展示界面，使用 iframe 的方式嵌入所有界面的 HTML 片段
* 所有页面直接平铺展示在 show.html 页面中
* show.html 不需要副标题和需求介绍生成的效果图：
写出一个好的 Prompt，其实就一个简单原则：正确的描述你的需求。
结构化 Prompt
通过 Prompt 的层级结构，可以让 AI 更容易理解你的需求，生成出真正符合需求的、可实现的 UI 原型。
不仅可以应用在原型图场景，在其他场景也是通用的。
分析上面的Prompt，这种层级结构遵循了从抽象到具体的思维过程：
- 先确定做什么（产品需求）
- 再确定长什么样（UI设计）
- 然后确定怎么做（技术规范）
- 最后确定如何交付（输出规范）
这样的流程既符合逻辑思维，也对应了设计开发的实际工作流程。
最重要的是，这种结构让AI能够理解全局，生成出真正符合需求的、可实现的UI原型。
不是随便画几个好看的界面就完事，而是有目的、有约束、有标准的创作。
像是在UI设计部分，你可以继续进行结构化拆分，比如：
- 视觉层次
- 使用玻璃拟态
- 多层阴影系统
- 交互细节
- 悬停时组件的微缩放
- 聚焦状态的光晕扩散（box-shadow过渡）
自定义你的 Prompt
好了，模版和方法都告诉你了，剩下的就看你们的发挥了。
