精选 · 开放 · 免费

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

悬停状态下的简单透明度过渡 · 章节间平滑的滚动行为

交互元素上的细微颜色或透明度变化 · 通过颜色变化提供即时视觉反馈

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）作为主要操作和亮点的点缀色。排版依赖于简洁的怪诞无衬线字体类别，标题使用紧凑的字间距。布局宽敞，留白充足，并采用结构化的栅格系统。关键设计规则：仅使用一种点缀色（蓝色），保持边框细微并使用柔和蓝灰色（#E5EAFF），避免装饰性元素或厚重的阴影，保持正文左对齐，并维持专业、面向开发者的语调。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效，整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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