【升级版】一句话生成高保真app原型图！Cursor + Claude 3.7 Sonnet让设计师危险了？

前两天，在下面这篇文章里，已经给大家介绍过通过一句话提示词生成app原型图，再截图让Cursor完成app开发的方法了。

但是在原型图部分还存在两个问题：

1、在一个html文件中包含那么多app原型界面，实在是太长了，通常是1000-3000行之间，这个代码量会导致无法使用agent模式工作，而常规的composer模式（cursor 0.46版本中的edit模式）也会出现1-2次代码生成过程被截断的问题，甚至在0.46版本里还可能难以复制没有生成完成的代码；

2、设计出的原型我觉得质量非常不错了，但，还是有提升空间，可以更多使用真实的图片，显得更精美。

所以，为了解决这个问题，我这两天做了不下20次的尝试，浪费了300多次cursor次数，终于获得到了如下的效果：

1. 播客应用原型设计

2. 加上社交功能的Netflix app原型设计

3. 综合了小红书和B站特点的社区app原型设计

下面就是这段🪄魔法提示词，大家自己去试试吧，注意两点：

1）选择Cursor agent模式；

2）选择Claude 3.7 Sonnet模型。

我想开发一个{类似小宇宙的播客app}，现在需要输出高保真的原型图，请通过以下方式帮我完成所有界面的原型设计，并确保这些原型界面可以直接用于开发：

中的内容是让你自由调整的，或长或短都可以。

按我实际的体验来说，大概50%以上的情况你都可以你是可以一次性完成所有界面的生成的，相比前一篇文章的策略来说，你会得到大概10个左右的不同代码文件，但你只需要打开index.html文件即可，所有页面都会在这个页面中展示。

在部分情况下，你可能会遇到原型中有些图片没法正常展示的情况，你用自然语言描述清楚你看到的问题，让Cursor进行调整就好了。

上述的提示词看着挺魔法，尤其很多人看到我写的一些带有技术栈理解和表达的CursorRules或者各种提示词后，都会不相信我居然不懂技术，居然不会写代码？

所以我正好来谈谈我的提示词是怎么写出来的，相比提供「提示词」这种鱼，我还是更喜欢授人以渔的事，希望跟你讲清楚逻辑。

其实不管是写这个生成原型的提示词，写cursorrules，或是和AI协作开发产品，你最需要拥有的是两个思维：

1、你不会，但你可以学，AI是最好的老师；

2、测试&迭代。

比如，这段提示词中关于样式使用“Tailwind CSS（或 Bootstrap）”的要求，其实我压根不知道这是啥，这也不重要，这只是因为我希望有更好的样式，以及更少的代码量以减少cursor报错的可能，我提目标，AI老师会给我建议解决方案的。

至于如何让AI设计的网页原型中能带有真实的图片，以及怎么获得更真实的接近iPhone的效果，同样是AI告诉我的。

以及，这个过程其实还循环了很久，因为每次AI帮助我生成提示词之后，我还需要去测试，实际的效果，会有各种不符合预期的情况，比如：

问题1:下面这个，虽然原型效果看起来不错，但是网页中只展示了一个界面，没有把所有界面平铺展示👇

问题2:也可能，甚至界面都展示不出来的👇

问题3:也可能得到这样的一个导航界面👇

问题4:又或者AI选择了下面这张，AI选择了所谓fetch()的方案，这导致我没法直接打开html文件，而需要开启本地服务器的（可以这么做，但是这个策略对新手不友好。

总之，要得到一个更通用，效果更好的提示词，需要进行非常多的测试和迭代，而且同一套提示词，在不同模型上的变现可能很不相同。

说这些是想告诉你：

1）不懂技术也没事，这些问题其实都可以通过自然语言解决，你也可以做到，实际上没那么魔法🪄

2）你需要培养和AI协作，以及不断迭代的思维，这是利用好AI的关键。

以及，对于帮普通人学好AI编程，用AI编程提升工作效率，做出自己的作品我是认真的，你可以通过这个链接或「阅读原文」了解我的AI编程知识星球：https://t.zsxq.com/BFTPI

URL Source: https://mp.weixin.qq.com/s/xbFqY9DwTwwZskgBmeqAxA?token=1284891328&lang=zh_CN