【升级版】一句话生成高保真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}，现在需要输出高保真的原型图，请通过以下方式帮我完成所有界面的原型设计，并确保这些原型界面可以直接用于开发：

1、用户体验分析：先分析这个 App 的主要功能和用户需求，确定核心交互逻辑。

2、产品界面规划：作为产品经理，定义关键界面，确保信息架构合理。

3、高保真 UI 设计：作为 UI 设计师，设计贴近真实 iOS/Android 设计规范的界面，使用现代化的 UI 元素，使其具有良好的视觉体验。

4、HTML 原型实现：使用 HTML + Tailwind CSS（或 Bootstrap）生成所有原型界面，并使用 FontAwesome（或其他开源 UI 组件）让界面更加精美、接近真实的 App 设计。

拆分代码文件，保持结构清晰：

5、每个界面应作为独立的 HTML 文件存放，例如 home.html、profile.html、settings.html 等。

- index.html 作为主入口，不直接写入所有界面的 HTML 代码，而是使用 iframe 的方式嵌入这些 HTML 片段，并将所有页面直接平铺展示在 index 页面中，而不是跳转链接。

- 真实感增强：

 - 界面尺寸应模拟 iPhone 15 Pro，并让界面圆角化，使其更像真实的手机界面。

 - 使用真实的 UI 图片，而非占位符图片（可从 Unsplash、Pexels、Apple 官方 UI 资源中选择）。

 - 添加顶部状态栏（模拟 iOS 状态栏），并包含 App 导航栏（类似 iOS 底部 Tab Bar）。

请按照以上要求生成完整的 HTML 代码，并确保其可用于实际开发。

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

按我实际的体验来说，大概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进化论-花生”。