精选 · 开放 · 免费

Knock

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

devsaas
Knock 网站截图
↓ 下载设计系统包 (10 MB)在 OpenDesign 中打开

原站: https://knock.app

📦 浏览包内文件 →

01

设计气质 DNA

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

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

02

色彩

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

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

03

字体

geometric-sans · humanist-sans · monospace

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

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

组件

09

文案语气与禁用清单

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

抓自真实页面 · 真 computed styles

11

System Prompt

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

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

en · zh-CN · zh-TW · ja · ko