花叔专栏 / 独立开发

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

花叔2025.03.04公众号原文

前两天，在下面这篇文章里，已经给大家介绍过通过一句话提示词生成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老师会给我建议解决方案的。