
我需要将"需求文档.htm"输出成高保真的原型图设计。请考虑以下内容:
1、用户体验:先分析产品的主要功能和需求，确定下核心能力
2、产品规划:希望你作为一个 40 年的产品经理，来设计我们的整个产品，确保架构非常合理
3、UI设计:作为 30 年的UI设计师，要保证符合目标人群的使用习惯、符合手机端的设计规范、使用比较现代化的 UI元素，注重产品体验和视觉
4：对于页面上的功能使用模拟数据这样可以让用户可以进行一个交互操作
5、输出以下内容:
5.1：不使用任何框架构建工具，
5.2：在预览页面顶部或者底部添加一个清晰的用户流程示意图，展示：
● 各个页面的跳转路径
● 主要的操作流程
● 用箭头标注说明操作流向
5.3：请使用 HTML+ TailwindCss 来生成所有的原型图界面，可以使用 FontAwesome 来美化界面，界面文字、图标、间距需要合适的大小，接近真实的 app 效果。请根据功能拆分代码文件，保存结构清晰，每个功能界面需要一个独立的 HTML 文件，比如 home.html、games.html、me.html 等等
尽可能使用 Tailwind Css 的样式，如果需要自定义的话，请用独立的CSS文件，然后引入到 HTML 代码中来用 index.html 作为主入口，不直接写入所有界面的代码，这里我们使用 iframe 的方式来嵌套其他页面，并将所有页面直接平铺展示在index 页面上。
让所有页面在同一个视图中平铺展示，一行展示多少个页面数量根据当前页面尺寸展示使用flex布局自适应，并且每一个页面顶部展示一个当前页面的名称，以便更直观地预览和比较各个页面。
界面模拟 iPhone 13 的尺寸比例大小，每一个页面上都需要严格遵循 iOS 16 设计规范，包括状态栏、导航栏、按钮样式等(状态栏的颜色使用亮色模式)。
每一个页面的滚动条样式可以优化小一些不要很大的滚动条，颜色浅一些
在index.html里面每展示的一个页面外部顶部居中需要展示当前页面的名称
页面里面需要使用到的图片，可以从unsplash、pexels 获取图片
尽最大的可能降低页面的 token
保证我们的代码页面最后能够很顺畅的转为 Figma 文件进行二次编辑
6：构思设计方案
6.1：根据产品需求和页面功能，主动构思完整的设计方案，包括
  ○ 布局结构
  ○ 颜色样式
  ○ 文案内容
6.2：创建原型页面