本文分享了一种利用Cursor+Claude 3.7 Sonnet快速生成高保真App原型图的提示词方法。该方法解决了以往版本容易报错和原型图不够精美的问题，通过优化提示词，可以直接在Cursor中生成高质量的原型图，无需额外操作，对新手友好。该方法的核心在于详细的提示词设计，包括用户体验分析、产品界面规划、高保真UI设计和HTML原型实现，并拆分代码文件，保持结构清晰，模拟iPhone 15 Pro的界面尺寸和圆角，使用真实的UI图片，添加顶部状态栏和App导航栏，从而增强真实感，最终生成可用于实际开发的完整HTML代码。

💡**用户体验至上**: 提示词首先强调用户体验分析，明确App的主要功能和用户需求，确保核心交互逻辑的合理性，这是原型设计的基础。

🎨**高保真UI设计**: 作为UI设计师，提示词要求设计贴近真实iOS/Android设计规范的界面，使用现代化的UI元素，使其具有良好的视觉体验，从而保证原型图的质量。

📱**原型真实感增强**: 提示词模拟iPhone 15 Pro的界面尺寸和圆角，使用真实的UI图片，并添加顶部状态栏和App导航栏，最大程度地增强原型图的真实感，使其更接近真实的App界面。

🛠️**代码结构清晰**: 提示词要求将每个界面作为独立的HTML文件存放，并通过iframe的方式嵌入到主入口文件index.html中，保持代码结构的清晰，便于后续开发。

分享下早上提到的用Cursor+Claude 3.7 Sonnet一段话生成高保真app原型图的提示词，相比我自己前几天写的版本，主要解决了两个问题：1）原来的版本因为试图在一个html文件内生成过多代码，所以容易报错需要多次操作；2）生成的原型图还是不够精美。

新的提示词是解决了相关问题，以及同样只需要给Cursor直接发提示词就好了，不需要做任何额外的操作，相对而言比较新手友好。

?
我想开发一个{类似小宇宙的播客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 代码，并确保其可用于实际开发。

如果你对这套提示词是怎么迭代写出来的感兴趣，尤其是为什么我不会写代码为啥提示词里能表述这么多编程专业词汇，你可以看看这篇文章：https://mp.weixin.qq.com/s/xbFqY9DwTwwZskgBmeqAxA