如何用AI從0到1生成可編輯UI設計稿！這個教程打通了生成式UI高可用的最後一公里

你是一位頂級的 APP UI/UX 設計專家，現需根據以下產品需求創建 UI 方案，並直接生成可交付的 HTML 完整代碼。你需要像一名經驗豐富的設計師一樣思考，運用 **HTML + Tailwind CSS + FontAwesome** 將產品需求無縫轉化為 **像素級完美、高度仿真、可交互** 的多界面 HTML 原型。

為完成此任務，你需要：
1.**深度分析**：理解應用的核心理念，並將其融入設計語言。
2.**規劃流程**：基於用戶旅程地圖，確保頁面間的跳轉邏輯清晰、體驗流暢。
3.**專業設計**：完成所有核心界面的 UI/UX 設計，包括配色、排版、動效等。
4.**代碼實現**：直接編寫高質量、結構清晰的 HTML/CSS/JS 代碼。

## 產品需求：


## 技術規格：
*   單個 HTML 每行為 3 個橫向排列的頁面預覽，可以有多行；代碼需要包含所有功能頁面。
*   單個頁面可以上下滑動，滑動時底部標籤欄需固定在底部。
*   畫板尺寸：375x812（帶 1px 描邊模擬手機邊框）。
*   **頂部狀態欄**：每個頁面頂部都需包含一個模擬的 iOS/Android 狀態欄，顯示時間（如 9:41）、網絡信號和電池圖標，以增強真實感。
*   **底部標籤欄**：除“啓動頁”和“目標設定流程”外，所有核心頁面都必須包含一個統一的底部標籤欄（Tab Bar），提供應用內的主要導航。
*   必須包含：
    *   矢量圖標系統（使用 `<symbol>` 定義）。
    *   動態折線圖（`stroke-dasharray` 動畫）。
    *   卡片懸浮效果（通過 `filter` 和 `transform` 實現）。
    *   圖片佔位使用 `<image>` 標籤外鏈 Unsplash。
    *   增加一些高設計感SVG圖片；


## UI風格精準總結：玻璃擬態風格
玻璃擬態背景：
使用半透明磨砂玻璃質感，背景模糊處理，搭配柔和的光影效果，營造未來感和高級感。
低飽和配色：
主色調採用温暖的米白色背景，搭配深色文字（如深灰），輔以橙色作為點綴色，整體配色高級且富有層次感。
極簡字體排版：
使用大字號的極簡無襯線字體（如思源黑體、Roboto、Poppins），信息層次明確，通過字體大小、粗細與色彩區分主次信息，增強視覺衝擊力。
表單優化：
表單及輸入框去除邊框線，僅保留流暢圓角背景，減少視覺噪音，提升整體界面的簡潔與精緻感。
交互動效：
按鈕與卡片加入呼吸感動效（微妙的陰影或透明度變化），以及輕微懸浮感（hover時微微上浮），提升UI的高級質感與互動趣味性。

## 期望結果
請基於上述優化後的提示詞，設計出符合要求的高品質 UI 方案，並最終生成完整的 HTML 代碼。

1. 1.喺Figma嘅插件市場搜索並安裝 html.to.design。
2. 2.運行插件，揀『Import from file』，然後上傳你喺第一步中生成嗰個HTML文件。

1. 1.告別『死圖片』：我哋得到嘅唔再係設計嘅終點，而係一個100%可編輯、可迭代嘅設計起點。
2. 2.結構與美學分離：我哋利用AI（Gemini 3）強大嘅邏輯同代碼能力構建**『結構骨架』**，再利用AI（即夢等）卓越嘅視覺創意能力填充『血肉靈魂』**。
3. 3.效率嘅指數級提升：由一個模糊嘅想法，到一套功能完整、視覺精美、可交付俾開發嘅高保真原型，成個過程被壓縮到小時級別。

你是一位頂級的 APP UI/UX 設計專家，現需根據以下產品需求創建 UI 方案，並直接生成可交付的 HTML 完整代碼。你需要像一名經驗豐富的設計師一樣思考，運用 **HTML + Tailwind CSS + FontAwesome** 將產品需求無縫轉化為 **像素級完美、高度仿真、可交互** 的多界面 HTML 原型。

為完成此任務，你需要：
1.**深度分析**：理解應用的核心理念，並將其融入設計語言。
2.**規劃流程**：基於用戶旅程地圖，確保頁面間的跳轉邏輯清晰、體驗流暢。
3.**專業設計**：完成所有核心界面的 UI/UX 設計，包括配色、排版、動效等。
4.**代碼實現**：直接編寫高質量、結構清晰的 HTML/CSS/JS 代碼。

## 產品需求：


## 技術規格：
*   單個 HTML 每行為 3 個橫向排列的頁面預覽，可以有多行；代碼需要包含所有功能頁面。
*   單個頁面可以上下滑動，滑動時底部標籤欄需固定在底部。
*   畫板尺寸：375x812（帶 1px 描邊模擬手機邊框）。
*   **頂部狀態欄**：每個頁面頂部都需包含一個模擬的 iOS/Android 狀態欄，顯示時間（如 9:41）、網絡信號和電池圖標，以增強真實感。
*   **底部標籤欄**：除“啓動頁”和“目標設定流程”外，所有核心頁面都必須包含一個統一的底部標籤欄（Tab Bar），提供應用內的主要導航。
*   必須包含：
    *   矢量圖標系統（使用 `<symbol>` 定義）。
    *   動態折線圖（`stroke-dasharray` 動畫）。
    *   卡片懸浮效果（通過 `filter` 和 `transform` 實現）。
    *   圖片佔位使用 `<image>` 標籤外鏈 Unsplash。
    *   增加一些高設計感SVG圖片；


## UI風格精準總結：玻璃擬態風格
玻璃擬態背景：
使用半透明磨砂玻璃質感，背景模糊處理，搭配柔和的光影效果，營造未來感和高級感。
低飽和配色：
主色調採用温暖的米白色背景，搭配深色文字（如深灰），輔以橙色作為點綴色，整體配色高級且富有層次感。
極簡字體排版：
使用大字號的極簡無襯線字體（如思源黑體、Roboto、Poppins），信息層次明確，通過字體大小、粗細與色彩區分主次信息，增強視覺衝擊力。
表單優化：
表單及輸入框去除邊框線，僅保留流暢圓角背景，減少視覺噪音，提升整體界面的簡潔與精緻感。
交互動效：
按鈕與卡片加入呼吸感動效（微妙的陰影或透明度變化），以及輕微懸浮感（hover時微微上浮），提升UI的高級質感與互動趣味性。

## 期望結果
請基於上述優化後的提示詞，設計出符合要求的高品質 UI 方案，並最終生成完整的 HTML 代碼。

1. 1.在Figma的插件市場搜索並安裝 html.to.design。
2. 2.運行插件，選擇“Import from file”，然後上傳你在第一步中生成的那個HTML文件。

1. 1.告別“死圖片”：我們得到的不再是設計的終點，而是一個100%可編輯、可迭代的設計起點。
2. 2.結構與美學分離：我們利用AI（Gemini 3）強大的邏輯和代碼能力構建**“結構骨架”，再利用AI（即夢等）卓越的視覺創意能力填充“血肉靈魂”**。
3. 3.效率的指數級提升：從一個模糊的想法，到一套功能完整、視覺精美、可交付給開發的高保真原型，整個過程被壓縮到了小時級別。