OpenDesign·你的设计资产库

网页参考

Sourcegraph

一个企业级代码智能平台，用于管理和演进海量代码库。

Developer ToolsCode
Sourcegraph 网站截图

01

设计气质 DNA

开发者代码智能代码库企业级

大规模软件工程的工业控制面板。

02

色彩

#ED2D2DAccent
#EDEDEDInk
#606060Ink soft
#020202BG
#111111BG soft
#F7F7F7BG quiet
#A9A9A9Muted
rgba(237,237,237,1.0)Line

采用单一强烈的红色强调色进行主要操作的高对比度深色模式。

03

字体

geometric-sans · monospace

  • display72px · 600
  • h248px · 600
  • body16px · 400
  • mono15px · 400

04

间距

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

以4px为基础单位，采用宽裕的垂直内边距（48px、64px、96px）进行内容分隔。

05

表面 (圆角 / 阴影 / 边线)

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

1px solid rgba(237,237,237,1.0)

rgba(0, 0, 0, 0.08) 0px 4px 24px 0px · rgba(0, 0, 0, 0.25) 0px 8px 30px 0px · rgba(0, 0, 0, 0.5) 0px 4px 16px 0px

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

居中的单栏主视觉区，过渡至宽幅多栏功能展示区。

07

动效与交互

220msmicro
400mssmall
800msmedium
cubic-bezier(0.16, 1, 0.3, 1)easing

版块淡入显现 · 按钮与链接平滑的hover状态过渡

微妙的透明度变化或背景色偏移。 · 通过光标指针和过渡效果提供即时反馈。

08

组件

  • button 实心红色药丸状主按钮；描边或幽灵样式次级按钮。
  • card 深色背景面板，带有微妙边框和8-12px圆角。
  • chip 药丸状分类标签，带有微妙边框和高对比度文本。
  • input 深色背景输入框，具有清晰的focus状态和8px圆角。
  • hero 采用大号字体，搭配微妙的径向/渐变背景图案和单一主行动号召按钮。

09

文案语气与禁用清单

  • 语气 权威、技术性强且直接。
  • 标题风格 简短、以行动为导向且有力。
  • 按钮文案 直接务实，通常涉及演示或试用。
  • 不要使用柔和或低饱和度的强调色——截图显示为高饱和度红色强调色
  • 不要使用装饰性或手写展示字体——截图显示所有标题均为几何无衬线字体
  • 不要为正文使用纤细或轻量的字重——截图显示为保证可读性的标准字重
  • 不要使用复杂或摄影背景——截图显示为微妙的深色渐变与网格图案
  • 不要使用过多的投影效果——截图显示为用于提升层次感的克制功能性阴影
  • 不要为主要容器使用大号圆角——截图显示大多为8px圆角或药丸形状
  • 避免: 轻浮或过于随意的语言
  • 避免: 过度使用最高级形容词
  • 避免: 不清晰或模糊的价值主张

10

包内真实截图

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

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

11

System Prompt

Sourcegraph是一个面向企业开发者的高端SaaS平台。设计采用深色模式（#020202），搭配白色/灰色文本（#EDEDED，#A9A9A9）以及标志性的高饱和度红色强调色（#ED2D2D）。字体以用于展示和正文的几何无衬线字体为主，技术标签则使用等宽字体。关键约束：避免柔和色彩，保持字体简洁几何化，采用宽裕的垂直间距（48-96px）以防止杂乱，并确保行动号召按钮具有高对比度和易识别性。整体氛围是工业级、高科技且专注的。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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