现在我要开发一个汽车销售的 App，根据三个角色设计提示词如下：

我想开发一个汽车销售 App，要输出原型图，请通过以下方式帮我完成 App 所有原型页面的设计。

1、作为产品经理，先设计出这个 App 要实现哪些功能
2、作为 UI 设计师，完成这些原型界面的设计
3、使用 HTML 在一个界面上生成所有的原型界面，使用 Tailwind CSS 创建高保真 UI 原型，可从 Unsplash 获取图片素材，使用 FontAwesome 等开源图标库，让原型显得更精美和更加真实
4、我需要这些界面可直接用于项目开发

帮我把这个提示词丰富一下，达到能做出一个非常高端 App 的要求，最后把提示词以可以复制的形式给我

# 高端汽车销售App原型设计

## 项目定位

开发一款高端豪华汽车销售 App，对标蔚来、保时捷级别的数字化购车体验平台。
目标用户：25-50 岁中高收入人群。

请依次以三个角色完成设计：

---

## 角色一：产品经理

设计完整的产品功能架构，包含以下模块：

1. **首页/发现页** - 品牌故事、精选车型、活动Banner、智能推荐
2. **车型展示** - 车系列表、车型详情、配置对比、360°全景看车
3. **3D/AR看车** - 沉浸式3D展厅、AR实景摆放、内饰漫游
4. **智能选配** - 外观颜色、内饰材质、选装包、实时价格计算
5. **预约服务** - 在线预约试驾、到店接待、上门试驾
6. **金融方案** - 贷款计算器、分期方案、以旧换新估价
7. **订单中心** - 订单追踪、生产进度、物流状态、交付预约
8. **个人中心** - 会员体系、积分商城、专属顾问、收藏夹
9. **在线客服** - AI智能客服、真人顾问、视频咨询
10. **资讯社区** - 品牌动态、车主故事、试驾评测

输出核心页面清单（不少于18个页面）。

---

## 角色二：UI设计师

制定设计规范：

### 设计风格
极简奢华、科技未来感、沉浸式体验

### 设计参考
蔚来App、保时捷官网、特斯拉App、苹果设计语言

### 配色方案
- **主色**：深邃黑(#0A0A0A) / 纯净白(#FFFFFF)
- **强调色**：香槟金(#C9A962) 或 电光蓝(#0066FF)
- **辅助色**：高级灰(#8E8E93)、浅灰背景(#F5F5F7)

### 设计元素
- **圆角**：16-24px大圆角
- **阴影**：轻微柔和阴影、毛玻璃效果
- **图片**：高品质汽车大图
- **留白**：大量留白营造高级感

---

## 角色三：前端开发

在单个HTML文件中实现所有原型页面。

### 技术栈
- Tailwind CSS（CDN 引入）
- FontAwesome / Heroicons 图标库
- Unsplash 高质量汽车图片
- Google Fonts 字体

### 页面规格
- **移动端尺寸**：393×852（iPhone 14 Pro）
- 所有页面以网格布局横向排列展示
- 每个页面添加标题标注

### 必须包含的页面

1. 启动页/闪屏页
2. 登录页（手机号+社交登录）
3. 注册页
4. 首页（推荐车型、活动、快捷入口）
5. 车型列表页（筛选、排序）
6. 车型详情页（轮播图、参数、亮点）
7. 360°看车页
8. 智能选配页（颜色、配置选择）
9. 配置对比页
10. 预约试驾页
11. 预约成功页
12. 金融方案页（贷款计算器）
13. 订单列表页
14. 订单详情页（进度追踪）
15. 个人中心页
16. 会员中心页
17. 设置页
18. 在线客服页（聊天界面）
19. 资讯列表页
20. 资讯详情页
21. 搜索页

### 视觉要求
- 使用 Unsplash 真实豪华汽车图片
- **界面精致度达到可直接开发的标准**
- 注重细节：图标、间距、对齐、阴影
- 加入渐变、毛玻璃效果提升质感
- 底部导航栏固定美观
- 状态栏显示时间、信号、电量

### 代码要求
- 语义化HTML5
- 清晰注释
- 组件化可复用
- 代码整洁

---

## 第三方平台导入兼容

生成的原型需支持导入以下设计平台：

### 支持平台
- Figma
- MasterGo（即时设计）
- Sketch
- Adobe XD
- Pixso

### 兼容性要求

#### 1. SVG导出支持
- 每个页面可独立导出为SVG格式
- 添加"导出全部为SVG"功能按钮
- SVG保持矢量清晰度和图层结构

#### 2. 图层命名规范
- 使用语义化class命名（如：header、nav-bar、card-item）
- 组件层级清晰，便于在设计工具中识别
- 命名格式：模块/组件/状态（如：home/card/hover）

#### 3. 设计标注输出
- 输出完整的设计规范文档（Design Tokens）
- 包含：颜色值、字体大小、间距、圆角、阴影参数
- 格式兼容Figma Tokens插件

#### 4. 组件化结构
- 按钮、卡片、导航栏等封装为独立组件
- 便于在Figma/MasterGo中创建组件库
- 支持快速复制重建

#### 5. 导出功能实现

在HTML页面中添加工具栏，包含：
- **[导出单页SVG]** - 点击任意页面导出该页
- **[导出全部SVG]** - 打包下载所有页面
- **[导出设计规范]** - 下载JSON格式的Design Tokens
- **[复制CSS变量]** - 一键复制所有设计变量

#### 6. Figma导入指南
- 在HTML中附带简要说明
- 步骤：SVG 导入 → 解组 → 转换为 Frame → 应用 Auto Layout

---

## 输出标准

- 视觉效果接近真实App（高保真原型）
- 设计风格统一、专业、高端
- 功能逻辑完整、符合用户习惯
- 代码可用于实际开发参考
- 所有页面在一个HTML文件中完整呈现
- **支持一键导出SVG，可直接导入Figma/MasterGo等设计平台**
- **附带Design Tokens便于设计系统迁移**

请现在开始，依次以三个角色完成设计并输出完整 HTML 代码。

# 颜色系统
主色-黑: #0A0A0A
主色-白: #FFFFFF
强调色-金: #C9A962
强调色-浅金: #D4B978
中性灰: #8E8E93
浅灰背景: #F5F5F7

# 字体系统
展示字体: Playfair Display
正文字体: Inter

# 圆角系统
小圆角: 8px
中圆角: 12px
大圆角: 16px
超大圆角: 24px

# 间距系统
xs: 4px
sm: 8px
md: 16px
lg: 24px
xl: 32px