精選 · 開放 · 免費

Uizard

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

designai
Uizard 網站截圖
↓ 下載設計系統包 (17 MB)在 OpenDesign 中開啟

原站: https://uizard.io

📦 瀏覽包內檔案 →

01

設計氣質 DNA

AI 驅動快速原型設計UI 設計線框圖產品概念

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

02

色彩

#6419FFAccent
#F5F5F5Ink
#AEAEAEInk soft
#0D0D0DBG
#171717BG soft
#080808BG quiet
#232323Muted
rgba(33,33,33,1)Line

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

03

字型

geometric-sans · humanist-sans · monospace

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

04

間距

4px
8px
12px
16px
20px
24px
32px
40px
48px
64px
90px

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

05

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

sm · 4px
md · 8px
lg · 12px
xl · 16px
pill · 999px

根據情境使用 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

版面

1280container
12columns
24pxgutter
768 / 1024breakpoints

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

07

動效與互動

200msmicro
300mssmall
500msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

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

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

08

組件

09

文案語氣與禁用清單

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

Uizard 是一款 AI 驅動的 UI 設計工具,優先考量速度與創新。視覺系統建立在高對比深色模式(#0D0D0D 背景)上,並搭配鮮豔的紫色裝飾色(#6419FF)。字體以乾淨、幾何形狀的無襯線類別(展示型與內文型)為主。關鍵限制包括避免淺色主題、僅使用現代無襯線字體,並確保所有文字具有高對比。設計採用一致的 4px 間距網格與圓角(12px-16px),以營造柔和而專業的感受。切勿使用襯線字體或溫暖、大地色的色板。焦點應始終放在 AI 生成內容的「魔力」上,透過發光裝飾色與大膽、著重效益的標題來凸顯。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效,整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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