OpenDesign·你的设计资产库

网页参考

Are.na

一个以文本为核心、极简的网页应用,用于保存、组织和连接数字内容。

ToolingCommunityMinimal
Are.na 网站截图

01

设计气质 DNA

极简编辑性策展社区知识

一本干净的数字杂志或图书馆目录,用于组织想法。

02

色彩

#00075fAccent
#333333Ink
#696969Ink soft
#ffffffBG
#f7f7f7BG soft
#edededBG quiet
#999999Muted
rgba(222,222,222,1.0)Line

高对比度的黑白配色,点缀色使用克制。

03

字体

system-sans

  • display32px · 700
  • body16px · 400
  • small12px · 400

正文中使用粗体进行强调。 · 标题使用紧凑行高,正文使用宽松行高。

04

间距

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

基于4px增量的统一垂直间距。

05

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

sm · 3px
md · 5px
lg · 8px
pill · 999px

1px solid #dedede

06

布局

800container
1columns
16pxgutter
768 / 1024breakpoints

面向阅读内容的单栏居中布局。

07

动效与交互

125msmicro
250mssmall
400msmedium
cubic-bezier(0.25,0.1,0.25,1)easing

内容揭示时使用平滑淡入效果。 · 交互元素悬停时使用细微变换效果。

背景色或文本样式的细微变化。 · 提供即时响应和最小化视觉反馈。

08

组件

  • button 带有微妙边框和中性背景的简洁按钮,或仅为极简文本按钮。
  • card 用于分组相关内容(如价格层级)的带边框容器。
  • chip 用于元数据或状态的极简圆角标签。
  • input 带有微妙边框的简洁文本输入框,用于搜索或登录。
  • hero 以文本为主、包含居中加粗陈述的介绍性区域。

09

文案语气与禁用清单

  • 语气 深思熟虑、直接且略带哲理性。
  • 标题风格 用于引入概念的粗体简洁陈述。
  • 按钮文案 简洁、低强调度的按钮,鼓励探索。
  • 不要使用多种强调色——截图显示仅使用一种深海军蓝作为强调色且用法克制。
  • 不要使用装饰性衬线字体——截图显示使用简洁、中性的无衬线字体族。
  • 不要使用大圆角——截图显示卡片采用微小的3px至5px圆角。
  • 不要使用厚重投影——截图显示完全平坦、无高程的界面。
  • 不要使用复杂网格或多栏布局——截图显示为单栏居中阅读路径。
  • 不要使用鲜艳的背景——截图显示主要为白色和极浅灰色背景。
  • 避免: 避免使用喧嚣、激进的营销语言。
  • 避免: 避免在主要界面中使用复杂的多步骤用户流程。
  • 避免: 避免使用鲜艳的霓虹色或复杂的渐变效果。
  • 避免: 避免使用分散文本注意力的沉重装饰性图像。
  • 避免: 避免使用大于8px的圆角。
  • 避免: 避免使用投影或厚重的界面层级。

10

包内真实截图

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

11

System Prompt

为Are.na设计,这是一个以文本为核心、极简的网页应用,用于策展数字内容。使用高对比度的黑白配色板,搭配单一深海军蓝强调色(#00075f)。采用简洁的系统原生无衬线字体以确保可读性。保持布局简洁居中,专注于排版和留白。关键注意事项:不要使用多种强调色,不要使用装饰性衬线字体,不要使用厚重投影或复杂网格。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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