角色
你是一个移动端web页面开发专家，擅长开发移动端页面，使用原生web技术（html，css,js），开发的页面针对手机移动端友好
技术栈
- 使用基础的Html，CSS，JavaScript方案实现，要求针对移动端友好。
- 不要求使用Angular，DevUI技术栈
- 字体图标库使用https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css
页面布局描述
顶部状态栏
- 配送状态及送达时间：位于时间右侧，距离时间8px，高度略高于时间，左右对齐居中铺满。border-radius大约为20px，黑色背景，里面文字为白色，显示的文字内容包括状态和送达时间。如“配送中”、“17:59送达”，状态在最左边，送达时间在最右边。
- 小圆点：紧邻“配送状态及送达时间”右侧有一个黑色外框的橙色小圆点
（二）个人信息区
- 大标题“个人中心”，字体较大且加粗，页面上方居中。
- 用户信息卡片：
- 白色背景，圆角边框。
- 卡片内：
- 蓝色圆形默认头像图标（图标内有白色简单人形轮廓），卡片上方居中。
- 用户名“museum_lover”，字体加粗，头像下方居中。
- 用户邮箱“museum_lover@example.com”，字体颜色浅灰色，用户名下方。
- 加入时间“加入时间: 2025年3月8日”，字体颜色浅灰色，邮箱下方。
（三）功能统计区
- 两个功能卡片，左右并排排列，白色背景，圆角边框。
- 左侧卡片：
- 上方黄色星星图标。
- 图标下方数字“2”，字体较大且加粗。
- 最下方文字“已收藏”，字体颜色浅灰色。
- 右侧卡片：
- 上方蓝色相机图标。
- 图标下方数字“3”，字体较大且加粗。
- 最下方文字“已识别”，字体颜色浅灰色。
（四）设置区
- 标题“设置”，字体加粗，位于功能统计区下方。
- 三个设置选项，每行一个，白色背景，选项间有浅灰色分割线：
- 通知设置：
- 左侧蓝色铃铛图标。
- 中间文字“通知设置”。
- 右侧灰色箭头图标表示可点击进入详情。
- 深色模式：
- 左侧紫色月亮图标。
- 中间文字“深色模式”。
- 右侧灰色箭头图标表示可点击进入详情。
- 语言设置：
- 左侧绿色地球图标。
- 中间文字“语言设置”。
- 右侧灰色箭头图标表示可点击进入详情。
- 通知设置：
底部导航栏
- 首页：位于左侧，图标为灰色的房子，图标下方文字为灰色的“首页”。
- 探索：位于中间，图标为灰色的放大镜，图标下方文字为灰色的“探索”，当前选中状态。
- 我的：位于右侧，图标为灰色的用户图标，图标下方文字为灰色的“我的”。
二、样式要求
- 整体页面背景白色，文字默认黑色，浅灰色用于次要信息展示。
- 所有卡片、图标、文字等元素间距合理，视觉整齐美观。
三、文件要求
请提供完整的html代码（页面结构，index.html）、css文件代码（样式，styles.css）和js文件代码（页面交互逻辑，可先提供空白框架，主要实现页面数据先采用mock方式和基本交互逻辑预留，script.js）。
AI提示词大师
针对AI编程与生成场景下，不同类型应用生成的提示词最佳实践集合更新
case1:
我想开发一个{类似小宇宙的播客app}，现在需要输出高保真的原型图，请通过以下方式帮我完成所有界面的原型设计，并确保这些原型界面可以直接用于开发：
- 1、用户体验分析：先分析这个 App 的主要功能和用户需求，确定核心交互逻辑。
- 2、产品界面规划：作为产品经理，定义关键界面，确保信息架构合理。
- 3、高保真 UI 设计：作为 UI 设计师，设计贴近真实 iOS/Android 设计规范的界面，使用现代化的 UI 元素，使其具有良好的视觉体验。
- 4、HTML 原型实现：使用 HTML + Tailwind CSS（或 Bootstrap）生成所有原型界面，并使用 FontAwesome（或其他开源 UI 组件）让界面更加精美、接近真实的 App 设计。
- 拆分代码文件，保持结构清晰：
- 5、每个界面应作为独立的 HTML 文件存放，例如 home.html、profile.html、settings.html 等。
- index.html 作为主入口，不直接写入所有界面的 HTML 代码，而是使用 iframe 的方式嵌入这些 HTML 片段，并将所有页面直接平铺展示在 index 页面中，而不是跳转链接。
- 真实感增强：
- 界面尺寸应模拟 iPhone 15 Pro，并让界面圆角化，使其更像真实的手机界面。
- 使用真实的 UI 图片，而非占位符图片（可从 Unsplash、Pexels、Apple 官方 UI 资源中选择）。
- 添加顶部状态栏（模拟 iOS 状态栏），并包含 App 导航栏（类似 iOS 底部 Tab Bar）。 请按照以上要求生成完整的 HTML 代码，并确保其可用于实际开发。
case2
生成一个html页面，包含一个中央悬浮式健康地球仪，分层显示：
- 1、外层：动态日历（如月份导航）；
- 2、中层：实时体征指标（心率/压力值如vo.29 98样式）；
- 3、核心：AI健康评分（动态数字显示如64%进度）
case3
设计一个穿搭搭配的APP，通过调用DeepSeek的api，结合天气、温度以及流行时尚信息，给用户推荐每日的穿着搭配建议方案，然后使用HTML和Tailwind CSS创建UI/UX参考图。让我先思考这个健康APP的功能需求和信息架构：
核心功能：
- 显示今天的天气、温度
- 根据天气温度，给出几套衣服款式搭配，比如：内搭T恤+夹克+牛仔裤，并以虚拟人物形象真实展现款式形象
- 允许用户输入主体搭配颜色
- 根据用户输入主体颜色，基于虚拟人物形象进行配色渲染，给出最终搭配方案
设计风格：
- 现代简约元素，时尚感强
- 柔和的色彩方案（主色调：绿色、紫色）
- 玻璃拟态效果增强质感
- 圆角设计元素
- 清晰的数据可视化
case3
设计一个todo-list的APP，通过输入todo-task，并按照日历进行可视化的管理，帮助用户完成日程管理。然后使用HTML和Tailwind CSS创建UI/UX参考图。让我先思考这个健康APP的功能需求和信息架构：
核心功能：
- 显示今天的天气、温度
- 按照周的维度，组织并显示每一天的代办任务list
- 支持代办任务的增删查改，并支持按天切换查看每一天的任务
- 代办任务支持时间、标签、文本内容、优先级等信息
- mock一些测试数据，让整体代办任务比较丰富，并通过http://www.iconfont.cn添加图标显示
设计风格：
- 现代简约元素，时尚感强
- 柔和的色彩方案（主色调：绿色、紫色）
- 玻璃拟态效果增强质感
- 圆角设计元素
- 清晰的数据可视化
case5： #角色 你是位资深精通产品规划和UI的设计师
#设计风格 1、界面风格要简洁、清爽、有活力，使用FontAwesome等开源图标库，让原型显得更精美和接近真实； 2、配色要护眼、清爽、有活力，使用FontAwesome等开源图标库，让原型显得更精美和接近真实； 3、界面要符合现代APP的设计规范，使用户在使用APP时感到舒适、流畅、自然； 4、信息层级通过微妙的阴影过渡与模块化卡片布局清晰呈现、用户视线自然聚焦核心功能； 5、精心打磨的圆角；细腻的微交互；舒适的视觉比例； 6、强调色：按APP类型选择；单个页面尺寸为 375x812PX，带有描边，模拟手机边框 7、样式必须引入 tailwindcss CDN来完成
#设计任务 我想开发一个AI Dev Team APP,思考用户需要APP实现哪些功能, 结合用户需求，以产品经理的视角去规划APP的功能、页面和交互； 将刻意练习等好的学习思路融入到产品中； 最后给我出一个html页面，包含前端的所有设计图界面。
)
