OpenDesign·你的设计资产库

网页参考

Wgsn

全球领先的趋势预测平台。

PremiumEditorialProductivityCurationAgency

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

01

设计气质 DNA

趋势预测未来洞见高端

高端时尚编辑杂志与企业级 SaaS 仪表盘的结合。

02

色彩

#000000Ink
rgba(0,0,0,0.6)Ink soft
#FFFFFFBG
#F5F5F5BG soft
#999999Muted

以高对比度黑白为基底的单色方案,让图像提供主要色彩。

03

字体

humanist-sans · monospace

  • display56px · 700
  • h248px · 400
  • body18px · 400

所有文本层均使用 DM Sans。 · 保持正文易读性,采用充裕的行高。 · 大型展示文本使用紧凑的字间距。

04

间距

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

充裕的留白,以体现高端定位。

05

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

sm · 4px
md · 16px
lg · 40px
pill · 999px

1px 细边框,颜色为 rgba(0,0,0,0.6)。

rgb(0, 0, 0) 0px 0px 0px 1px inset

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

标准的居中容器,采用分屏式首屏布局。

07

动效与交互

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

交互元素上平滑的背景色过渡。

按钮与链接的背景色变化。 · 即时的视觉反馈。

08

组件

  • button 药丸形按钮,圆角半径 40px,采用高对比度(白底黑字或黑底白字)。
  • card 圆角矩形(16px 半径),包含图像与文字叠加层。
  • chip 不适用
  • input 不适用
  • hero 大型分屏布局,一侧为趋势图像拼贴,另一侧为醒目的字体排印。

09

文案语气与禁用清单

  • 语气 权威、富有远见且专业。
  • 标题风格 简短、有力且面向未来(例如:“创造明天”)。
  • 按钮文案 直接且以行动为导向(例如:“申请演示”)。
  • 不要使用明亮的霓虹色——截图显示为严格单色的黑白基底。
  • 不要使用尖锐的 0px 圆角——截图显示为药丸按钮(40px)和圆角卡片(16px)。
  • 不要在标题中使用宽字间距——截图显示为紧凑的字间距(-1px)。
  • 不要在标题中使用细字体——截图显示为粗体/半粗体的展示文字。
  • 不要使用杂乱的背景——截图中的章节使用纯黑、纯白或浅灰色。
  • 不要使用小而紧凑的文本——截图使用充裕的 18px 正文,行高较高。
  • 避免: 随意俚语
  • 避免: 被动语态
  • 避免: 过于技术化的行话

10

包内真实截图

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

11

System Prompt

WGSN 是一个高端的 B2B 趋势预测平台,采用精致的编辑式设计语言。其色彩方案严格单色,使用纯黑(#000000)和纯白(#FFFFFF),并利用半透明黑色构建层次,灰色(#999999)用于柔和元素。字体排印完全使用 DM Sans,一种人文主义无衬线字体,从粗体 56px 标题到 18px 正文。按钮为药丸形(40px 半径),填充色对比度高。布局宽敞居中,强调大型趋势图像。关键约束:绝不使用强调色,绝不为按钮使用尖锐圆角,绝不让文本显得紧凑。在所有文案中保持权威而富有远见的语调。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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