不要只說「做漂亮一點」
把抽象的設計感覺,翻譯成 AI 真正能執行的介面指令。
比較 36 種真正不同的視覺系統,用六個維度精準篩選,並將選擇組成一段完整且可複製的網頁設計 prompt。
風格不是換色,
是整套設計行為。
每個預覽都會改變版面結構、字體比例、元件形狀、資訊密度與動效語言。選一張卡片查看完整 prompt,或加入比較列。
顯示 36 / 36 種風格
暖調編輯
Warm Editorial像一本精心編排的獨立雜誌,帶有紙張質感與人文溫度。
柔光科技
Soft Tech清澈藍紫冷光與柔和玻璃層次,科技感但不冰冷。
新粗獷主義
Neo Brutalism大膽色塊、粗框與直接的視覺語言,個性鮮明且充滿能量。
日式侘寂
Japanese Wabi-sabi安靜、自然、留有呼吸感,以細微的不完美創造真實質地。
模組便當盒
Bento Grid將複雜資訊拆成大小不一的清晰模組,兼顧故事與掃讀效率。
暗黑奢華
Dark Luxury深色層次、香檳金與精緻字級,呈現沉穩而克制的高級感。
友善玩味
Playful Friendly圓潤造型與明快回饋降低操作壓力,親切但不幼稚。
瑞士網格
Swiss Grid嚴謹網格、醒目字級與黑白對比,讓訊息快速而有權威感。
玻璃景深
Glass Depth透過透明度與模糊建立空間景深,適合沉浸式數位產品。
復古數位
Retro Digital取材自早期網路與印刷色彩,以現代可用性重新整理。
有機自然
Organic Calm植物與礦物色系、柔和曲線,建立可靠且有生命力的體驗。
包浩斯幾何
Bauhaus Geometry基本幾何、原色與功能主義,讓結構本身成為視覺焦點。
曼菲斯後現代
Memphis Postmodern不規則圖形、鮮明撞色與幽默秩序,帶來有控制的叛逆感。
裝飾藝術
Art Deco對稱軸線、金屬細節與扇形幾何,呈現舞台般的精緻秩序。
世紀中現代
Mid-century Modern溫暖木質色、簡潔幾何與樂觀排版,復古卻依然實用。
Y2K 鍍鉻
Y2K Chrome鍍鉻、液態字型與早期千禧數位樂觀感,強烈而俐落。
賽博龐克
Cyberpunk Neon高密度資訊、霓虹警示與城市夜色,營造即時任務感。
蒸氣波夢境
Vaporwave Dream粉紫夕陽、數位網格與超現實空間,帶有慢速夢境感。
終端機介面
Terminal CLI以命令列的直接性與精準回饋,建立高效率的工具感。
現代擬物
Modern Skeuomorphism材質、刻度與物理回饋讓數位操作更直覺,但保留現代清晰度。
黏土立體
Claymorphism柔軟立體元件與粉彩色塊,帶來可觸摸般的親近感。
柔性浮雕
Soft Neumorphism同色系浮雕與微妙光影,呈現安靜而精密的控制面板。
手繪草圖
Hand-drawn Sketch不規則線條、註記與紙面節奏,像正在共同發想的工作桌。
剪報拼貼
Digital Scrapbook撕紙、膠帶與錯位圖層組成可探索的數位剪貼簿。
電影敘事
Cinematic Storytelling寬銀幕比例、字幕式排版與章節轉場,讓內容像一段預告片。
工業控制台
Industrial Control功能標籤、警示色與耐用結構,像可靠的專業設備面板。
高密度數據
Data-dense Pro緊湊表格、精準數字與層級化狀態,服務長時間專業工作。
新聞報紙
Newspaper Editorial多欄文字、醒目頭條與資訊優先級,適合大量內容快速掃讀。
學術研究
Academic Research引文、註腳與結構化證據,營造可信、可追溯的閱讀環境。
遊戲 HUD
Gamer HUD狀態條、任務提示與環形數據,在有限空間傳達即時資訊。
空間介面
Spatial Vision UI景深、半透明材質與寬鬆目標,模擬空間運算的層次感。
流體漸層
Liquid Gradient流動色場與有機邊界創造情緒,介面則維持穩定清楚。
開發者工具
Monospace Developer程式碼、檔案樹與可組合面板,為高效率技術工作而設計。
企業系統
Corporate Enterprise穩定導覽、權限清楚與可預測元件,服務複雜長期工作流程。
高可及性
Accessible High Contrast以清楚層級、強對比與多重訊號,讓更多人可靠完成任務。
同一內容,四種設計語言。
選取最多四種風格,比較版面結構、字體、材質、元件與動效。加入第五種時會自動替換最早選擇。
北歐極簡
Scandinavian Minimal
留白充足、低彩度與精準層級,讓內容自然成為畫面主角。
- 適合
- SaaS、作品集、知識產品
- 年代
- 當代
- 密度
- 寬鬆 · 圓潤 · 克制動效
- 關鍵字
- 大量留白 · 1px 細框 · 克制動效
採用 Scandinavian minimal UI。使用偏冷灰白、炭灰與低飽和鼠尾草綠。建立 8px spacing system、大量留白,卡片以 1px 淺灰邊框取代陰影。標題採中等字重現代無襯線字;按鈕高度 44px、圓角 10px,hover 僅做 2px 上移與背景加深。避免漸層、裝飾插圖與過度動畫。
好介面,藏在
狀態與細節裡。
「做一顆圓角按鈕」不夠精確。說清楚層級、尺寸、所有狀態與可及性,AI 才能交付完整系統。
按鈕系統
一次說清楚尺寸、形狀、狀態與動效,避免 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。
外觀之外,也要把狀態做完整。
直接操作 menu、modal、表單驗證與 loading。這些行為會讓 AI 理解你要的是完整元件系統,不是一張靜態示意圖。
把選擇組合成
一段可以開工的 Prompt。
先描述目標,再定義視覺系統、互動規則與品質門檻。右側會依照你的選擇即時產生完整 instruction。
請設計一個 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。
最後,別忘了這 5 句。
- 01
先列出 design tokens讓 AI 先定義色彩、字體、間距、圓角與動效。
- 02
手機版不是縮小版要求針對 390px 重新安排層級與操作。
- 03
補齊所有互動狀態明列 hover、active、focus、disabled 和 loading。
- 04
寫出不要什麼負面約束能有效避開漸層、浮卡與模板感。
- 05
用真實內容驗證不要 lorem ipsum;文字長度會直接影響版面品質。