精選 · 開放 · 免費

Dify

一款簡潔、以開發者為中心的 AI 平台，採用大膽的藍色強調色與結構化的佈局。

aidev

Dify 網站截圖

↓ 下載設計系統包 (27 MB)在 OpenDesign 中開啟

原站: https://dify.ai

📦 瀏覽包內檔案 →

01

設計氣質 DNA

AI 平台開發者工具工作流程自動化

流線型、專業的開發者主控台與現代化 SaaS 儀表板的結合

02

色彩

#0033FFAccent

#000000Ink

#666666Ink soft

#FFFFFFBG

#E5EAFFBG soft

#F8F9FBBG quiet

#333333Muted

rgba(0,0,0,0.1)Line

以黑字白底營造高對比，並使用單一電光藍作為主要操作的強調色

03

字型

grotesque-sans · monospace

display45px · 500
headline38px · 500
body16px · 400
caption12px · 400

大型標題文字採用緊湊的字間距 · 標題的行高設定為 1.1，以產生最大的視覺衝擊力 · 內文字重使用 400，強調部分使用 500

04

間距

4px

8px

12px

16px

20px

24px

32px

40px

64px

100px

以一致的 4px 為基礎單位，主視覺區塊則採用寬裕的留白

05

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

sm · 4px

md · 8px

lg · 12px

pill · 999px

採用柔軟的藍灰色 (#E5EAFF) 1px 細邊框

rgb(229, 234, 255) 0px 0px 0px 1px · rgba(0, 0, 0, 0.3) 0px 32px 68px 0px

06

版面

1200container

12columns

24pxgutter

768 / 1024breakpoints

全寬度頁首、置中的內容容器、多欄位的功能區塊網格

07

動效與互動

200msmicro

400mssmall

800msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

hover 狀態的簡潔透明度過渡 · 區塊間流暢的滾動行為

互動元素上細微的色彩或透明度變化 · 透過色彩變化提供即時的視覺回饋

08

組件

button 實心藍色 (#0033FF) 主要按鈕，白色文字，圓角設計
card 白色卡片，帶有細微的藍灰色邊框 (#E5EAFF)
chip 小型膠囊狀標籤，淺藍色背景 (#E5EAFF)
input 簡潔的輸入框，採用底部邊框樣式
hero 大型字體的主視覺區塊，內容居中並預留寬敞的留白

09

文案語氣與禁用清單

語氣專業、以開發者為導向、具權威感
標題風格 以直接、行動導向的動詞作為句子開頭
按鈕文案 簡潔、清晰的行動動詞，例如「開始使用」

勿使用裝飾性字體——截圖顯示通篇使用簡潔的無襯線體
勿使用多種強調色——截圖僅顯示一個主導的藍色 (#0033FF)
勿使用厚重的陰影——截圖顯示陰影使用非常細微且極簡
勿到處使用圓角——截圖顯示大多為直角或略帶圓角
勿使用複雜的背景——截圖顯示大多為純白或非常淺的灰色背景
勿將內文置中排版——截圖顯示內文為靠左對齊
避免: 過於隨意或俏皮的語言
避免: 過多的標點符號或表情符號
避免: 對開發者受眾無益的專業術語

10

包內真實截圖

Dify — 桌面首屏（hero） — 桌面首屏（hero）

Dify — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Dify — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Dify — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Dify — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Dify — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Dify — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Dify — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Dify — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Dify — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Dify — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Dify — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Dify — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Dify — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Dify — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Dify — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Dify — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Dify — 移动首屏 — 移动首屏

擷取自真實頁面 · 真 computed styles

11

System Prompt

Dify 是一款專業的 AI 開發者平台，具有簡潔、極簡的美學風格。設計採用純白 (#FFFFFF) 與純黑 (#000000) 的高對比色調，並使用單一電光藍 (#0033FF) 作為主要操作與高亮顯示的強調色。字體採用簡潔的 grotesque-sans 無襯線體類別，標題使用緊湊的字間距。佈局寬敞，留白充足，並採用結構化的網格系統。關鍵設計準則：僅使用一種強調色（藍色），邊框保持細微並使用柔軟的藍灰色 (#E5EAFF)，避免裝飾性元素或厚重陰影，內文維持靠左對齊，並保持專業、以開發者為中心的語氣。

把這份品味接進你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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