用AI提示词1分钟生成专业原型图，碘伏传统设计流程！

很多人都知道用提示词写文章、写脚本，但很少人意识到——提示词还能直接生成原型图。结果图的效果相当惊人，关键是整个过程不到一分钟，就能把天马行空的想法变成活生生的界面实现，直接摆在眼前。是不是有点逆天？不信往下看。

你看到的原型图可能是这样的：

也可能是这样的：

你以为这是UI用Figma或其他原型工具画的？错，其实都是AI提示词生成的。今天就用简单的步骤告诉你，如何做出一款这样的提示词。

步骤一：功能描述

核心思路很简单：先把你的功能描述清楚，让大模型明白你要做什么。描述得越具体，模型理解得越准确。

步骤二：原型设计

原型设计可以拆成五部分：UX分析、产品界面规划、高保真UI设计、风格设定、HTML原型实现。

先做UX分析，目的是研究用户行为，设计出顺畅的流程。

接着是产品界面规划，确定产品的整体形态和主要功能布局。

然后进入UI设计思考。这一步可以选择遵循iOS规范、Tailwind CSS规范或Element-UI规范来设计，让界面具备一致性。

风格设定是在UI基础上做补充，比如加入高级紫色、绿色小清新等，来强化视觉调性。

接下来是原型生成，需要告诉大模型采用什么技术框架。

最后是整体交付物的输出，明确告诉模型我们想要什么格式和内容。

步骤三：注意事项

这里可以补充一些约束条件——例如：所有设计和代码实现需符合现代移动应用的标准，兼顾视觉美观性、技术可行性以及未来的可扩展性。另外，完整的提示词模板已经整理好，只需根据需求微调即可。

各个大模型的效果如何

提示词写好了，效果到底怎么样？来看看几个主流大模型的表现：

1. Kimi K2模型：第一次效果还不错，但偶尔会“抽风”，稳定性不够，需要多试几次。

2. Cursor + Claude 4：效果比较稳定，细节处理到位。

3. Trae + Claude：实现效果中规中矩，可以接受。

4. 原生Claude：完全用Claude实现的效果，最后发现原生的效果反而能接受，综合表现不错。

写在后面的话

上面就是用提示词生成的原型图，虽然称不上最顶尖，但已经远超预期。后续借助AI编程的力量，即使没有系统学过代码的人，也能做出小程序、iOS客户端了。这个趋势，值得所有人关注。