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

网址

Caption

type

date

slug

summary

从繁琐到简便

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

从分析用户需求开始

梳理具体功能列表

UI设计效果图

前端开发代码实现

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

一个智能健身教练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设计师完成设计、前端工程师代码实现。我的提示词也遵循这一原则：

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

明确功能需求

UI设计思路

技术实现方式和素材选择

最终期望

AI的思考与创作过程

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

核心功能设计：首先作为产品经理，设计出包括用户系统、智能搜索、支付、出行助手等功能模块

UI设计思路：确定设计风格（简洁现代、以用户体验为核心）、配色方案、交互原则等

代码实现：生成完整的HTML、Tailwind CSS代码，实现全部界面原型

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

成果展示

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

首页（搜索界面）

车次查询结果

车票详情页

订单信息页

支付成功页

订单管理

智能助手

出行帮手

我的页面

同行活动

站内设施

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

建议

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

提示词结构化：确保你的提示词包含功能需求、UI风格、技术要求和最终期望

适当添加细节：如果对功能列表、UI风格有特定要求，可在提示词中添加更详细的描述

选择稳定模式：目前Ask模式相对更稳定，推荐使用

代码保存：生成的代码可直接保存为HTML文件，在浏览器中打开即可查看效果

总结

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

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

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

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

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

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

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

关键词：AI开发、应用原型、Claude 3.7、JetBrains、提示词工程