큐레이션 · 오픈 · 무료

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

큰 디스플레이 텍스트에는 타이트한 자간을 적용합니다 · 헤드라인의 최대 효과를 위해 행간을 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

컴포넌트

09

보이스와 금지 목록

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-serif 카테고리에 의존합니다. 레이아웃은 넉넉한 여백과 구조화된 그리드 시스템으로 여유롭습니다. 핵심 디자인 규칙: 강조색은 블루 단일만 사용, 테두리는 부드러운 블루 그레이(#E5EAFF)로 미세하게 유지, 장식적 요소나 무거운 그림자 사용 금지, 본문 텍스트는 왼쪽 정렬 유지, 전문적이고 개발자 중심적인 어조 유지.

이 감각을 당신의 에이전트에

이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.

OpenDesign 스킬 ↗ · 이 팩 (에이전트용) ↗

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