OpenDesign·你的设计资产库

网页参考

LangChain

一个专注于 AI 智能体开发的深色主题开发者平台，具备清晰的技术美感。

AIDeveloper Tools
LangChain 网站截图

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

  • display64px · 300
  • heading48px · 300
  • body16px · 400
  • caption14px · 400

标题与标题文字使用紧凑的字间距（-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

组件

  • button 主按钮：白色背景，黑色文字，圆角（6px）。次按钮：透明背景，白色边框
  • card 深色卡片，带细微边框，用于产品展示与功能亮点
  • chip 药丸形标签，蓝色边框（例如：构建、测试、部署、监控）
  • input 深色输入框，蓝色点缀，字体排印清晰
  • hero 全宽深色区块，包含大型居中文字、渐变蓝色线条与双 CTA 按钮

09

文案语气与禁用清单

  • 语气 专业、技术、赋能
  • 标题风格 采用轻量字体的大号文字，紧凑字间距以增强冲击力
  • 按钮文案 清晰、行动导向的语言（如“开始构建”、“获取演示”）
  • 避免使用亮色——截图显示的是带有微妙蓝色点缀的深色主题
  • 避免使用粗重的字体粗细——截图显示的是轻量（300）和常规（400）粗细
  • 避免使用宽松的字间距——截图显示标题使用的是紧凑的负值间距
  • 避免使用复杂的装饰性元素——截图显示的是干净、简约的设计
  • 避免使用多种强调色——截图显示的是单一的蓝色调色板
  • 避免所有按钮都使用圆角药丸形状——截图显示的是圆角与矩形按钮的混合
  • 避免: 过度随意的语言
  • 避免: 过多的感叹号
  • 避免: 未经解释的行话

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 — 移动首屏
移动首屏

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

一个专注于 AI 智能体开发的深色主题开发者平台，具备清晰的技术美感。主色板为深海军蓝（#030710）搭配浅蓝色点缀（#7FC8FF，#CCE9FF）。字体排印方面，显示文字使用几何无衬线字体，正文使用人文主义无衬线字体，标题采用轻量（300）字重，正文采用常规（400）字重。关键特性包括：充裕的留白、微妙的蓝色渐变线条、实心与带边框按钮的混合使用。关键设计原则：保持深色主题一致性；谨慎使用蓝色点缀进行强调；保持字体轻盈、空间感强；避免使用会淹没技术内容的沉重视觉元素；确保所有交互感觉平滑而专业。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明，可复制给 Agent。