AI 生成前端代码：高效软件原型设计工作流

近年来，AI 辅助开发日益成熟，尤其在快速原型设计领域。今天分享一套借助 Cursor、ChatGPT 等 AI 工具，实现软件原型自动绘制与代码生成的实战流程。

核心流程概览

这套方法主要包含三个关键环节，最后对接设计工具即可：

1. 需求文档生成：让 AI 基于产品思路输出清晰的需求文档，聚焦逻辑与用户流程，暂不涉及技术细节。
2. HTML 原型构建：依据需求文档直接生成 HTML 代码，搭建可交互的前端原型，支持实时预览。
3. 迭代优化与导入：通过自然语言描述调整界面效果，最终将 HTML 导出并导入 Figma 或墨刀进行精细化 UI/UX 设计。

实战演示：使用 Cursor 全自动画原型

'画原型'一直是产品经理的痛点——逻辑严谨、交互清晰、UI 美观往往耗时堪比前端开发。Cursor 的出现改变了这一现状，一条精准的提示词就能完成整个 App 的原型搭建。

准备工作

在 Cursor 中创建新项目，选择性能较强的模型（如 Claude 系列）。关键是编写清晰的提示词，明确产品的功能需求、页面布局和设计风格。

提示词工程策略

要让 Cursor 从 0 生成高质量原型稿，建议让它同时扮演三个角色：产品经理梳理需求、UI 设计师规划界面、前端工程师实现代码。以下是一个旅行 App 的提示词示例：

我想开发一个旅行 app 要输出原型图，请通过以下方式帮我完成 app 所有原型页面的设计。

1. 作为产品经理先设计出这个 app 实现哪些功能
2. 作为 UI 设计师完成这些原型界面的设计
3. 使用 html 在一个界面上生成所有的原型界面，使用 Tailwind CSS 创建高保真 UI 原型，可从 Unsplash 获取图片素材，使用 FontAwesome 等开源图标库，让原型显得更精美和接近真实
4. 我希望这些界面可直接用于项目开发

生成与调试

在 Cursor 中选择 Agent 模式，输入上述提示词并执行。根据生成的代码和界面效果，如果需要进行修改或优化，可以直接用自然语言描述调整方向，AI 会快速迭代代码。

导入 Figma 深化设计

生成的 HTML 原型可以作为基础框架，导入 Figma 后进行组件级编辑和优化。

创建设计稿

在 Figma 中新建文件，准备导入。

引用插件

搜索并安装 html.to.design 插件，这是连接 HTML 与 Figma 的关键桥梁。