큐레이션 · 오픈 · 무료

LangChain

깔끔하고 기술적인 미학을 갖춘, AI 에이전트 개발에 초점을 맞춘 다크 테마 기반 개발자 플랫폼입니다.

aidev
LangChain 스크린샷
↓ 디자인 시스템 다운로드 (16 MB)OpenDesign 에서 열기

원본 사이트: https://www.langchain.com

📦 팩 내용 보기 →

01

디자인 DNA

개발자AI인프라에이전트라이프사이클

AI 개발자를 위한 정교한 디지털 워크벤치로, 기술적 정밀함과 현대적 미학을 결합합니다.

02

컬러

#FFFFFFInk
rgba(255, 255, 255, 0.6)Ink soft
#030710BG
#162034BG soft
#7FC8FFMuted
rgba(204, 233, 255, 1)Line

기술적 강조를 위한 블루 악센트 톤의 고대비 다크 테마

03

타이포그래피

geometric-sans · humanist-sans · monospace

디스플레이 및 제목 텍스트는 좁은 자간(-1.92px ~ -1.44px)을 사용합니다 · 본문 텍스트는 기본 크기 16px, 줄 간격 1.5를 사용합니다 · 제목은 주로 가벼운(300) 웨이트를, 본문은 정상(400) 웨이트를 사용합니다

04

여백

4px
8px
12px
16px
20px
24px
32px
40px
48px
64px
80px
96px

일관된 8px 기본 그리드와 여유로운 여백으로 숨 쉴 공간을 확보합니다

05

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

sm · 2px
md · 6px
lg · 16px
pill · 80px

상호작용 요소에 사용되는 블루 톤의 1px 실선 테두리

0px 32px 68px 0px rgba(0, 0, 0, 0.3) · 0px 0px 32px 0px rgba(127, 200, 255, 0.5)

06

레이아웃

1280container
12columns
24pxgutter
768 / 1024breakpoints

고정형 헤더와 중앙 정렬 콘텐츠, 섹션 간 풍부한 수직 간격을 가진 뼈대 구조

07

모션과 인터랙션

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

hover 상태에서의 부드러운 전환 (0.3s) · 콘텐츠 변경 시 미묘한 페이드 전환 · 전문적인 분위기를 유지하는 화려한 애니메이션 없음

부드러운 색상 전환과 미묘한 시각적 피드백 · 시각적 상태 변경과 함께 즉각적인 반응

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

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

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

11

System Prompt

AI 에이전트 개발을 위한 다크 테마 기반 개발자 플랫폼으로, 깊은 네이비(#030710)와 라이트 블루 악센트(#7FC8FF, #CCE9FF)를 기본 색상 팔레트로 하는 깔끔하고 기술적인 미학이 특징입니다. 타이포그래피는 디스플레이에 기하학적 고딕체(sans-serif), 본문에 휴머니스트 고딕체를 결합하며, 제목은 가벼운(300) 웨이트를, 본문은 정상(400) 웨이트를 사용합니다. 주요 기능으로는 풍부한 여백, 미묘한 블루 그라데이션 라인, 그리고 실선과 테두리가 혼합된 버튼이 포함됩니다. 핵심 디자인 원칙은 다음과 같습니다: 다크 테마 일관성 유지, 강조를 위해 블루 악센트를 절제 있게 사용, 타이포그래피를 가볍고 넓게 유지, 기술적 콘텐츠를 압도할 수 있는 무거운 시각 요소 회피, 그리고 모든 상호작용이 부드럽고 전문적으로 느껴지도록 보장.

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

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

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

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