📌 核心流程三步走
1️⃣ 用 AI 输出需求文档（非技术描述）
首先，让 AI 根据产品思路或功能描述，生成一份清晰、无技术细节的需求文档。这一步不写代码，只聚焦逻辑与用户流程。
2️⃣ AI 生成 HTML 原型代码
基于上一步的需求文档，直接让 AI 生成对应的 HTML 代码，快速搭建出可交互的前端原型。支持实时预览，直观看到界面效果。
3️⃣ 反复微调，直至满意
生成的原型往往需要多次调整。通过自然语言描述修改方向，AI 可快速迭代代码，直至达到想要的交互与视觉效果。
✅ 最后一步：导入设计工具
将最终生成的 HTML 代码导出，可直接导入 Figma 或 墨刀 中继续细化设计，无缝衔接后续的 UI/UX 工作。
Cursor 为例教你全自动画原型整个过程
'画原型'是产品经理的经典痛点——逻辑要严谨、交互要清晰、UI 要美观，耗时堪比前端开发。Cursor AI 工具的出现正掀起变革：它一句提示词，就可以完成一整个 App 的原型。
1. 准备工作
在 Cursor 中创建一个新项目，并选择合适的模型，如 Claude 3.7 Sonnet。同时，编写清晰的提示词，明确产品的功能需求、页面布局和设计风格等。
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 后进行编辑、优化。
创建设计稿
搜索并引用插件：html.to.design
导入 html
编辑原型
5. 总结
当 Cursor 的'AI 生成力'遇上 Figma 的'设计表现力'，产品经理的原型设计流程正在被重构：前半程用自然语言快速搭建框架，后半程用精细化组件打磨体验。这种组合不仅节省了重复劳动，更让'需求 - 原型 - 开发'的三角闭环真正流动起来。