cursor UI 提示词

注意：使用Curosr+Claude 4 Sonnet（不是thinking模型）

你是一位资深全栈工程师，我想要做一个{ }的IOS APP，现在需要输出高保真的原型图，我准备让Cursor 用HTML的形式 帮我模拟出UI/UX 的设计。

1、用户体验分析：先分析这个 App 的主要功能和用户需求，确定核心交互逻辑，参考 ui_ux_design 设计一个【产品需求】。

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

3、高保真 UI 设计：作为 UI 设计师，设计贴近真实 iOS 设计规范的界面，使用现代化的 UI 元素，使其具有良好的视觉体验，要高级有质感(运用玻璃拟态等视觉效果)，遵守设计规范。

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

图片使用 unslash， 5、每个界面应作为独立的 HTML 文件存放，例如 home.html、profile.html、settings.html 等。 - index.html 作为主入口，不直接写入所有界面的 HTML 代码，而是使用 iframe 的方式嵌入这些 HTML 片段，并将所有页面直接平铺展示在 index 页面中，而不是跳转链接。界面中不要有滚动条出现， - 真实感增强： - 界面尺寸应模拟 iPhone 16 Pro，并让界面圆角化，使其更像真实的手机界面。 - 使用真实的 UI 图片，而非占位符图片（可从 Unsplash、Pexels、Apple 官方 UI 资源中选择）。 - 添加顶部状态栏（模拟 iOS 状态栏），并包含 App 导航栏（类似 iOS 底部 Tab Bar）。

待办事项1：自检代码
依次检查每个页面的html文件，
检查：强制隐藏所有滚动条
检查：设计图尺寸为 375x812PX
检查：信号栏与标题栏背景色必须一致（可以都是透明）
检查：图标和其他样式调用方式
检查：底部tab栏必须为白色填充，100%不透明度。


待办事项2：检查index.html文件
检查index.html文件的全部代码，删除iframe之外的多余装饰性元素，每张设计图的内部已经带有了mock up的样式代码，index.html内的iframe不需要带有mock up的样式，如果有也需要进行删除。


#UI设计风格
优雅的清新主义美学与功能的完美平衡;
清新柔和的渐变配色与品牌色系浑然一体;
恰到好处的留白设计;
轻盈通透的沉浸式体验;
信息层级通过微妙的阴影过渡与模块化卡片布局清晰呈现;
用户视线能自然聚焦核心功能;
精心打磨的圆角;
细腻的微交互;
舒适的视觉比例;
规范的间距；

#UI设计规格
1、单个设计图尺寸为 375x812PX，带有mock up模拟手机的样式。
2、图标:引用在线矢量图标库内的图标
3、图片: 使用Unsplash开源图片网站链接的形式引入
4、样式必须使用<link>标签引入 tailwindcss CDN来完成
5、状态栏显示时间、信号等模拟信息
6、信号栏与标题栏背景色必须一致（可以都是透明）
7、底部tab栏必须为白色填充，100%不透明度。
8、使用固定高度防止容器变形

#注意事项
1、mock up的颜色只能使用黑色
2、所有html中都强制隐藏滚动条

请按照以上要求生成完整的 HTML 代码，并确保其可用于实际开发。。我希望你可以帮我生成一个规范的提示词，让我用来和Cursor沟通。

由于页面较多，你每完成一部分就让我来确认，一直持续到结束。

做一个产品叫：{ } 风格要酷炫一些，其他的你作为资深AI产品经理帮我补充