OpenDesign·你的设计资产库

网页参考

Knock

一个简洁、功能性强、面向开发者的设计系统，为复杂的产品消息传递优先考虑清晰度和信息层次。

Developer ToolsSaaS
Knock 网站截图

历史页面片段，非最新首页；规范与授权仍需分别核实。

01

设计气质 DNA

开发者优先消息基础设施AI 原生可组合可运维

用于构建复杂通信系统的精密仪器，其中清晰度和控制力至关重要。

02

色彩

#E8673CAccent
#000000Ink
#222222Ink soft
#F9F9FBBG
#60646CMuted
rgba(200, 206, 213, 1)Line

克制的调色板使用深中性色以保证可读性，并搭配单一、醒目的暖色强调色来指示主要操作。

03

字体

geometric-sans · humanist-sans · monospace

  • display56px · 500
  • headline40px · 500
  • subtitle24px · 400
  • body16px · 400
  • label14px · 500

标题使用几何无衬线字体，以传达精确感和现代感。 · 正文使用人文无衬线字体，以获得最佳可读性。 · 代码片段和技术数据使用等宽字体。 · 通过大小和字重，而非颜色，来维持严格的排版层次。

04

间距

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

基于 4px 的一致网格，配以充足的空白，用于分隔区块并聚焦注意力。

05

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

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

1px solid #C8CED5

rgba(0, 0, 0, 0.06) 0px 1px 6px 0px · rgba(0, 0, 0, 0.16) 0px 2px 32px 0px

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

结构化的、基于列的布局，具有充足的内边距和清晰的内容层次。

07

动效与交互

150msmicro
200mssmall
300msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

交互元素上的平滑过渡以提供反馈。 · 内容出现时的微妙淡入动画。 · hover 状态的变换效果。

交互元素上的颜色或背景变化，采用标准的 cubic-bezier 过渡。 · 即时的视觉反馈，通常通过微妙的变换或颜色变化实现。

08

组件

  • button 实心的主要按钮（珊瑚色）和描边的次要按钮，4px 圆角。简洁、功能性强且高对比度。
  • card 带有微妙 1px 边框和圆角的白色卡片，用于组合相关信息。
  • chip 圆角的药丸状徽章，用于状态指示，例如“New”。
  • input 带有微妙边框的简洁文本输入框，功能优先于装饰。
  • hero 居中、宽敞的主视觉区域，包含大标题、清晰的副文本和两个醒目的行动号召按钮。

09

文案语气与禁用清单

  • 语气 权威、清晰且技术娴熟。直接面向开发者。
  • 标题风格 直接、陈述性、面向效益。使用主动动词。
  • 按钮文案 面向行动且具体，使用明确的指令，如“Get started”或“Read our docs”。
  • 不要使用明亮、相互竞争的强调色——截图显示的是单一的主要珊瑚色强调色，搭配中性调色板。
  • 不要使用装饰性的衬线字体——排版严格使用几何和人文无衬线字体。
  • 不要使用厚重的投影——阴影是最小化的且功能性的，用于微妙的层级提升。
  • 不要在卡片上使用大于 12px 的圆角——设计使用紧凑、精确的圆角。
  • 不要让布局显得杂乱——截图显示有充足的空白和清晰的视觉层次。
  • 不要为主要界面使用深色背景——设计以浅色为主，搭配高对比度文本。
  • 避免: 营销套话
  • 避免: 未经解释的行话
  • 避免: 过于随意的语气

10

包内真实截图

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

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

11

System Prompt

Knock 是一个面向开发者的客户参与 SaaS 平台，定位为简洁、精准且强大的工具。其设计 DNA 特点为克制的浅色中性调色板（#F9F9FB 背景，#000000 墨色），并搭配单一、高饱和度的珊瑚色强调色（#E8673C）用于主要操作。排版混合了几何无衬线标题和人文无衬线正文，所有文本都具有出色的可读性。关键禁止事项：绝不使用装饰性衬线，避免使用相互竞争的强调色，不要让充足、留白丰富的布局显得杂乱。设计优先考虑清晰度、层次结构和功能优雅，面向技术受众。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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