电影购票APP实战课件

📱 项目概述

电影购票APP是一个使用Cursor工具claude-3.7模型和AI提示词生成的高保真移动端原型，专门为解决方案团队、产品经理和售前人员设计。本课件展示了如何通过AI辅助开发快速构建商业级原型，提升客户演示效果和产品沟通效率。

🎯 商业应用价值

🎪 售前演示利器

视觉冲击: 高保真界面给客户留下专业印象
功能展示: 完整的用户流程演示产品能力
互动体验: 客户可以直接操作原型，增强参与感
快速响应: 根据客户反馈快速调整展示内容

📈 解决方案验证

概念验证: 快速验证产品想法的可行性
需求澄清: 通过可视化原型明确客户需求
技术展示: 证明团队的技术实现能力
风险控制: 在开发前发现潜在问题

🚀 产品规划工具

用户体验: 直观展示产品的用户体验设计
业务流程: 清晰呈现完整的业务逻辑
功能规划: 帮助产品经理规划功能优先级
团队协作: 统一团队对产品的理解

🤖 AI工具应用展示

Cursor工具claude-3.7模型 + AI提示词的强大组合

🎯 项目生成过程

需求描述: 通过提示词精确描述电影购票APP需求
AI理解: Cursor工具claude-3.7模型深度理解业务逻辑和用户流程
代码生成: 自动生成符合最佳实践的完整代码
优化迭代: 基于反馈快速调整和完善

💡 关键提示词策略

用户角色定位: 40年产品经理 + 30年UI设计师的经验
技术规范要求: iOS 16设计规范 + 现代化UI元素
功能完整性: 完整的购票流程 + 交互操作
展示优化: 高保真原型 + 商业演示需求

📋 电影购票APP生成提示词

🎯 电影购票APP生成提示词

text

电影院购票APP
我需要将上面的这个应用输出成高保真的原型图设计。请考虑以下内容:
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：创建原型页面

电影院购票APP
我需要将上面的这个应用输出成高保真的原型图设计。请考虑以下内容:
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：创建原型页面

💼 商业应用建议

🎯 售前团队使用指南

演示准备: 提前熟悉完整的用户流程
客户互动: 让客户亲自体验原型操作
功能讲解: 重点展示核心业务价值
定制说明: 强调可以根据客户需求快速定制

📊 产品经理应用场景

需求沟通: 用原型替代枯燥的文档说明
用户测试: 快速收集用户反馈和建议
功能验证: 在开发前验证产品逻辑
团队协作: 与设计师和开发者高效沟通

🔧 解决方案架构师价值

技术展示: 证明AI辅助开发的技术实力
方案演示: 快速构建PoC (概念验证)
客户教育: 展示现代化开发流程
竞争优势: 体现团队的创新能力

🎯 项目特色

完整的用户流程

🏠 首页浏览: 展示热门电影和推荐内容
🎬 电影详情: 详细的电影信息和评价
🏢 影院选择: 根据位置筛选影院
📅 场次选择: 查看时间表和票价信息
💺 座位选择: 交互式座位图选择
📋 订单确认: 订单详情和票务信息
💳 支付流程: 安全的支付界面
✅ 支付成功: 确认页面和票券展示
👤 个人中心: 用户信息和订单管理

技术实现亮点

响应式设计: 完美适配移动端设备
iOS设计规范: 严格遵循iOS 16设计标准
模块化开发: 清晰的代码结构和文件组织
无框架实现: 纯HTML+CSS+JavaScript构建
交互体验: 丰富的用户交互和动画效果

🖥️ 在线预览

📱 电影购票APP原型展示

📂 项目结构

电影购票APP/
├── index.html              # 主入口页面（原型展示）
├── home.html              # 应用首页
├── movie-detail.html      # 电影详情页
├── cinema-select.html     # 影院选择页
├── showtimes.html         # 场次选择页
├── seats.html             # 座位选择页
├── order-confirm.html     # 订单确认页
├── payment.html           # 支付页面
├── payment-success.html   # 支付成功页
├── profile.html           # 个人中心
├── my-orders.html         # 我的订单
├── styles.css             # 样式文件
└── 提示词.txt             # 项目需求文档

电影购票APP/
├── index.html              # 主入口页面（原型展示）
├── home.html              # 应用首页
├── movie-detail.html      # 电影详情页
├── cinema-select.html     # 影院选择页
├── showtimes.html         # 场次选择页
├── seats.html             # 座位选择页
├── order-confirm.html     # 订单确认页
├── payment.html           # 支付页面
├── payment-success.html   # 支付成功页
├── profile.html           # 个人中心
├── my-orders.html         # 我的订单
├── styles.css             # 样式文件
└── 提示词.txt             # 项目需求文档

🎨 设计特色

UI/UX设计

现代化界面: 采用最新的设计趋势和视觉元素
品牌一致性: 统一的色彩搭配和视觉风格
用户友好: 直观的操作流程和清晰的信息架构
视觉层次: 合理的信息层级和视觉引导

移动端优化

iPhone 13尺寸: 375×812像素完美适配
状态栏设计: 符合iOS设计规范
触控友好: 适合手指操作的按钮尺寸
滚动优化: 流畅的页面滚动体验

💻 技术栈

前端技术

HTML5: 语义化标签和现代Web标准
CSS3: Flexbox布局和CSS Grid
Tailwind CSS: 实用优先的CSS框架
JavaScript ES6+: 现代JavaScript特性
Font Awesome: 图标库

设计工具

Figma兼容: 可直接导入Figma进行二次编辑
原型展示: 集成式原型预览系统
响应式布局: 自适应不同屏幕尺寸

📚 学习目标

前端开发技能

HTML结构设计: 学习语义化HTML的最佳实践
CSS布局技术: 掌握Flexbox和Grid布局
响应式设计: 了解移动端适配的方法
JavaScript交互: 实现用户交互和动态效果
组件化思维: 模块化开发的设计模式

产品设计能力

用户体验设计: 理解完整的用户购票流程
界面设计规范: 学习iOS设计系统
信息架构: 合理的页面结构和导航设计
原型制作: 高保真原型的制作方法

项目管理经验

需求分析: 从用户需求到功能设计
技术选型: 合适的技术栈选择
代码组织: 清晰的项目结构
版本管理: 协作开发的最佳实践

🚀 快速开始

下载和运行

下载课件: 💾 下载完整课件
解压文件: 解压到本地目录
打开项目: 用浏览器打开index.html
开始学习: 查看完整的原型展示

学习建议

先看整体: 在线预览完整的用户流程
分析结构: 研究index.html的整体架构
深入页面: 逐个分析各个功能页面
代码学习: 学习HTML、CSS和JavaScript的实现
动手实践: 尝试修改和扩展功能

🛠️ 自定义和扩展

样式定制

修改styles.css中的颜色和字体
调整Tailwind CSS的配置
添加自定义动画效果

功能扩展

增加用户注册登录
添加评论和评分功能
集成真实的支付接口
连接后端API服务

设计优化

导入Figma进行视觉优化
添加更多交互动画
优化移动端体验
增加暗色模式支持

📖 相关资源

设计规范

开发工具

Figma - 设计工具
Unsplash - 免费图片素材
Font Awesome - 图标库

学习资源

MDN Web Docs - Web开发文档
CSS Tricks - CSS技巧和教程
JavaScript.info - JavaScript教程

🤝 贡献和反馈

如果您在使用过程中发现问题或有改进建议，欢迎微信向邱邱提出反馈。

开始您的移动端开发之旅吧！ 🚀

电影购票APP实战课件 ​

📱 项目概述 ​

🎯 商业应用价值 ​

🎪 售前演示利器 ​

📈 解决方案验证 ​

🚀 产品规划工具 ​

🤖 AI工具应用展示 ​

Cursor工具claude-3.7模型 + AI提示词的强大组合 ​

🎯 项目生成过程 ​

💡 关键提示词策略 ​

📋 电影购票APP生成提示词 ​

💼 商业应用建议 ​

🎯 售前团队使用指南 ​

📊 产品经理应用场景 ​

🔧 解决方案架构师价值 ​

🎯 项目特色 ​

完整的用户流程 ​

技术实现亮点 ​

🖥️ 在线预览 ​

📂 项目结构 ​

🎨 设计特色 ​

UI/UX设计 ​

移动端优化 ​

💻 技术栈 ​

前端技术 ​

设计工具 ​

📚 学习目标 ​

前端开发技能 ​

产品设计能力 ​

项目管理经验 ​

🚀 快速开始 ​

下载和运行 ​

学习建议 ​

🛠️ 自定义和扩展 ​

样式定制 ​

功能扩展 ​

设计优化 ​

📖 相关资源 ​

设计规范 ​

开发工具 ​

学习资源 ​

🤝 贡献和反馈 ​