OpenDesign·你的设计资产库

网页参考

Sanity

一个为结构化内容操作和开发者灵活性而设计的现代 headless CMS 平台。

EditorialCleanDeveloper ToolsRefinementTooling

封面待补录，可通过原站查看设计。

01

设计气质 DNA

内容基础设施开发者优先结构化内容AI 驱动企业级规模

数字内容的操作系统，连接编辑工作流与开发者工具。

02

色彩

#ff5400Accent
#ffffffInk
#b9b9b9Ink soft
#0b0b0bBG
#151515BG soft
#797979Muted
rgba(255,255,255,0.1)Line

以高对比度为基础，搭配单一鲜明的强调色，以形成清晰的层级和操作指引。

03

字体

transitional-serif · humanist-sans · geometric-mono

  • display72px · 400
  • headline40px · 400
  • body16px · 400
  • caption12px · 400

04

间距

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

基于 4px 的统一空间系统，确保紧凑、有目的的对齐。

05

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

sm · 4px
md · 8px
lg · 12px
pill · 99999px

细微的 1px 边框或 1px 内嵌描边；依赖背景对比来表现深度。

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

用于功能展示的非对称分栏，以及用于沉浸式主区域的全宽背景。

07

动效与交互

150msmicro
300mssmall
600msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

交互状态采用平滑的颜色和透明度过渡 · 使用标准缓动曲线以提供可预测的反馈 · 内容揭示使用透明度渐隐

背景颜色或边框颜色立即过渡，以保持清晰。 · 轻微降低透明度以提供触觉反馈。

08

组件

  • button 主要操作使用药丸形实心强调色填充；次要操作使用轮廓药丸形。
  • card 内容区块置于中性背景上，以最小化边框干扰。
  • chip 用于分类和状态的等宽大写标签。
  • input 带有等宽标签的简洁带边框输入框。
  • hero 大号字体搭配深色、富有氛围感的图像。

09

文案语气与禁用清单

  • 语气 专业、技术化且自信。
  • 标题风格 简短、陈述性的语句，强调结构与智能。
  • 按钮文案 直接且以行动为导向，例如“开始构建”或“联系销售”。
  • 不要在标题中使用普通无衬线字体——截图显示使用了一种独特的过渡衬线展示字体。
  • 不要依赖浅灰色作为主要背景——截图显示使用的是深邃、高对比度的黑色。
  • 不要为主要 CTA 使用圆角方形——截图显示使用的是独特的药丸形按钮。
  • 不要避免为元数据使用等宽字体——截图显示其在导航中被广泛使用。
  • 不要使用多色配色方案——截图显示其专注于单一的亮橙色强调色。
  • 不要在主区域堆积过多文字——截图显示使用了大量留白的大号字体和极简的辅助文案。
  • 避免: 营销套话或模糊承诺
  • 避免: 俏皮或过于随意的语言
  • 避免: 缺乏上下文的行业术语
  • 避免: 激进的销售策略

10

包内真实截图

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

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

11

System Prompt

Sanity 是一个开发者优先的 CMS 平台。设计语言在深邃的黑色 (#0b0b0b) 与清晰的白色及一个鲜明的橙色强调色 (#ff5400) 之间取得平衡。字体搭配上，粗体标题使用过渡衬线体，正文使用清晰的人文主义无衬线体，UI 元素则使用几何等宽体。布局宽敞且专注，强调清晰度。关键约束：严格遵守 4px 网格；绝不使用多种强调色；主要按钮始终使用药丸形状。语调专业且技术化。避免任何视觉杂乱或俏皮元素。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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