큐레이션 · 오픈 · 무료

Qdrant

대규모 AI 검색을 위한 고성능 벡터 검색 엔진입니다.

devai
Qdrant 스크린샷
↓ 디자인 시스템 다운로드 (32 MB)OpenDesign 에서 열기

원본 사이트: https://qdrant.tech

📦 팩 내용 보기 →

01

디자인 DNA

performancescalevector searchdeveloperinfrastructure

AI를 위한 고속 데이터 고속도로로, 최대 처리량을 위해 설계되었습니다.

02

컬러

#dc244cAccent
#ffffffInk
#8f98b2Ink soft
#090e1aBG
#28324dBG soft
#161e33BG quiet
rgba(40, 50, 77, 1.0)Line

행동을 유도하는 단일의 고에너지 액센트 컬러를 사용한 고대비 다크 모드.

03

타이포그래피

humanist-sans · monospace

디스플레이 제목에는 타이트한 자간을 적용하여 견고하고 건축적인 느낌을 만듭니다. · 본문 텍스트에는 넉넉한 행간을 적용하여 다크 배경에서도 가독성을 보장합니다. · 기술 레이블 및 코드 스니펫에는 모노스페이스를 사용하여 개발자 컨텍스트를 확립합니다.

04

여백

4px
8px
16px
24px
32px
48px
64px
96px

수직 간격은 4px 기본 그리드를 기반으로 하여, 모듈식 컴포넌트의 일관된 정렬을 보장합니다.

05

표면 (라운드 / 그림자 / 경계선)

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

모듈과 컨테이너를 미묘하게 정의하기 위한 #28324d의 1px 솔리드 테두리.

버튼 글로우 효과를 위한 0px 2px 1px 0px inset. · 플로팅 요소를 위한 0px 4px 8px 0px rgba(0, 0, 0, 0.2).

06

레이아웃

1280container
12columns
24pxgutter
768 / 1024breakpoints

중앙 정렬된 텍스트와 큰 배경 이미지가 있는 풀 너비 히어로로 시작하여, 콘텐츠 섹션을 위한 구조화된 그리드로 전환됩니다.

07

모션과 인터랙션

200msmicro
300mssmall
400msmedium
cubic-bezier(0.2, 0, 0, 1)easing

전환 및 hover 상태를 위한 표준 ease-out. · 모달 및 메뉴 노출을 위한 투명도 및 가시성 변화. · 인터랙티브한 버튼 상태를 위한 색상 전환.

배경색 변화와 미묘한 투명도 변화. · 인셋 그림자나 약간의 스케일 변화를 통한 시각적 피드백.

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

Qdrant — 桌面首屏（hero）
桌面首屏（hero）
Qdrant — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Qdrant — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Qdrant — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Qdrant — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Qdrant — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Qdrant — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Qdrant — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Qdrant — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Qdrant — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Qdrant — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Qdrant — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Qdrant — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Qdrant — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Qdrant — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Qdrant — 移动首屏
移动首屏

실제 페이지에서 캡처 · 실 computed styles

11

System Prompt

이것은 AI 벡터 검색을 위한 고성능 개발자 도구입니다. 디자인 DNA는 깊은 네이비 배경(#090e1a)과 중요한 동작을 위한 생동감 있는 레드 액센트(#dc244c)를 사용하는 어둡고 건축적인 미학으로 정의됩니다. 타이포그래피는 깔끔한 humanist-sans 시스템을 사용하며, 속도와 스케일을 전달하기 위해 디스플레이 제목에 타이트한 자간을 적용합니다. 중요 Donts: 밝은 배경을 피하고, 과도하게 둥근 모서리를 피하고, 저대비 텍스트를 피하세요. 인터페이스는 설계되고, 신뢰할 수 있으며, 대규모를 위해 구축된 느낌이 나야 하며, 넉넉한 여백과 명확한 정보 계층이 특징입니다.

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

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

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

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