← OpenDesign
精选 · 开放 · 免费
LangChain
一个专注于 AI 智能体开发的深色主题开发者平台,具备清晰的技术美感。
ai dev
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
display 64px · 300heading 48px · 300body 16px · 400caption 14px · 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
布局
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
固定头部,内容居中,章节间保持充裕的垂直间距
07
动效与交互
200ms micro
300ms small
800ms medium
cubic-bezier(0.4, 0, 0.2, 1) easing
hover 状态下平滑的过渡效果(0.3s) · 内容切换时细腻的淡入淡出过渡 · 避免炫目动画,保持专业感
平滑的颜色过渡与细微的视觉反馈 · 即时响应,伴随视觉状态变化
08
组件
button 主按钮:白色背景,黑色文字,圆角(6px)。次按钮:透明背景,白色边框 card 深色卡片,带细微边框,用于产品展示与功能亮点 chip 药丸形标签,蓝色边框(例如:构建、测试、部署、监控) input 深色输入框,蓝色点缀,字体排印清晰 hero 全宽深色区块,包含大型居中文字、渐变蓝色线条与双 CTA 按钮
09
文案语气与禁用清单
语气 专业、技术、赋能 标题风格 采用轻量字体的大号文字,紧凑字间距以增强冲击力 按钮文案 清晰、行动导向的语言(如“开始构建”、“获取演示”) 避免使用亮色——截图显示的是带有微妙蓝色点缀的深色主题 避免使用粗重的字体粗细——截图显示的是轻量(300)和常规(400)粗细 避免使用宽松的字间距——截图显示标题使用的是紧凑的负值间距 避免使用复杂的装饰性元素——截图显示的是干净、简约的设计 避免使用多种强调色——截图显示的是单一的蓝色调色板 避免所有按钮都使用圆角药丸形状——截图显示的是圆角与矩形按钮的混合 避免: 过度随意的语言 避免: 过多的感叹号 避免: 未经解释的行话
10
包内真实截图
桌面首屏(hero) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 移动首屏 抓自真实页面 · 真 computed styles
11
System Prompt
一个专注于 AI 智能体开发的深色主题开发者平台,具备清晰的技术美感。主色板为深海军蓝(#030710)搭配浅蓝色点缀(#7FC8FF,#CCE9FF)。字体排印方面,显示文字使用几何无衬线字体,正文使用人文主义无衬线字体,标题采用轻量(300)字重,正文采用常规(400)字重。关键特性包括:充裕的留白、微妙的蓝色渐变线条、实心与带边框按钮的混合使用。关键设计原则:保持深色主题一致性;谨慎使用蓝色点缀进行强调;保持字体轻盈、空间感强;避免使用会淹没技术内容的沉重视觉元素;确保所有交互感觉平滑而专业。
更多精选
en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
为什么收录: 此设计展现了现代开发者工具的美学:深色主题、技术精准度、清晰的字体排印,在专业感与亲和力之间取得平衡。