我用jetbrains的AI assistant一键生成了十几款完整APP原型图

你好，我是易安。

整个周末我都在使用AI assistant和Junie，先给大家演示下仅用一句提示词，借助JetBrains AI Assistant (Claude 3.7模型)，高效完成一整套App的原型设计。

从繁琐到简便

回想过去，要输出一组App原型图，我们需要经历漫长的过程：

1. 从分析用户需求开始
2. 梳理具体功能列表
3. UI设计效果图
4. 前端开发代码实现

这一套流程下来，往往需要数天甚至数周的时间，涉及多个角色协作。而现在，这一切可以在几分钟内完成。

一个智能健身教练APP原型设计

一个AI个性化音乐推荐应用原型

一个创意写作与AI协作工具APP原型设计

一个创新型电商平台APP原型设计

一个语言学习应用APP原型图

一个高效任务与项目管理应用界面原型

一个社群管理工具原型，包含移动端和桌面版

Claude 3.7的应用原型生成能力

JetBrains最新推出的AI Assistant集成了Claude 3.7模型，它具备强大的生成能力。我通过实际测试，发现它能够一站式完成从产品定义到代码实现的全流程，这里用cursor也能做到，相比cursor具有更长的token，而使用trae海外版本，回复一次就出现排队情况，且无法生成一套完整的流程，看来免费真的有限啊。

工作模式选择

在使用cursor时，有3种模式可供选择：

• Agent模式：理论上最强大，能够主动分析问题并调用各种工具完成复杂任务。但在实际测试中，这种模式不够稳定，经常会在思考中自动停止。
• Manual模式：可直接对项目文件进行合并和修改，需要用户确认，适合代码编辑场景。
• Ask模式：负责生成代码，需要手动应用到项目中，虽然需要一些操作，但相对稳定。

而IDEA不同

它的AI assistant有2个模式

• Edit模式：等同cursor的manual模式，这里会修改代码，需要用户确认
• Chat模式： 等同cursor的Ask模式，可以任意对话

那AI assistant的agent去哪里了？

答案就是集成在新版的Agent插件Junie中

Junie包含code和Ask两者，选用Code会进行编码，如果勾选Brave Mode，责这个设计、编码、测试流程无需用户确认，Jetbrains会直接生效，这对于已有代码的修改，会有很大风险，需要谨慎使用！

在今天的案例中，我选择了Chat模式，以获得更可靠的结果。

构建完美提示词

原型设计通常包含三个关键环节：产品经理确认需求、UI设计师完成设计、前端工程师代码实现。我的提示词也遵循这一原则：

我想开发一个AI智能订火车票app，现在需要输出原型图，请通过以下方式帮我完成app所有原型图片的设计。
1、作为产品经理先设计出这个app实现哪些功能
2、作为UI设计师完成这些原型界面的设计
3、使用html在一个界面上生成所有的原型界面，使用Tailwind CSS创建高保真UI原型，可从Unsplash获取图片素材，使用FontAwesome等开源图标库，让原型显得更精美和接近真实
4、我希望这些界面可直接用于项目开发

这个提示词包含四个关键元素：

• 明确功能需求
• UI设计思路
• 技术实现方式和素材选择
• 最终期望

AI的思考与创作过程

输入提示词后，Claude 3.7开始按照要求步骤工作：

1. 核心功能设计：首先作为产品经理，设计出包括用户系统、智能搜索、支付、出行助手等功能模块
2. UI设计思路：确定设计风格（简洁现代、以用户体验为核心）、配色方案、交互原则等
3. 代码实现：生成完整的HTML、Tailwind CSS代码，实现全部界面原型

整个过程中，AI不仅考虑了产品逻辑，还融入了现代UI设计理念和技术实现最佳实践。

成果展示

经过短短几分钟，一个完整的火车票预订App原型诞生了。这个原型包含12个关键界面：

• 登录/注册界面
• 首页（搜索界面）
• 车次查询结果
• 车票详情页
• 订单信息页
• 支付成功页
• 订单管理
• 智能助手
• 出行帮手
• 我的页面
• 同行活动
• 站内设施

所有界面采用蓝色为主色调，设计简洁现代，注重用户体验，并包含微交互效果。最重要的是，这些界面不仅仅是展示效果，同时包含了可直接使用的HTML和CSS代码。

建议

如果你也想尝试这种方式快速生成App原型，以下是几点建议：

1. 提示词结构化：确保你的提示词包含功能需求、UI风格、技术要求和最终期望
2. 适当添加细节：如果对功能列表、UI风格有特定要求，可在提示词中添加更详细的描述
3. 选择稳定模式：目前Ask模式相对更稳定，推荐使用
4. 代码保存：生成的代码可直接保存为HTML文件，在浏览器中打开即可查看效果

总结

这个案例只是AI应用开发的一个缩影。曾经需要多人协作、耗时数日甚至数周的工作，现在可以在几分钟内完成。对于产品经理、设计师和开发者来说，这意味着：

1. 更快的迭代：想法可以迅速转化为可视化原型

2. 降低技术门槛：即使不懂代码的产品经理也能生成可用原型

3. 专注创意：减少重复劳动，将精力集中在创意和用户体验上

从设计到开发，从构思到实现，AI正在成为我们强大的协作伙伴。在这个AI赋能的新时代，关键不再是你掌握了多少技术细节，而是你能提出多么有价值的问题，以及如何利用AI工具将你的创意转化为现实。

所以，无论你是产品经理、设计师还是开发者，是时候拥抱这种变革，重新思考你的工作流程，释放更多创造力。

你想尝试设计什么App？快试试这个方法吧！

---