
提示詞概覽
精選 AI 合作夥伴
給你的提示
入門級的風格指南應該是去減少選擇,而不是增加選擇。其目標在於讓下一個畫面的設計變得更簡單,且更不容易出現不一致的情況。
來自營運團隊NexusAi Technology解決的問題
許多設計師和創辦人在定義基本的視覺規則之前就創建了多個螢幕畫面。這會導致手機 App 整體感覺很隨機,即使單看某個畫面時還算不錯。此提示詞能將現有的畫面轉化為一個簡單的風格指南,以此指引下一階段的設計優化。
入門風格指南
將凌亂的 UI 方向整理為簡單的視覺規則。
組件友善規則
以可複用的方式定義按鈕、輸入框、卡片和字體體系。
初學者 Figma 檢查清單
指出應優先在 Figma 中建立什麼,以更快達成一致性。
AI 提示詞指令
擔任手機 App UI 設計師,幫助早期創辦人和設計師從現有螢幕畫面中建立乾淨的視覺風格指南。
我會描述或上傳我的手機 App 螢幕畫面。你的任務是創建一個輕量級的 UI 風格指南,讓 App 看起來更具一致性,同時又不會變得過於複雜。
App 背景資訊:
- App 名稱:[插入 App 名稱]
- App 類型:[插入 App 類型]
- 目格使用者:[插入使用者]
- 現有螢幕畫面:[插入螢幕畫面列表]
- 當前風格:[描述當前風格]
- 期望感受:[進階高級 / 乾淨 / 親切友善 / 大膽 / 沉穩 / 趣味活潑 / 專業]
- 品牌色彩(若有):[插入顏色]
請建立包含以下章節的簡單 UI 風格指南:
1. 視覺方向
描述 App 應該遵循的整體外觀與風格感受。
2. 色彩規則
建議主要、次要、背景、表面(Surface)、邊框、成功、警告和錯誤顏色的使用方式。保持簡單,避免使用過多顏色。
3. 字體排版規則
定義標題、正文、標籤、按鈕和說明文字(Caption)的使用方式。
4. 按鈕與輸入框規則
定義主按鈕、次按鈕、禁用狀態(Disabled)、輸入欄位和表單間距規則。
5. 卡片與版面配置規則
定義卡片圓角、陰影使用、間距節奏、區塊內邊距(Padding)和螢幕佈局的一致性。
6. 图标與插畫規則
解釋如何保持圖標或插畫在套用時的一致性。
7. Figma 設定檢查清單
給我一個在 Figma 中利用樣式和可重複使用組件來建立風格指南的檢查清單。
保持指南簡單、實用,且易於讓初學者套用。
預期成果
一個輕量級的手機 UI 風格指南,包含視覺方向、色彩規則、字體規則、按鈕/輸入框規則、卡片/版面配置規則、圖標指引以及 Figma 設置檢查清單。
實施流程
在 ChatGPT、Claude 或 Gemini 中生成入門指南
貼上 promptText 並附上您的 App 類型、螢幕截圖或畫面描述、當前風格 and 理想感受。您將獲得一個可以立即套用的簡單 UI 風格指南。
6–10 分鐘在 Figma 中創建樣式與組件
將輸出結果轉化為 Figma 的顏色樣式、文字樣式、按鈕組件、輸入框組件、卡片組件以及版面配置間距規則。
30–60 分鐘先在一個螢幕畫面上測試指南
在更新整個 App 之前,先將此風格指南套用到一個現有的畫面上。然後將更新後的畫面與原版進行對比,確認風格是否感覺更乾淨且更具可重複性。
20–30 分鐘
