近年来，AI 辅助开发日益成熟，尤其在快速原型设计领域。本文介绍如何借助 Cursor、Trace solo、ChatGPT、Qoder 等 AI 工具，高效完成软件原型的自动绘制与代码生成。
核心流程三步走
1. 用 AI 输出需求文档（非技术描述）
首先，让 AI 根据产品思路或功能描述，生成一份清晰、无技术细节的需求文档。这一步不写代码，只聚焦逻辑与用户流程。
2. AI 生成 HTML 原型代码
基于上一步的需求文档，直接让 AI 生成对应的 HTML 代码，快速搭建出可交互的前端原型。支持实时预览，直观看到界面效果。
3. 反复微调，直至满意
生成的原型往往需要多次调整。通过自然语言描述修改方向，AI 可快速迭代代码，直至达到想要的交互与视觉效果。
4. 导入设计工具
将最终生成的 HTML 代码导出，可直接导入 Figma 或墨刀中继续细化设计，无缝衔接后续的 UI/UX 工作。
使用 Cursor 进行自动化原型设计
'画原型'是产品经理的经典痛点——逻辑要严谨、交互要清晰、UI 要美观，耗时堪比前端开发。Cursor 的出现正掀起变革：它一句提示词，就可以完成一整个 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
