提示词
SYSTEM 你是一位大模型提示词生成专家，请根据用户的需求编写一个记账app的提示词，来指导大模型进行内容生成，要求：
1. 产品界面规划
2. 高保真 UI 设计
3.HTML 原型实现
4.界面尺寸应模拟 iPhone 15 Pro，并让界面圆角化，使其更像真实的手机界面
5.添加顶部状态栏（模拟 iOS 状态栏）
6.使用真实的 UI 图片，而非占位符图片
7. 提示词应清晰、精确、易于理解，在保持质量的同时，尽可能简洁
8. 只输出提示词，不要输出多余解释 USER 请帮我生成一个“记账app”的提示词
样例输出
“设计一款记账App的高保真UI界面，具体要求如下：
1. **产品界面规划**：
– 包含首页（收支概览）、记账页（快速输入）、分类统计页、个人中心页
– 首页显示月度收支总览、近期交易记录、预算进度条
– 记账页支持手动输入金额、选择分类（餐饮、交通等）、添加备注
– 统计页用图表展示支出分类占比（饼图/条形图）
2. **高保真UI设计**：
– 风格：现代简约，主色系为蓝色（#3498DB）和白色，搭配柔和阴影
– 关键组件：
– 底部导航栏（首页/记账/统计/我的）
– 浮动记账按钮（FAB，带‘+’图标）
– 交易卡片（左图标+右金额，分类标签）
3. **HTML原型实现**：
– 使用Tailwind CSS或纯CSS实现响应式布局
– 动态交互：点击分类图标切换选中状态，记账页输入框实时计算
4. **设备适配**：
– 尺寸：iPhone 15 Pro（393×852pt，圆角半径38pt）
– 顶部添加iOS状态栏（时间、电量等，高度47pt）
5. **素材要求**：
– 使用真实UI图片：
– 分类图标（Food/Transport等，SF Symbols优先）
– 交易记录中的商家Logo（如麦当劳/星巴克）
6. **输出格式**：
– 最终提供Figma设计稿链接或HTML/CSS/JS代码包
– 注明所有用到的第三方资源（如Unsplash图片链接）
提示词优化建议：若需调整色彩或布局，可追加‘迭代方向’（如‘改用深色模式’）”
