精选 · 开放 · 免费

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

标题使用衬线字体，以增加编辑的分量感。 · 所有正文和 UI 元素使用无衬线字体，确保清晰易读。 · 代码块严格使用等宽字体。

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

鼠标悬停时平滑的背景色过渡。 · 焦点状态下的微妙透明度变化。 · 交互元素的变换效果。

微妙的背景色变化或透明度改变。 · 通过背景或边框过渡提供即时视觉反馈。

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)。字体方面，标题使用过渡性衬线字体以增加分量感，所有 UI 和正文使用几何无衬线字体。关键禁忌：不要使用霓虹色点缀，不要在标题中使用几何无衬线字体，不要使用厚重的阴影或 3D 效果。布局应居中且宽敞，强调可读性和专业的数据呈现。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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