OpenDesign·你的设计资产库

网页参考

Slite

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

SaaSAIProductivityCleanCalm
Slite 网站截图

01

设计气质 DNA

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

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

02

色彩

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

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

03

字体

humanist-sans · geometric-sans

  • display56px · 600
  • h136px · 600
  • body16px · 400
  • small13px · 400

使用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

组件

  • button 药丸形、高对比度的主要按钮(橙色背景,白色文字)和幽灵按钮(带轮廓)。
  • card 浅色背景的卡片,带有微妙的阴影或轮廓,内含标题和列表。
  • chip 带图标的药丸形标签(例如“已验证”、“自动维护”),并配有柔和的背景色。
  • input 简洁、最小化的搜索或输入框,带有微妙的边框和圆角。
  • hero 居中的大标题,配有副标题、主要CTA按钮以及信任徽章(SOC 2、HIPAA、GDPR)。

09

文案语气与禁用清单

  • 语气 自信、清晰、乐于助人,专注于准确性和信任感。
  • 标题风格 直接、以利益为导向、略显正式,使用主动语态。
  • 按钮文案 以行动为导向并具有鼓励性(例如“保持您的文档最新”)。
  • 不要使用纯白背景——截图显示主要画布使用的是温暖的米白色(#FDF9F4)。
  • 不要使用橙色以外的主要强调色——截图显示CTA使用单一的醒目橙色(#F67748)。
  • 不要为标题使用衬线字体——截图始终使用干净的人文无衬线字体。
  • 不要为主要组件使用尖锐的矩形圆角——截图显示使用的是持续的圆角(6px至药丸形)。
  • 不要为首屏区域使用密集的多栏布局——截图显示的是宽敞、居中的单栏方式。
  • 不要使用深色模式或高饱和度的彩色背景——截图保持浅色、通透且中性的调色板。
  • 避免: 夸张的宣称
  • 避免: 充斥行话的解释
  • 避免: 激进或强迫性的语言

10

包内真实截图

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

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

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明,可复制给 Agent。