如何使用Cursor的claude-3.7模型来开发高保真的原型设计图，学会写好的提示词人人都是设计师
1、想要开发出高保真的设计图原型，需要给出cursor具体的提示词：比如我想开发一款IT面试题小程序，给出的提示词是这样的
我想开发一个 {IT面试题库小程序}，现在需要输出高保真的原型图，请通过以下方式帮我完成所有界面的原型设计，并使用这些原界面直接开发一个小程序：
1、用户体验分析：先分析这个小程序的主要功能和用户需求，确定核心交互逻辑。
2、产品界面规划：作为产品经理，定义关键界面，确保信息架构合理。
3、高保真 UI 设计：作为 UI 设计师，设计贴近真实小程序设计规范的界面，使用现代化的 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 状态栏)，并包含小程序导航栏 (类似 iOS 底部 Tab Bar)。
请按照以上要求生成完整的 HTML 代码，并确保其可用于实际开发。然后我什么都没有动，给出效果图如下：
生成的页面如下结构：
附上md文件：
# IT面试题库小程序
这是一个使用HTML、CSS和JavaScript构建的IT面试题库高保真原型设计。该原型设计模拟了一个iOS风格的小程序，专注于IT面试题的收集、浏览和学习。
## 功能概述
- **首页**: 展示推荐题目、热门题目和最近学习记录
- **分类页**: 按技术领域分类展示题目
- **题库页**: 题目列表和详细信息
- **搜索页**: 搜索题目功能
- **收藏页**: 收藏的题目集合
- **个人中心**: 个人信息和学习统计
- **设置页**: 应用设置和偏好
## 技术栈
- HTML5
- CSS3
- Tailwind CSS
- Font Awesome 图标库
## 项目结构
```
it-interview-app/
├── css/ # 样式文件
│ └── style.css # 主样式文件
├── images/ # 图片资源
│ └── status-bar.svg # 状态栏图片
├── pages/ # 页面文件
│ ├── home.html # 首页
│ ├── categories.html # 分类页
│ ├── questions.html # 题库页
│ ├── question-detail.html# 题目详情页
│ ├── search.html # 搜索页
│ ├── favorites.html # 收藏页
│ ├── profile.html # 个人中心页
│ └── settings.html # 设置页
└── index.html # 主入口文件（iframe容器）
```
## 使用说明
1. 克隆或下载本仓库
2. 打开 `index.html` 文件在浏览器中查看所有界面
3. 每个页面也可以单独打开查看
## 设计特点
- 模拟iPhone 15 Pro的界面尺寸和圆角
- 包含iOS状态栏和底部导航栏
- 使用现代化UI元素
- 遵循iOS设计规范的交互逻辑
- 高保真度UI组件
## 预览
使用 `index.html` 可以在一个页面中预览所有界面。
## 开发
该项目仅为原型设计，可以作为实际开发的参考。如果要进行实际开发，建议:
1. 使用框架如React Native、Flutter或微信小程序框架
2. 添加后端API接口连接
3. 实现真实的数据交互功能
## 许可
MIT License