核心流程三步走
1. 用 AI 输出需求文档
首先，让 AI 根据产品思路或功能描述，生成一份清晰、无技术细节的需求文档。这一步不写代码，只聚焦逻辑与用户流程。
2. AI 生成 HTML 原型代码
基于上一步的需求文档，直接让 AI 生成对应的 HTML 代码，快速搭建出可交互的前端原型。支持实时预览，直观看到界面效果。
3. 反复微调，直至满意
生成的原型往往需要多次调整。通过自然语言描述修改方向，AI 可快速迭代代码，直至达到想要的交互与视觉效果。
4. 导入设计工具
将最终生成的 HTML 代码导出，可直接导入 Figma 或墨刀中继续细化设计，无缝衔接后续的 UI/UX 工作。
使用 Cursor 实现全自动原型设计
'画原型'是产品经理的经典痛点——逻辑要严谨、交互要清晰、UI 要美观，耗时堪比前端开发。Cursor 等 AI 工具的兴起正在变革这一流程：它一句提示词，就可以完成一整个 App 的原型。
1. 准备工作
在 Cursor 中创建一个新项目，并选择合适的模型。同时，编写清晰的提示词，明确产品的功能需求、页面布局和设计风格等。
2. 编写提示词
要让 Cursor 从 0 生成原型稿，需设定三个角色：产品经理梳理需求，UI 设计师完成页面设计，前端工程师实现代码。以下是一个旅行 App 的提示词示例：
我想开发一个旅行 app 要输出原型图，请通过以下方式帮我完成 app 所有原型页面的设计。
1. 作为产品经理先设计出这个 app 实现哪些功能
2. 作为 UI 设计师完成这些原型界面的设计
3. 使用 html 在一个界面上生成所有的原型界面，使用 Tailwind CSS 创建高保真 UI 原型，可从 Unsplash 获取图片素材，使用 FontAwesome 等开源图标库，让原型显得更精美和接近真实
4. 我希望这些界面可直接用于项目开发
3. 生成原型图
在 Cursor 中选择 Agent 模式，输入提示词并执行。Cursor 会根据提示词生成相应的代码和原型界面。如果生成的原型需要修改或优化，可将生成的 html 文件导入 Figma 或墨刀等设计工具进行编辑。
4. Figma 优化原型
如果生成的原型需要修改或优化，可将 html 文件导入 Figma 后进行编辑、优化。
创建设计稿
在 Figma 中新建文件。
搜索并引用插件
搜索并安装 html.to.design 插件。
导入 html
使用插件将生成的 HTML 文件导入 Figma。
编辑原型
在 Figma 中对导入的组件进行精细化调整。
5. 总结
当 AI 生成力遇上设计表现力，产品经理的原型设计流程被重构：前半程用自然语言快速搭建框架，后半程用精细化组件打磨体验。这种组合不仅减少了重复劳动，更让'需求 - 原型 - 开发'的三角闭环真正流动起来。
