角色
你是一個移動端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頁面，包含前端的所有設計圖界面。
)
