精選 · 開放 · 免費

LangChain

以暗色為主題、聚焦開發者的 AI Agent 開發平台，具備簡潔、技術性的視覺美學。

aidev
LangChain 網站截圖
↓ 下載設計系統包 (16 MB)在 OpenDesign 中開啟

原站: https://www.langchain.com

📦 瀏覽包內檔案 →

01

設計氣質 DNA

開發者AI基礎架構Agent生命週期

一款為 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) 用於標題，Regular (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 Agent 開發，具備簡潔、技術性的視覺美學。主要色彩方案為深海軍藍 (#030710) 搭配淺藍色點綴 (#7FC8FF, #CCE9FF)。字型組合包含用於展示的幾何無襯線字體與用於內文的人文無襯線字體，標題使用輕字重 (300)，內文使用 Regular (400)。關鍵特點包括寬裕的留白、細微的藍色漸層線條，以及實心與邊框按鈕的混合使用。核心設計原則：保持暗色主題的一致性，謹慎使用藍色強調以突出重點，維持字型輕盈且空間感充足，避免厚重的視覺元素壓過技術內容，並確保所有互動感受流暢且專業。

把這份品味接進你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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