精選 · 開放 · 免費

Uizard

運用 GenAI 即時將產品想法轉化為概念。

01

設計氣質 DNA

UI 設計的自動駕駛系統，可將文字提示轉化為線框圖。

02

色彩

高對比深色模式，搭配鮮豔的紫色 AI 裝飾色，以傳達創造力與現代科技感。

03

字型

geometric-sans · humanist-sans · monospace

• display56px · 500
• h140px · 480
• body-lg18px · 400
• body16px · 400
• caption14px · 400

標題採用緊湊的行高（1.1-1.15）。 · 使用負字距（-1px 至 -0.2px）營造現代、緊湊的感受。 · 所有展示字體優先採用乾淨、幾何形狀的字型。

04

間距

採用一致的 4px 網格系統，確保所有 UI 元件間的間距和諧統一。

05

表面 (圓角 / 陰影 / 邊線)

根據情境使用 1px solid rgb(245,245,245) 或 rgb(33,33,33)。

0px 12px 30px -4px rgba(3,3,3,0.12) · 0px 2px 12px 0px rgba(168,129,254,0.64) · 0px -20px 200px 0px rgba(68,20,187,0.75)

06

版面

頁面採用結構化的網格佈局，並明確劃分英雄區、功能區與社會證明區等不同段落。

07

動效與互動

background-color 與 opacity 的流暢轉場。 · 互動元素上細微的 hover 效果。 · 強化 AI 導向感受的動態發光與漸層效果。

主要操作按鈕上細微的顏色變化與輕微的縮放或發光效果。 · 透過顏色變化或內嵌陰影提供即時的視覺回饋。

08

組件

• button 高對比的主要按鈕，採用藥丸形邊框與細微的紫色發光效果。
• card 圓角卡片，配有柔和邊框（1px solid #212121）與深色背景色。
• chip 用於介面中狀態或標籤的小型圓角標籤。
• input 乾淨的輸入欄位，具有深色背景與細微邊框，通常與操作按鈕分組配置。
• hero 顯著的置中英雄區域，包含大型標題、副文字與顯眼的提示詞輸入框。

09

文案語氣與禁用清單

• 語氣 創新、賦能且直接。
• 標題風格 大膽、著重效益的陳述，聚焦於速度與 AI 能力。
• 按鈕文案 採用行動導向的動詞，如「生成」、「註冊」、「探索」。

• 勿使用白色或淺色背景——截圖顯示以深色主題（#0D0D0D）為基礎。
• 勿使用溫暖、大地色或粉彩色調——色板以黑色、白色與高飽和度紫色為主。
• 勿使用襯線字體——截圖顯示僅使用乾淨、幾何形狀與人文主義無襯線字型。
• 勿使用小於 4px 的圓角——即使是小元素也至少使用 4px，許多卡片採用 12px 或 16px。
• 勿在行銷材料中使用通用的佔位符文字——截圖使用清晰、具教學性的提示詞範例。
• 勿使用低對比文字——截圖顯示在深色背景上使用高對比白色（#F5F5F5）以最大化可讀性。
• 避免: 未經解釋的過度技術術語。
• 避免: 被動或猶豫不決的語言。
• 避免: 過多的驚嘆號或聳動的表述。

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko