OpenDesign·你的设计资产库

网页参考

Contentful

一个专注于企业内容管理和个性化的专业SaaS平台。

CMSDeveloper Tools
Contentful 网站截图

01

设计气质 DNA

内容管理开发者平台企业级个性化数字体验

为开发者和内容团队打造的简洁、专业的工作空间，强调清晰与高效。

02

色彩

#3C80CFAccent
#2B2D31Ink
#6D7682Ink soft
#FFFFFFBG
#F5F7F9BG soft
#E4EFF8BG quiet
#55575BMuted
rgba(229, 231, 235, 1)Line

专业克制，辅以柔和的蓝色点缀配色方案，以实现清晰度和可信度。

03

字体

humanist-sans · monospace

  • display72px · 400
  • heading56px · 400
  • body-lg18px · 400
  • body16px · 400
  • small14px · 600

标题采用紧凑的负字间距以增强视觉冲击力。 · 正文保持充足的行高以确保可读性。 · 字体权重主要使用常规（400），UI元素使用半粗体（600）。

04

间距

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

网格项和章节之间保持一致的32px间距。

05

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

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

1px solid #E5E7EB

rgba(0, 0, 0, 0.25) 0px 0px 20px 0px

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

居中内容区，配有宽导航栏和充足的垂直内边距。

07

动效与交互

100msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

hover时平滑的颜色和背景色过渡。 · UI状态变化时的变换和透明度过渡。

文本链接的颜色变化和按钮的背景变化。 · 细微的变换或透明度降低。

08

组件

  • button 胶囊形主按钮，采用深色实心背景配白色文字，或描边样式的次级按钮。
  • card 简洁容器，带有细微边框或柔和背景，用于功能展示和客户评价。
  • chip 小型胶囊形元素，带图标，用于功能标签或导航。
  • input 简洁、极简的输入框，带有细微边框和圆角。
  • hero 大型、具有冲击力的标题，搭配柔和彩色背景上的辅助插图或照片。

09

文案语气与禁用清单

  • 语气 专业、自信且略带技术感，旨在赋能开发者和营销人员。
  • 标题风格 直接、以利益为导向，有时略带趣味性（例如主标题中的'whatever'）。
  • 按钮文案 行动导向的动词，如'探索'、'登录'、'联系销售'。
  • 不要使用衬线字体——截图显示全文使用简洁的人文无衬线字体。
  • 不要使用霓虹色或高饱和度的点缀色——截图显示使用柔和的专业蓝色（#3C80CF）作为主要强调色。
  • 不要在背景中使用复杂渐变——截图显示主要为纯白色或非常柔和、扁平的色块区域（#F5F7F9、#E4EFF8）。
  • 不要到处使用厚重、深色的边框——截图显示使用浅色、细微的边框（#E5E7EB）或无边框设计。
  • 不要使用过紧的正文行距——截图显示舒适、可读的行高（约1.55）。
  • 不要在按钮或卡片上使用尖锐的90度直角——截图显示一致使用圆角（4px至999px）。
  • 避免: 过度随意的俚语
  • 避免: 被动语态
  • 避免: 缺乏数据支撑的模糊承诺

10

包内真实截图

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

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

11

System Prompt

这是Contentful的主页，一个专注于企业内容管理的专业SaaS平台。设计简洁、克制，聚焦于清晰度。关键颜色包括白色背景（#FFFFFF）、柔和灰色区块（#F5F7F9）和主要蓝色强调色（#3C80CF）。字体使用人文无衬线字体（Avenir Next），配有大号、间距紧凑的展示标题和舒适的正文。关键注意事项：不要使用衬线字体，不要使用霓虹色，不要使用厚重的深色边框，不要使用尖锐直角，不要使用过紧的正文行距，不要使用复杂的背景渐变。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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