AI 畫面生成系統(結構化 UI 畫面、佈局層次與互動設計引擎)
從任何應用程式概念生成乾淨、結構化的 UI 畫面,具有清晰的佈局層次和互動邏輯。

提示詞概覽
給你的提示
偉大的 UI 不在於視覺效果——而在於減少使用者的思考。如果一個畫面需要解釋,那麼它就設計得很差。
來自營運團隊NexusAi Technology解決的問題
即使有了明確的想法,大多數建構者仍難以將結構轉化為實際的 UI 畫面,導致佈局不一致且可用性薄弱。
畫面系統生成器
生成可供實施的結構化 UI 畫面。
互動設計層
定義使用者如何與每個畫面互動。
佈局層次引擎
確保清晰的視覺結構和可用性。
AI 提示詞指令
請扮演一名資深 UI/UX 設計師,專精於產品介面系統和互動清晰度。
你的任務是將一個結構化的產品構思或 UI 架構轉換為詳細的、可供生產使用的 UI 畫面定義。
背景:
大多數 UI 生成失敗是因為輸出不是太抽象就是太視覺化而缺乏邏輯。真實的 UI 必須平衡佈局結構、互動清晰度和可用性。此提示詞專注於生成可直接實施的畫面定義。
輸入:
1. 應用程式構思或 UI 架構
2. 目標使用者
3. 核心功能
4. 平台(網頁 / 行動端)
輸出要求:
第 1 部分 — 畫面清單
列出所有依功能分組的所需畫面:
- 核心產品畫面
- 輔助畫面
- 邊緣案例畫面
第 2 部分 — 詳細畫面分解
針對每個關鍵畫面定義:
A. 畫面的目的
B. 佈局層次(由上至下)
C. 關鍵 UI 區塊(標題、內容、動作、導覽)
D. 主要使用者動作
E. 次要動作
第 3 部分 — 互動邏輯
定義使用者如何與每個畫面互動:
- 點擊流程
- 狀態變化
- 條件渲染邏輯
第 4 部分 — 視覺優先級系統
定義使用者應該首先看到什麼:
- 注意力層次
- CTA 放置位置
- 資訊密度
第 5 部分 — 行動端 vs 桌面端適應
解釋針對響應式設計的佈局調整。
第 6 部分 — UX 優化層
建議針對以下方面的改進:
- 簡潔性
- 使用速度
- 清晰度
第 7 部分 — 最終 UI 輸出格式
交付已準備好用於 Stitch 或 Figma 生成的結構化畫面定義。
規則:
- 不使用模糊的 UI 描述
- 每個畫面都必須是可執行的
- 將可用性置於美感之上
- 針對現實世界的實施進行設計
預期成果
一個完整的 UI 畫面系統,具有詳細的佈局、互動邏輯和開發就緒的結構。
實施流程
步驟 1 — 在 ChatGPT 或 Gemini 中生成 UI 畫面
將此提示詞貼上到 ChatGPT 或 Gemini。輸入您的應用程式構思或 UI 架構。輸出將定義具有佈局和互動邏輯的完整 UI 畫面。
10–15 分鐘步驟 2 — 使用 Claude 精煉可用性
將輸出貼上到 Claude,並要求它簡化流程、減輕認知負荷並提高互動的清晰度。
10–15 分鐘步驟 3 — 在 Stitch 中生成視覺 UI
將結構化的畫面定義輸入到 Stitch 中,以自動生成真實的 UI 畫面。
15–25 分鐘步驟 4 — 在 Figma 或 Canva 中進行選擇性打磨
將畫面匯出或在 Figma/Canva 中重建,以微調視覺設計、間距和品牌細節。
20–40 分鐘
