精選 · 開放 · 免費

Hex

一個匯聚信賴與洞見的 AI 分析平台。

devtoolsdata
Hex 網站截圖
↓ 下載設計系統包 (65 MB)在 OpenDesign 中開啟

原站: https://hex.tech

📦 瀏覽包內檔案 →

01

設計氣質 DNA

AI 分析信賴洞見資料平台

一本融合編輯優雅與技術嚴謹的數據科學筆記。

02

色彩

#E28C8BAccent
#31263BInk
#43394CInk soft
#FFFCFCBG
#E9E5E8BG soft
#F4F1F2BG quiet
#89828DMuted
rgba(49, 38, 59, 0.14)Line

穩重且值得信賴的中性色盤，搭配溫潤、細膩的強調色。

03

字型

transitional-serif · geometric-sans · monospace

使用襯線體作為標題字，增添編輯質感。 · 所有內文與介面元素採用無線條體，確保清晰易讀。 · 等寬體嚴格僅用於程式碼區塊。

04

間距

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

標準的 4px 基礎網格，搭配舒適的內距以確保內容的可讀性。

05

表面 (圓角 / 陰影 / 邊線)

sm · 2px
md · 3px
lg · 4px
pill · 9999px

採用主要墨色、低不透明度的細膩低對比邊框。

0 0 0 1px rgba(0, 0, 0, 0) · 0px 1px 1px 0px inset rgba(49, 38, 59, 0.14)

06

版面

1280container
12columns
24pxgutter
768 / 1024breakpoints

首頁主視覺區域採用居中內容欄位，產品細節則使用寬版內容網格。

07

動效與互動

220msmicro
250mssmall
400msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

hover 時平滑的背景色過渡。 · focus 狀態下的細膩透明度變化。 · 互動元素的變換效果。

細膩的背景色轉換或透明度變化。 · 透過背景或邊框過渡提供即時視覺回饋。

08

組件

09

文案語氣與禁用清單

10

包內真實截圖

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

擷取自真實頁面 · 真 computed styles

11

System Prompt

設計一個融合編輯優雅與技術嚴謹的進階 AI 分析平台。其品牌識別植根於信賴與洞見。色盤簡約而溫潤：米白色背景 (#FFFCFC)、深紫墨色文字 (#31263B)，以及細膩的玫瑰灰強調色 (#E28C8B)。字型方面，標題使用過渡式襯線體以增添分量，所有介面與內文則採用幾何無線條體。關鍵禁忌：勿使用霓虹強調色、勿使用幾何無線條體作為標題字、勿使用厚重陰影或 3D 效果。版面應居中且寬敞，強調可讀性與專業的數據呈現。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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