OpenDesign·你的设计资产库

网页参考

Bond

一个粗犷、高活力的创意机构网站,运用超大号字体与鲜明的珊瑚色点缀,打造引人注目、富有表现力的作品集展示。

BrandStudio

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

01

设计气质 DNA

创意机构高活力粗犷趣味性作品集

一个粗犷、充满活力的创意工作室,运用表现力字体与鲜明色彩来吸引注意力。

02

色彩

#FF5D60Accent
#000000Ink
#333333Ink soft
#FFFFFFBG
#555555Muted
rgba(0, 0, 0, 1)Line

高对比度,搭配鲜明的珊瑚色点缀与摄影背景。

03

字体

grotesque-sans

  • display123px · 700
  • heading70px · 700
  • body18px · 700
  • small12px · 400

大多数文本元素使用粗体(700)。 · 标题类文本使用紧凑的行高。 · 导航与标签使用大写字母。

04

间距

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

大号字体周围使用充裕的内边距,UI元素之间使用紧凑的间距。

05

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

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

1px solid #000000

0 0 10px 0 rgba(0, 0, 0, 0.12) · 0 0 20px 0 rgba(0, 0, 0, 0.1)

06

布局

1440container
12columns
24pxgutter
768 / 1024breakpoints

全宽图片主视觉后接大号字体章节。

07

动效与交互

220msmicro
400mssmall
800msmedium
cubic-bezier(0.77, 0, 0.175, 1)easing

悬停状态与菜单交互的平滑过渡。 · 字体的视差或滚动触发动画。

按钮颜色反转或背景色变化。 · 微妙的尺寸缩放或透明度变化。

08

组件

  • button 药丸形按钮,采用珊瑚色背景配白色文字,或白色背景配黑色文字与黑色边框。
  • card 极简卡片,包含大号字体与摄影元素。
  • chip 药丸形标签或标记。
  • input 极简表单输入框,带有黑色边框。
  • hero 全屏摄影主视觉,叠加文字或极简页头。

09

文案语气与禁用清单

  • 语气 自信、直接、略带趣味。
  • 标题风格 超大号、粗体,常采用小写或句首大写。
  • 按钮文案 行动导向,配有箭头图标。
  • 不要使用微妙或低调的字体——截图显示的是超大号、粗体的标题。
  • 不要使用柔和或粉彩的配色——截图显示的是鲜明的珊瑚色点缀(#FF5D60)和高对比度的黑白配色。
  • 不要使用没有大号字体的复杂网格——截图显示的是充裕的留白和超大号文本。
  • 不要使用衬线字体作为标题——截图显示的是粗犷的无衬线字体。
  • 不要使用小而密集的段落——截图显示的是简短、有力的文案和较大的行高。
  • 不要为大多数元素使用圆角——截图显示的是直角边缘或药丸形按钮。
  • 避免: 微妙或低调的字体。
  • 避免: 柔和或粉彩配色。
  • 避免: 没有大号字体的复杂网格或布局。
  • 避免: 没有清晰、富有表现力主题的图库摄影。
  • 避免: 用于标题的衬线字体。
  • 避免: 小而密集的段落文本。

10

包内真实截图

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

11

System Prompt

这是一个粗犷、高活力的创意机构网站。使用鲜明的珊瑚色点缀(#FF5D60),搭配黑白分明的配色。字体是主要的设计驱动力,使用粗犷的无衬线字体作为超大号标题和正文。布局充裕,注重留白,聚焦于大号字体和摄影元素。避免微妙或低调的设计选择、柔和的色彩,以及没有大号字体的复杂网格。确保所有交互元素都有平滑、可见的过渡,并保持自信、直接的语调。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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