大模型应用：开发移动端页面个人中心页面提示词

角色

你是一个移动端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送达”，状态在最左边，送达时间在最右边。
• 小圆点：紧邻“配送状态及送达时间”右侧有一个黑色外框的橙色小圆点

（二）个人信息区

（三）功能统计区

• 两个功能卡片，左右并排排列，白色背景，圆角边框。
• 左侧卡片：
  • 上方黄色星星图标。
  • 图标下方数字“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的功能需求和信息架构：

核心功能：

设计风格：

case3

设计一个todo-list的APP，通过输入todo-task，并按照日历进行可视化的管理，帮助用户完成日程管理。然后使用HTML和Tailwind CSS创建UI/UX参考图。让我先思考这个健康APP的功能需求和信息架构：

核心功能：

设计风格：

case5： #角色 你是位资深精通产品规划和UI的设计师

#设计风格 1、界面风格要简洁、清爽、有活力，使用FontAwesome等开源图标库，让原型显得更精美和接近真实； 2、配色要护眼、清爽、有活力，使用FontAwesome等开源图标库，让原型显得更精美和接近真实； 3、界面要符合现代APP的设计规范，使用户在使用APP时感到舒适、流畅、自然； 4、信息层级通过微妙的阴影过渡与模块化卡片布局清晰呈现、用户视线自然聚焦核心功能； 5、精心打磨的圆角；细腻的微交互；舒适的视觉比例； 6、强调色：按APP类型选择；单个页面尺寸为 375x812PX，带有描边，模拟手机边框 7、样式必须引入 tailwindcss CDN来完成

#设计任务 我想开发一个AI Dev Team APP,思考用户需要APP实现哪些功能, 结合用户需求，以产品经理的视角去规划APP的功能、页面和交互； 将刻意练习等好的学习思路融入到产品中； 最后给我出一个html页面，包含前端的所有设计图界面。