OpenDesign·你的设计资产库

网页参考

Campsite

一款专注的团队沟通工具,用有序的帖子取代嘈杂的聊天。

SaaSProductivityCleanCalmRestraint
Campsite 网站截图

01

设计气质 DNA

深思熟虑专注团队沟通

一个安静、井然有序的团队帖子图书馆。

02

色彩

#fb432cAccent
#171717Ink
#737373Ink soft
#ffffffBG
#f5f5f5BG soft
#f0f0f0BG quiet
#a3a3a3Muted
rgba(0, 0, 0, 0.1)Line

高对比度极简主义:以深墨色为锚点的清爽白色界面,并用鲜明的橙红色强调关键操作。

03

字体

humanist-sans · monospace

  • display56px · 500
  • h232px · 600
  • body16px · 400
  • small14px · 400

大型展示文本采用负字距 · 正文使用常规字重 · 章节标题使用半粗体

04

间距

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

基于4px的统一基础网格

05

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

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

1px solid rgba(0, 0, 0, 0.1)

0px 3px 6px -3px rgba(0, 0, 0, 0.05) · 0px 1px 2px 0px rgba(0, 0, 0, 0.05) · 0px 1px 0px -1px rgba(0, 0, 0, 0.05)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

标准的营销网站布局,内容居中且留白充足。

07

动效与交互

100msmicro
200mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

悬停时平滑的颜色过渡 · 交互时细微的box-shadow变化

细微的颜色或背景变化。 · 即时的视觉反馈。

08

组件

  • button 圆润的药丸形状,采用描边或实心的主色。
  • card 干净的白色容器,带有细微边框和柔和阴影。
  • chip 带有细微背景的小型圆角标签。
  • input 带有浅色边框的标准文本输入框。
  • hero 居中的大标题,辅以支持性文案和产品截图。

09

文案语气与禁用清单

  • 语气 专业且平易近人。
  • 标题风格 简洁、直接、以利益为导向。
  • 按钮文案 简洁、行动导向的文本,置于圆角按钮内。
  • 不要使用深色或暗色模式背景——截图显示为明亮的白色界面(#ffffff)。
  • 不要使用尖锐的直角——截图显示的是药丸形状(9999px)和圆角卡片(8px–12px)。
  • 不要使用喧闹、复杂的渐变——截图显示的是干净的纯色背景,配以单一的橙色强调。
  • 不要使用过于装饰性或花哨的字体——截图显示的是简洁、功能性的无衬线字体。
  • 不要将元素拥挤排列——截图显示了充足的留白(基于4px网格)。
  • 不要使用生硬的投影——截图显示的是非常细微、低透明度的box-shadow。
  • 避免: 充满行话的语言
  • 避免: 过于喧闹或激进的营销文案
  • 避免: 视觉混乱

10

包内真实截图

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

11

System Prompt

Campsite是一款为远程团队打造的专注团队沟通工具。其设计基因建立在干净、高对比度的极简美学之上:明亮的白色(#ffffff)界面、深墨色(#171717)文本,以及用于主要操作的鲜明橙红色(#fb432c)强调色。字体采用人文无衬线类别,大型展示文本使用负字距。关键设计约束:不要使用暗色模式或复杂渐变,不要使用尖锐直角(始终使用圆润的药丸形状或柔和的圆角),并且不要拥挤布局(保持充足的留白)。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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