精选 · 开放 · 免费

Slite

一个由AI驱动的知识库，能与团队实际情况保持同步且准确无误。

SaaSAIProductivityCleanCalm
Slite 网站截图
↓ 下载设计系统包 (13 MB)在 OpenDesign 中打开

原站: https://slite.com

📦 浏览包内文件 →

01

设计气质 DNA

知识已验证同步准确性信任

一个组织有序、值得信赖的图书馆，承载着团队的集体智慧。

02

色彩

#F67748Accent
#3F434AInk
#2D2F34Ink soft
#FDF9F4BG
#FFFFFFBG soft
#A8AAAFMuted
rgba(244,244,244,1.0)Line

温暖、高对比度的中性色营造出亲切而专业的氛围，并以单一的醒目橙色作为主要操作的强调色。

03

字体

humanist-sans · geometric-sans

使用display和h1令牌用于主次标题，以维持视觉层级。 · 正文文本保持1.6的一致行高，以确保可读性。 · 对导航和徽章等UI元素使用small令牌，使其不显突兀。

04

间距

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

基于4px的网格系统，主要区域采用宽大的内边距（120px），营造开阔、通透的布局。

05

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

sm · 6px
md · 10px
lg · 16px
pill · 999px

1px solid rgba(244,244,244,1.0)

rgba(0, 0, 0, 0.3) 0px 32px 68px 0px · rgba(0, 0, 0, 0.06) 0px 1px 0px 0px

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

居中的单栏首屏区域，下方为三栏特性网格。

07

动效与交互

220msmicro
400mssmall
800msmedium
cubic-bezier(0.215, 0.61, 0.355, 1)easing

针对页面加载和滚动触发元素的微妙淡入和上滑动画。 · 按钮和交互元素上平滑的悬停过渡效果。

按钮和链接上微妙的背景色变化或阴影增强。 · 即时视觉反馈（例如按钮按下或颜色变化）。

08

组件

09

文案语气与禁用清单

10

包内真实截图

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

抓自真实页面 · 真 computed styles

11

System Prompt

Slite是一款B2B SaaS产品，定位为一个值得信赖的、由AI驱动的团队知识库。设计干净、专业且亲切，使用温暖的米白色（#FDF9F4）背景、深灰色（#3F434A）文本，以及单一的醒目橙色（#F67748）作为主要操作的强调色。字体使用干净的人文无衬线字体族（如UniversalSans），标题采用大而粗的显示字体。布局宽敞且居中，拥有宽大的内边距和三栏特性网格。关键禁忌：永远不要为使用主画布使用纯白背景；不要引入超过一个主要强调色；永远不要为显示文本使用衬线字体；避免卡片和按钮上使用尖锐的圆角；不要创建没有充足留白的密集布局；不要在标题中使用激进或夸张的语言。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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