尝试了使用cursor生成html代码，将代码传到云端后导入到figma。整体效果如下。
提示词：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| 我想要开发一个[用来记忆GRE单词的 app]。
我需要将上面的这个应用输出成高保真的原型图设计。请考虑以下的规范：
1. 用户体验：先分析产品的主要功能和需求，确定下核心能力
2. 产品规划：希望你作为一位 20 年的产品经理，来设计我们的整个产品，确保架构非常合理
3. UI 设计：作为 30 年的 UI 设计师，要保证符合目标人群的使用习惯、符合手机端的设计规范、使用比较现代化的 UI 元素，注重产品体验和视觉
4. 输出：
- 请使用 HTML + Tailwind CSS 来生成所有的原型图界面，可以使用 FontAwesome 来美化界面，接近真实的 app 效果。
- 请根据功能拆分代码文件，保存结构清晰，每个功能界面需要一个独立的 HTML 文件，比如 home.html、games.html、me.html 等等
- 尽可能地使用 Tailwind CSS 的样式，如果需要自定义的话，请用独立的 css 文件，然后引入到 HTML 代码中来
- 用 index.html 作为主入口，不直接写入所有界面的代码，这里我们使用 iframe 的方式来嵌套其他页面，并将所有页面直接展示在 index 页面上
- 界面尽可能模拟 iPhone 15 的真实外观
- 页面里面需要使用到的图片，可以从 unsplash、pexels 获取图片
- 尽最大的可能降低页面的 TOKEN
- 保证我们的代码页面最后能够很顺畅的转为 Figma 文件进行二次编辑
|
生成原型图如下：
大概能看，但还是需要人工进行调整。不过生成的图标应该可以省去在画高保真时找图标的精力。