OpenDesign·你的设计资产库

网页参考

Linear

深色首屏用左对齐标题说明产品，下方露出密集的项目管理界面。

SaaSProductivityApp UIDark Mode
Linear 网站截图

理解与复用

从这份设计中借鉴什么

基于收录时的历史截图解读

设计亮点

  • 标题先交代产品用途，再用产品界面承接承诺
  • 深背景中仅少数操作使用高对比底色

适合什么项目

  • B2B 工具官网
  • 复杂工作流产品介绍

如何带进你的设计

  • 先写清一句价值主张，再截取能证明它的产品界面
  • 为操作按钮与背景建立清楚对比

使用边界

  • 界面截图中的细字不能作为正文阅读标准
  • 仅依据已检查的历史预览；未核实现行网站、交互、精确 Tokens 或素材授权。

此解读由 Agent 编写，尚未经过人工终审；不代表原作者规范或使用授权。

01

设计气质 DNA

精准速度技术清晰度结构化AI原生

面向软件团队的高端腕表仪器——深邃、精准、毫无装饰。

02

色彩

#F7F8F8Ink
#D0D6E0Ink soft
#08090ABG
rgba(255,255,255,0.05)BG soft
rgba(255,255,255,0.02)BG quiet
#62666DMuted
rgba(255,255,255,0.08)Line

极致对比以聚焦，辅以细微的噪点与半透明图层，营造深度感。

03

字体

geometric-sans · humanist-sans · monospace

  • display64px · 400
  • body16px · 400
  • mono13px · 400

大标题采用紧凑的负字距。 · 正文保持400字重，使界面保持轻盈。 · 仅对技术参考与标识符使用等宽字体。

04

间距

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

严格的4px栅格，组件间距紧凑。

05

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

sm · 4px
md · 6px
lg · 12px
pill · 9999px

1px solid rgba(255,255,255,0.08)

0px 1.2px 0px 0px rgba(0,0,0,0.03) · 0px 2px 4px 0px rgba(0,0,0,0.4) · inset 0px 0px 12px 0px rgba(0,0,0,0.2)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

密集、全宽的深色画布，内嵌凸起的嵌套面板。

07

动效与交互

150msmicro
160mssmall
400msmedium
cubic-bezier(0.25, 0.46, 0.45, 0.94)easing

悬停时细微的淡入与滤镜过渡。 · 平滑的背景色变化。 · 光标与焦点状态下的微交互。

轻微的亮度提升或背景透明度变化。 · 即时状态切换，带有细微的缩放或颜色反馈。

08

组件

  • button 胶囊形或微圆角矩形，透明背景配细边框。
  • card 凸起的深色面板，带有细微的1px内边框与柔和的阴影。
  • chip 小巧的圆角矩形，用于标签与状态指示。
  • input 深色、半透明背景的输入框，边框样式极简。
  • hero 硕大、粗体的无衬线标题，搭配简洁的副标题与大型产品样机。

09

文案语气与禁用清单

  • 语气 技术性、精准、自信。
  • 标题风格 直接、行动导向、权威。
  • 按钮文案 极简清晰，通常仅为简单的文本链接或低强调按钮。
  • 避免使用高饱和度颜色——截图显示的是严格的灰阶/白色调色板。
  • 避免使用圆润、俏皮的形状——截图显示的是锐利或极微圆润的转角。
  • 避免使用衬线或装饰性字体——截图显示的是干净、几何感强的无衬线字体。
  • 避免使用明亮、多彩的渐变——截图显示的是深色、平面、带颗粒质感的背景。
  • 避免使用粗重、显眼的边框——截图显示的是纤细的1px分割线。
  • 避免使用复杂、多层的阴影——截图显示的仅为细微、低不透明度的阴影。
  • 避免: 营销话术
  • 避免: 模糊或歧义的术语
  • 避免: 过多的感叹号
  • 避免: 俏皮或随意的语言

10

包内真实截图

Linear — 桌面首屏（hero）
桌面首屏（hero）
Linear — 桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
Linear — 桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
Linear — 桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
Linear — 桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
Linear — 桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
Linear — 桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
Linear — 桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
Linear — 桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
Linear — 桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
Linear — 桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
Linear — 桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
Linear — 桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
Linear — 桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
Linear — 桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
Linear — 移动首屏
移动首屏

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

11

System Prompt

为开发者工具与AI时代的生产力设计一套高精度SaaS界面。该系统采用深邃的暗色模式调色板，主要背景色为#08090A，文字使用白色#F7F8F8以形成高对比。字体简洁几何，大标题采用负字距。关键十六进制颜色为#08090A、#F7F8F8，以及用于弱化元素的#62666D。不要使用高饱和度颜色或俏皮、圆润的形状；整体美学必须保持锐利、技术感与专业。布局密集且全宽，利用半透明面板营造深度。确保过渡动画快速而细微，以保持速度感。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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