精選 · 開放 · 免費

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