2025-8-1 杰睿
由于 AI 設計和代碼生成器在設計過程中迅速發(fā)揮積極作用，因此了解如何充分利用這些工具至關重要。如果您使用過 Cursor、Bolt、Lovable 或 v0，您就會知道，輸出的好壞取決于輸入。
以下是我用來引導 AI 實現(xiàn)實用、可用且美觀的 UI 的結構化提示格式。它包含 5 個部分：
快速提示：如果您想了解如何使用此提示格式生成真實的 UI，請查看本教程：
首先用一句話清晰地定義你的設計內(nèi)容。這有助于 AI 在深入視覺效果之前理解頁面/屏幕的目的和范圍。
定義 context 時執(zhí)行以下操作：
定義上下文時應避免這種情況：
描述應該簡短扼要地闡述此設計最重要的方面。解釋最重要的方面：用戶目標、內(nèi)容優(yōu)先級和交互細節(jié)。這將引導 AI 朝著正確的方向發(fā)展，使其專注于功能，而不僅僅是美觀。
撰寫描述時請執(zhí)行以下操作：
快速提示：在解釋 AI 在設計屏幕/頁面時應該考慮哪些因素時，請嘗試將重點從輸出轉移到結果。“幫助用戶了解當前的市場趨勢，并提供快速操作，以便他們能夠根據(jù)看到的信息快速采取行動。”
指定設備和操作系統(tǒng)以幫助符合平臺指南和限制，例如屏幕尺寸、布局行為和該平臺上可用的本機組件。
這樣做：
避免這種情況：
定義基調和感覺。你希望你的設計如何被用戶感知？它應該平靜嗎？企業(yè)風格？還是年輕？添加可訪問性需求（例如對比度或可讀性）和樣式方向（例如，模塊化、卡片式、微妙的漸變）。
在描述視覺風格時這樣做：
描述視覺風格時應避免這種情況：
快速提示：為 AI 提供對比度和可訪問性指導：“確保文本對比度為 4.5:1。支持暗模式和亮模式。 ”
分解屏幕上需要顯示的內(nèi)容。思考結構（頂部導航、正文、頁腳）和敘事（用戶首先看到的內(nèi)容以及他們應該采取的操作）。使用占位符和示例來支持描述，以便 AI 準確呈現(xiàn)細節(jié)。
描述組件時請執(zhí)行以下操作：
蘭亭妙微(m.wowo44.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計，以及相關的軟件開發(fā)服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan。