提示词
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图片链接)
提示词优化建议:若需调整色彩或布局,可追加‘迭代方向’(如‘改用深色模式’)”