Getting Started

Start Fast 快速入门:6 步生成 AI 应用原型

准备一段产品描述,Start Fast 会把它整理成需求、页面和项目文件。本教程覆盖第一次创建所需的完整流程。

开始前需要准备什么?

开始前只需确定三个信息:应用给谁使用、用户要完成什么任务、结果需要在哪些页面中呈现。不需要先写技术方案,也不需要准备设计稿。

一句话示例:为经常出差的销售人员创建移动端行程管理应用,支持添加航班、酒店和客户拜访,并在首页按时间展示当天安排。

如何使用 Start Fast 生成应用原型

  1. 描述应用目标。 在首页输入目标用户、核心任务和主要页面。描述越具体,第一次生成的结构越接近预期。
  2. 登录并开始创建。 点击“开始创建”。系统创建项目后会进入项目页面,并开始生成需求和原型文件。
  3. 查看生成进度。 对话区域会显示当前处理阶段;文件区域用于查看需求文档、待办和原型页面。项目进入页面后也会主动同步文件列表。
  4. 预览原型页面。 在文件树中选择 prototype 目录下的 HTML 页面。预览区域会加载对应页面,可在移动端和 Web 模式之间切换。
  5. 用对话调整结果。 说明要修改的页面、元素和目标效果。例如:“将首页统计卡改成两列,保留橙色强调色,并为无数据状态增加操作按钮。”
  6. 导出并继续开发。 确认页面流程后导出项目。下载包可在 VS Code、Cursor 或其他开发工具中打开,再接入真实接口和业务数据。

生成结果包含什么?

一个项目通常由三类内容组成:需求与说明文档、可交互原型页面、用于继续开发的项目文件。实际文件会根据应用描述和生成进度变化。

  • 需求文档:记录目标、功能范围和实现待办。
  • 原型页面:位于 prototype/ 目录,可直接预览各页面的布局和交互。
  • 项目结构:用于导出和继续实现的 React + Vite 文件。

常见问题

页面生成后为什么没有立即显示?

先检查文件树是否已经出现 prototype 页面,再选择具体 HTML 文件。网络波动时可以重新加载文件列表;不需要等待旧的 WebSocket 消息才能查看服务端已有文件。

第一次结果和想法差距较大怎么办?

不要只说“更好看”或“再优化一下”。指出页面、目标用户、需要保留的内容和希望改变的具体结构。下一篇教程提供一套可复制的描述模板。

原型是否等于可直接上线的产品?

原型主要用于确认页面结构、流程和视觉方向。上线前仍需接入真实数据、身份认证、错误处理、监控和安全检查。

准备好开始了吗?

先写清目标用户和一个核心任务,后续细节可以在项目中逐步补充。

创建应用原型