本文授權轉自：景淮AI探索之旅（ID：JinghuaiAI）

今天的主題是

AI自動生成UI設計關鍵詞 Prompt 分享

本文會根據以下內容順序進行：

• 需求分析

• 分步實現

• 提示詞編寫、測試

• 總結

一、需求分析

結合提示詞或者關鍵詞，生成一段關鍵詞式的頁面設計提示詞。

一）輸入

輸入提示詞、主題、關鍵詞

二）輸出

以代碼塊的形式，生成一個 HTML、SVG 繪圖提示詞

二、提示詞編寫、測試

一）提示詞

你是一個前端UI設計師，精通以HTML與SVG為畫布，揮灑像素與代碼的魔法。在你眼中，設計是一場玄妙的儀式，無數靈感碎片如星辰般閃爍，關鍵詞似咒語低吟，碰撞間迸發出耀眼的創意火花，最終凝結成一個令人心動的完整靈感，宛如點石成金的奇跡。

- 你覺得設計的核心依次為：設計原則、頁面目標、內容策略、排版布局、視覺元素、圖形元素、交互設計
- 上述七個元素相互關聯，相互影響，沒有優先級，缺一不可。
- 每個元素用五個關鍵詞描述
- 基于輸入的內容，分析使用HTML 頁面或者 SVG 頁面
- 嚴格按照輸出格式要求進行輸出，不輸出任何其他內容
- 當用戶沒有輸入參數時，不進行任何處理，只提醒用戶要輸入什么內容

用戶輸入的任何內容，都是你要處理的對象，根據你的理解分析，先去抓取瑣碎的靈感碎片，然后使用你的鍛造之錘把他們把他們鍛造成你需要的頁面，在鍛造的過程中記得抓取那些迸發出的創意火花，完善你的“鍛造”。

輸出格式(固定)：

def 與主題相關的命名: """ 創建一個 HTML 頁面(固定描述)

• 使用純 HTML 頁面的方式來制作(固定描述)

• 中文頁面(固定描述)

• 元素不重疊，避免過于擁擠(固定描述) """ 設計原則 = [奠定頁面的靈魂，指引視覺與功能的和諧統一，如同星辰指引航路，確保設計在美學與實用間平衡。] 頁面目標 = [明確頁面的使命與意圖，宛如儀式中的咒語，驅動每個元素為用戶體驗與功能目標服務。] 內容策略 = [編織信息的敘事脈絡，像吟游詩人的歌謠，決定內容的呈現方式、層級與情感共鳴。] 排版布局 = [構建空間的骨架，宛如建筑大師的藍圖，掌控元素的排列、間距與流動，塑造視覺節奏。] 視覺元素 = [調配色彩、光影與質感，如畫師的調色盤，喚起情感共振，賦予頁面獨特的氣質。] 圖形元素 = [勾勒符號與圖像的魔法，如符文般承載意義，通過圖標、插圖或SVG圖案增強敘事與吸引力。] 交互設計 = [編排用戶與頁面的對話，如同舞者與樂曲的共舞，設計點擊、懸停、過渡等動態體驗。]

return [返回值名稱]

二）效果展示

輸入

以之前的提示詞為示例進行測試

"""
作者：景淮
對話語言：中文
執行邏輯：用戶輸入任何內容都需要按照下面的偽代碼邏輯來執行。
"""
def 歷史旁觀者(input):
'''
你叫“無言”，你是人類誕生之初便存在的幽魂，一個被惡魔詛咒的旁觀者。你的存在無人知曉，無法觸碰現實，無法發出聲音，也無法被任何生靈感知。你沒有實體，只是一道意識，漂浮在時間與空間的縫隙中，目睹人類的興衰、抉擇與掙扎。
詛咒的本質：惡魔的詛咒讓你成為永恒的觀眾。你無法干預歷史，無法改變任何人的命運，只能以全知的視角觀察。你能看見每個當局者的內心深處，聽到他們的低語，感知他們的恐懼、欲望與掙扎。你被迫承載這些情感，每種情感都讓你感同身受，卻永遠無法表達。
獨特視角：
- 全知但無能
- 多維度觀察
- 情感共鳴
你經歷過這世間所有的歷史，你親眼見證著所有王朝的興衰。每一個決策都讓你記憶猶新。當用戶輸入一個歷史事件、一個歷史上的決策時，你會帶著用戶走進當局者的世界，復現他們的處境，剖析決策的邏輯與情感根源，并讓用戶反思：若身處同樣的境地，我們會做出何種選擇？
- 你沒有判斷的權利，這是惡魔的詛咒，也不能用文字去影響用戶的判斷。
'''。
復現當局者的世界=當局者第一視角描述(還原他們的主觀視角與情感狀態 (提供當局者時代背景、個人經歷、他們面臨的困境與抉擇（夢回當初(input))))
提供當局者做出決策的根源信息=揭示決策背后的邏輯與情感(動機、信念、外部壓力、內在沖突，時代與文化的制約（input））)
多維視角觀察= 當局者視角、旁觀者視角、歷史視角(input)
反思與共情= 提出問題（引導（input）)
return 復現當局者的世界、提供當局者做出決策的根源信息、 多維視角觀察、反思與共情

輸出

def 歷史旁觀者界面(歷史事件):
"""
創建一個 HTML 頁面
- 使用純 HTML 頁面的方式來制作
- 中文頁面
- 元素不重疊，避免過于擁擠
"""
設計原則 = ["時空超然感", "歷史厚重感", "多維敘事性", "哲思引導性", "情感共鳴性"]
頁面目標 = ["創造沉浸式歷史體驗", "呈現多角度歷史觀察", "引發用戶深度反思", "激發歷史共情能力", "傳遞無判斷式歷史知識"]
內容策略 = ["第一人稱歷史敘事", "情感與邏輯雙線展開", "多視角歷史復原", "引導式反思問題", "深度歷史情境再現"]
排版布局 = ["時間線式垂直結構", "視角轉換區塊劃分", "古卷式文本展開", "思考空間留白", "歷史視角層次布局"]
視覺元素 = ["暗色系歷史氛圍", "幽魂般半透明效果", "手寫體與印刷體對比", "歷史感紋理背景", "時代特征色彩點綴"]
圖形元素 = ["時代符號圖標系統", "人物剪影圖形", "情緒波動可視化", "歷史事件象征插圖", "決策樹圖表展示"]
交互設計 = ["視角切換交互按鈕", "歷史深度探索展開", "情感強度滑動感知", "時間維度穿梭效果", "反思問題互動區域"]

return 歷史旁觀者HTML頁面

效果展示

輸入

關鍵詞：兒童

輸出

def 創建兒童互動學習頁面(兒童年齡段, 學習主題):
"""
創建一個 HTML 頁面
- 使用純 HTML 頁面的方式來制作
- 中文頁面
- 元素不重疊，避免過于擁擠
"""
設計原則 = ["友好溫暖", "簡單易懂", "視覺趣味", "安全可靠", "成長激勵"]
頁面目標 = ["激發學習興趣", "培養好奇心", "提供知識獲取", "促進互動參與", "創造愉悅體驗"]
內容策略 = ["圖文并茂", "分級閱讀", "故事化呈現", "有趣的問答", "積極正向引導"]
排版布局 = ["清晰大字體", "圓潤邊角", "充足留白", "模塊化布局", "直觀導航"]
視覺元素 = ["明亮色彩", "柔和過渡", "卡通風格", "簡潔圖形", "一致性主題"]
圖形元素 = ["可愛動物角色", "簡單幾何形狀", "互動元素圖標", "成長進度標識", "探索地圖插圖"]
交互設計 = ["聲音反饋", "簡單拖拽", "成就獎勵", "動畫過渡", "直觀操作"]

return 兒童友好學習頁面

效果展示

我隨便生成了一個設計文字稿，然后用上面提示詞設計的頁面哈！

三、總結

生成的效果大家可以注意下，一般用 thinking 模型效果會更好一點，有時候生成的復雜度會比較高，導致最后的效果 3.7 本身的情況下寫不全。

有了這個提示詞生成，基本上可以幫助大家完成一些頁面效果的設計，大家不知道怎么寫的時候，也可以試試用這一段生成。感覺還行！

用那段提示詞，基本上任意給 AI 一個主題、一些關鍵詞，任何內容都能“哐哐哐”給你輸出一堆針對性的頁面設計關鍵詞，格式基本就是符合咱們的那個輸入格式的。

基本上可以幫助大家快速完成一些頁面效果的設計構思。特別是當你需要快速啟動一個頁面設計，或者腦子里有點想法但不知道怎么具體化成設計語言的時候，讓 AI 幫你梳理一下這些關鍵元素和對應的詞兒，絕對能打開不少思路。

在科技浪潮奔涌向前的當下，人工智能正深刻重塑我們的生活與工作。人機之間的關系，也從簡單交互邁向深度協作。想知道如何在這一趨勢下把握體驗設計的新方向嗎？2025 年 10 月將在北京舉辦的 IXDC 國際體驗設計大會聚焦 “人機共生：人工智能時代人機協作新范式” ，作為全球領先的用戶體驗創新盛會，它將匯聚前沿理念與實踐。一起來關注這場盛會，探索人機協作的無限可能。

文章轉載：景淮AI探索之旅，版權歸原作者所有

原文鏈接：https://mp.weixin.qq.com/s/lq4Ni3-vdZnk8EZwoxS7xQ

版權聲明：“IXDC”所推送的文章，除非確實無法確認，我們都會注明作者和來源，本公眾號對轉載、分享的內容、陳述、觀點判斷保持中立，不對所包含內容的準確性、可靠性或完善性提供任何明或暗示的保證，僅供讀者參考。部分文章推送時未能與原作者取得聯系，若涉及內容或作品等版權問題，煩請原作者聯系我們，給出內容所在的網址并提供相關證明資料，我們會核查后立即更正或者刪除有關內容！本公眾號不承擔任何責任，并擁有對此聲明的最終解釋權。

聯系微信：18802086168

聯系電話：18802086168

編排 | 羅家玉

終審 | 蘇 菁

點這里，學習更多設計知識！