OpenDesign·你的设计资产库

网页参考

Cardsagainsthumanity

一款极简、对比强烈的热门派对游戏电商网站。

PlayfulConsumerBold TypographyEditorialClean
Cardsagainsthumanity 网站截图

01

设计气质 DNA

挑衅不羁成人派对游戏极简主义

一个装满惊人笑话的黑白分明盒子。

02

色彩

#FFFFFFInk
#000000BG
#808080Muted
rgba(255, 255, 255, 1)Line

仅使用高对比度的黑白两色,呼应实体产品。

03

字体

grotesque-sans

  • display80px · 800
  • heading55px · 800
  • subheading40px · 800
  • body20px · 400
  • small14px · 400

04

间距

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

基于4px增量的弹性网格。

05

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

sm · 4px
md · 13px
lg · 20px
pill · 999px

根据背景使用2px solid #FFFFFF或#000000

无

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

内容居中,留有充裕留白。

07

动效与交互

220msmicro
300mssmall
400msmedium
cubic-bezier(0, 0, 0, 1)easing

平滑滚动与悬停过渡。 · 用于卡片旋转的CSS transform。

文本链接的细微下划线或轻微背景变化。 · 直接导航。

08

组件

  • button 带下划线或圆形箭头图标的简洁文本链接。
  • card 旋转的白色矩形,配黑色文字,模仿实体扑克牌。
  • input 底部带边框的极简文本输入框。
  • hero 在纯黑背景上散落、重叠的实体卡片图形。

09

文案语气与禁用清单

  • 语气 不羁、直白且有意为之的挑衅。
  • 标题风格 超大号、加粗,采用小写或标准大写形式。
  • 按钮文案 极简、直接、不加修饰。
  • 不要使用粉彩或柔和颜色——截图显示为严格的黑白配色。
  • 不要使用衬线字体——截图显示为干净、加粗的无衬线字体。
  • 不要使用投影或柔和渐变——截图显示为扁平、高对比度元素。
  • 不要将卡片排列在严格网格中——截图显示其随意散落和旋转。
  • 不要使用常规内边距或外边距——截图显示为宽裕、有时重叠的留白。
  • 不要在主要元素上使用圆角——截图显示为直角或略带圆角的矩形卡片。
  • 避免: 柔和或粉彩颜色
  • 避免: 圆润友好的UI元素
  • 避免: 复杂动画
  • 避免: 衬线字体
  • 避免: 传统营销术语

10

包内真实截图

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

11

System Prompt

一个风格鲜明、不羁的派对游戏电商网站。使用严格高对比度的黑白配色(十六进制码#000000和#FFFFFF),不含强调色。字体采用加粗的 grotesque-sans-serif(如Helvetica Neue),字号巨大(可达80px)。布局特点是散落、重叠的卡片组件,并带有旋转角度。关键禁忌:绝不使用粉彩颜色,绝不使用衬线字体,绝不使用投影,绝不将元素排列在严格网格中,绝不使用常规柔和UI,绝不使用过多内边距。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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