AI × UI/UX DESIGN GUIDE / EXPANDED EDITION

不要只說「做漂亮一點

把抽象的設計感覺,翻譯成 AI 真正能執行的介面指令。

比較 36 種真正不同的視覺系統,用六個維度精準篩選,並將選擇組成一段完整且可複製的網頁設計 prompt。

36STYLE SYSTEMS
06FILTER DIMENSIONS
04COMPARE SLOTS
01 / STYLE LIBRARY — 36 SYSTEMS

風格不是換色,
是整套設計行為。

每個預覽都會改變版面結構、字體比例、元件形狀、資訊密度與動效語言。選一張卡片查看完整 prompt,或加入比較列。

顯示 36 / 36 種風格

CLARITY84↗ 12%
search_

北歐極簡

Scandinavian Minimal

留白充足、低彩度與精準層級,讓內容自然成為畫面主角。

當代寬鬆圓潤
CLARITY84↗ 12%
search_

暖調編輯

Warm Editorial

像一本精心編排的獨立雜誌,帶有紙張質感與人文溫度。

當代適中銳利
CLARITY84↗ 12%
search_

柔光科技

Soft Tech

清澈藍紫冷光與柔和玻璃層次,科技感但不冰冷。

未來適中圓潤
CLARITY84↗ 12%
search_

新粗獷主義

Neo Brutalism

大膽色塊、粗框與直接的視覺語言,個性鮮明且充滿能量。

當代適中銳利
CLARITY84↗ 12%
search_

日式侘寂

Japanese Wabi-sabi

安靜、自然、留有呼吸感,以細微的不完美創造真實質地。

跨時代寬鬆有機
CLARITY84↗ 12%
search_

模組便當盒

Bento Grid

將複雜資訊拆成大小不一的清晰模組,兼顧故事與掃讀效率。

當代適中圓潤
CLARITY84↗ 12%
search_

暗黑奢華

Dark Luxury

深色層次、香檳金與精緻字級,呈現沉穩而克制的高級感。

跨時代寬鬆銳利
CLARITY84↗ 12%
search_

友善玩味

Playful Friendly

圓潤造型與明快回饋降低操作壓力,親切但不幼稚。

當代適中圓潤
CLARITY84↗ 12%
search_

瑞士網格

Swiss Grid

嚴謹網格、醒目字級與黑白對比,讓訊息快速而有權威感。

現代主義緊湊銳利
CLARITY84↗ 12%
search_

玻璃景深

Glass Depth

透過透明度與模糊建立空間景深,適合沉浸式數位產品。

未來適中圓潤
CLARITY84↗ 12%
search_

復古數位

Retro Digital

取材自早期網路與印刷色彩,以現代可用性重新整理。

復古適中銳利
CLARITY84↗ 12%
search_

有機自然

Organic Calm

植物與礦物色系、柔和曲線,建立可靠且有生命力的體驗。

當代寬鬆有機
CLARITY84↗ 12%
search_

包浩斯幾何

Bauhaus Geometry

基本幾何、原色與功能主義,讓結構本身成為視覺焦點。

現代主義適中銳利
CLARITY84↗ 12%
search_

曼菲斯後現代

Memphis Postmodern

不規則圖形、鮮明撞色與幽默秩序,帶來有控制的叛逆感。

復古適中有機
CLARITY84↗ 12%
search_

裝飾藝術

Art Deco

對稱軸線、金屬細節與扇形幾何,呈現舞台般的精緻秩序。

復古寬鬆銳利
CLARITY84↗ 12%
search_

世紀中現代

Mid-century Modern

溫暖木質色、簡潔幾何與樂觀排版,復古卻依然實用。

復古適中有機
CLARITY84↗ 12%
search_

Y2K 鍍鉻

Y2K Chrome

鍍鉻、液態字型與早期千禧數位樂觀感,強烈而俐落。

復古適中立體
CLARITY84↗ 12%
search_

賽博龐克

Cyberpunk Neon

高密度資訊、霓虹警示與城市夜色,營造即時任務感。

未來緊湊銳利
CLARITY84↗ 12%
search_

蒸氣波夢境

Vaporwave Dream

粉紫夕陽、數位網格與超現實空間,帶有慢速夢境感。

復古寬鬆立體
CLARITY84↗ 12%
search_

終端機介面

Terminal CLI

以命令列的直接性與精準回饋,建立高效率的工具感。

跨時代緊湊銳利
CLARITY84↗ 12%
search_

現代擬物

Modern Skeuomorphism

材質、刻度與物理回饋讓數位操作更直覺,但保留現代清晰度。

跨時代適中立體
CLARITY84↗ 12%
search_

黏土立體

Claymorphism

柔軟立體元件與粉彩色塊,帶來可觸摸般的親近感。

當代寬鬆立體
CLARITY84↗ 12%
search_

柔性浮雕

Soft Neumorphism

同色系浮雕與微妙光影,呈現安靜而精密的控制面板。

當代寬鬆圓潤
CLARITY84↗ 12%
search_

手繪草圖

Hand-drawn Sketch

不規則線條、註記與紙面節奏,像正在共同發想的工作桌。

跨時代適中有機
CLARITY84↗ 12%
search_

剪報拼貼

Digital Scrapbook

撕紙、膠帶與錯位圖層組成可探索的數位剪貼簿。

跨時代適中有機
CLARITY84↗ 12%
search_

電影敘事

Cinematic Storytelling

寬銀幕比例、字幕式排版與章節轉場,讓內容像一段預告片。

當代寬鬆銳利
CLARITY84↗ 12%
search_

工業控制台

Industrial Control

功能標籤、警示色與耐用結構,像可靠的專業設備面板。

跨時代緊湊銳利
CLARITY84↗ 12%
search_

高密度數據

Data-dense Pro

緊湊表格、精準數字與層級化狀態,服務長時間專業工作。

當代緊湊銳利
CLARITY84↗ 12%
search_

新聞報紙

Newspaper Editorial

多欄文字、醒目頭條與資訊優先級,適合大量內容快速掃讀。

跨時代緊湊銳利
CLARITY84↗ 12%
search_

學術研究

Academic Research

引文、註腳與結構化證據,營造可信、可追溯的閱讀環境。

跨時代緊湊銳利
CLARITY84↗ 12%
search_

遊戲 HUD

Gamer HUD

狀態條、任務提示與環形數據,在有限空間傳達即時資訊。

未來緊湊銳利
CLARITY84↗ 12%
search_

空間介面

Spatial Vision UI

景深、半透明材質與寬鬆目標,模擬空間運算的層次感。

未來寬鬆圓潤
CLARITY84↗ 12%
search_

流體漸層

Liquid Gradient

流動色場與有機邊界創造情緒,介面則維持穩定清楚。

當代寬鬆有機
CLARITY84↗ 12%
search_

開發者工具

Monospace Developer

程式碼、檔案樹與可組合面板,為高效率技術工作而設計。

當代緊湊銳利
CLARITY84↗ 12%
search_

企業系統

Corporate Enterprise

穩定導覽、權限清楚與可預測元件,服務複雜長期工作流程。

當代緊湊銳利
CLARITY84↗ 12%
search_

高可及性

Accessible High Contrast

以清楚層級、強對比與多重訊號,讓更多人可靠完成任務。

當代適中銳利
LIVE STYLE COMPARISON

同一內容,四種設計語言。

選取最多四種風格,比較版面結構、字體、材質、元件與動效。加入第五種時會自動替換最早選擇。

01 / 北歐極簡
CLARITY84↗ 12%
search_
當代冷色寬鬆圓潤克制
18 / 賽博龐克
CLARITY84↗ 12%
search_
未來深色緊湊銳利強烈
29 / 新聞報紙
CLARITY84↗ 12%
search_
跨時代中性緊湊銳利克制
01
SELECTED DIRECTION

北歐極簡

Scandinavian Minimal

留白充足、低彩度與精準層級,讓內容自然成為畫面主角。

適合
SaaS、作品集、知識產品
年代
當代
密度
寬鬆 · 圓潤 · 克制動效
關鍵字
大量留白 · 1px 細框 · 克制動效
PROMPT / VISUAL DIRECTION

採用 Scandinavian minimal UI。使用偏冷灰白、炭灰與低飽和鼠尾草綠。建立 8px spacing system、大量留白,卡片以 1px 淺灰邊框取代陰影。標題採中等字重現代無襯線字;按鈕高度 44px、圓角 10px,hover 僅做 2px 上移與背景加深。避免漸層、裝飾插圖與過度動畫。

02 / COMPONENT RECIPES

好介面,藏在
狀態與細節裡。

「做一顆圓角按鈕」不夠精確。說清楚層級、尺寸、所有狀態與可及性,AI 才能交付完整系統。

LIVE SPECIMEN / BUTTONS
DEFAULTHOVERFOCUS
PROMPT RECIPE

按鈕系統

一次說清楚尺寸、形狀、狀態與動效,避免 AI 只做出一個漂亮按鈕。

建立完整按鈕系統:primary、secondary、tertiary、destructive 四種層級;提供 40/44/48px 三種高度。所有按鈕需包含 default、hover、active、focus-visible、disabled、loading 狀態。文字與背景至少 4.5:1 對比,focus ring 不可只靠顏色辨識。hover 150ms ease-out,active scale(0.98),觸控目標至少 44×44px。

INTERACTION PLAYGROUND

外觀之外,也要把狀態做完整。

直接操作 menu、modal、表單驗證與 loading。這些行為會讓 AI 理解你要的是完整元件系統,不是一張靜態示意圖。

01 / MENU
ARIA EXPANDED · KEYBOARD FOCUS · CLICK FEEDBACK
02 / MODAL
FOCUS ENTRY · ESC TO CLOSE · BACKDROP
03 / FORM

Label 保持可見,錯誤不只靠顏色。

04 / LOADING
DISABLED STATE · STATUS COPY · REDUCED MOTION
03 / PROMPT BUILDER

把選擇組合成
一段可以開工的 Prompt。

先描述目標,再定義視覺系統、互動規則與品質門檻。右側會依照你的選擇即時產生完整 instruction。

目標風格規則好結果
DESIGN CONTROLS調整你的介面語言
色彩溫度
資訊密度
已選風格
北歐極簡Scandinavian Minimal
GENERATED PROMPT LIVE
請設計一個 SaaS 產品首頁,品牌語氣為「專業但友善」。

視覺方向:採用 Scandinavian minimal UI。使用偏冷灰白、炭灰與低飽和鼠尾草綠。建立 8px spacing system、大量留白,卡片以 1px 淺灰邊框取代陰影。標題採中等字重現代無襯線字;按鈕高度 44px、圓角 10px,hover 僅做 2px 上移與背景加深。避免漸層、裝飾插圖與過度動畫。

風格維度:當代美學、冷色色盤、寬鬆資訊密度、圓潤元件輪廓、克制動效,主要適用於科技產品。

設計參數:色溫採「中性偏暖」,資訊密度「適中」,主要元件圓角 12px。使用一致的 8px spacing system,建立清楚的標題、內文、標籤三級字體層級。

互動與品質:展示 navigation、buttons、cards、form、modal、loading 的真實狀態;所有互動元件都需有 hover、active、focus-visible、disabled 狀態,觸控目標至少 44×44px。版面需支援 1440px、768px 與 390px,手機不可只把桌面縮小。遵守 WCAG AA 對比,支援鍵盤操作與 prefers-reduced-motion。

請先列出 design tokens(色彩、字體、間距、圓角、陰影、動效),再實作完整頁面。避免通用模板感、過多漸層、無目的裝飾和 lorem ipsum。
610 CHARACTERS · 繁體中文
BEFORE YOU SEND

最後,別忘了這 5 句。

  1. 01

    先列出 design tokens讓 AI 先定義色彩、字體、間距、圓角與動效。

  2. 02

    手機版不是縮小版要求針對 390px 重新安排層級與操作。

  3. 03

    補齊所有互動狀態明列 hover、active、focus、disabled 和 loading。

  4. 04

    寫出不要什麼負面約束能有效避開漸層、浮卡與模板感。

  5. 05

    用真實內容驗證不要 lorem ipsum;文字長度會直接影響版面品質。