OpenDesign·你的设计资产库

网页参考

Counter Print

面向设计专业人士的极简主义、图像优先精选书店。

EditorialCurationTypographyBooksPremium
Counter Print 网站截图

01

设计气质 DNA

精选设计书籍平面设计参考资料

平面设计文献的数字画廊

02

色彩

#1C1C1CInk
#FFFFFFBG
rgba(229,231,235,1.0)Line

严格的单色画布,让多彩的书籍封面成为主要视觉焦点。

03

字体

grotesque-sans

  • display63px · 700
  • body15px · 400

对标题尺寸使用紧凑的负字距以增强视觉冲击力。 · 仅通过字重和字号(而非颜色)建立严格的视觉层级。

04

间距

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

充裕的垂直内边距分隔内容区块,紧密的水平间距将相关项目分组。

05

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

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

1px solid rgb(229,231,235)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

简洁的网格布局,依靠大尺寸高质量摄影填充画布。

07

动效与交互

220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

交互元素上的平滑透明度与变换过渡。

通过过渡属性实现的微妙视觉变化,可能是透明度或变换。 · 即时响应,配合标准手形光标反馈。

08

组件

  • button 用于“查看全部”等次级操作的幽灵/描边按钮,采用胶囊形圆角。
  • card 边缘到边缘的图像卡片,紧密嵌入网格列中,强调产品摄影。
  • hero 采用双栏分割布局,展示大型产品摄影与醒目、简洁的文本分类。

09

文案语气与禁用清单

  • 语气 专业、极简且高度策展化。
  • 标题风格 加粗、字距紧凑、描述性强。
  • 按钮文案 低调,使用清晰的功能性语言与胶囊形描边按钮。
  • 勿为 UI 元素使用装饰性或衬线字体——截图显示严格的几何/无衬线字体体系。
  • 勿为按钮或高亮使用明亮的强调色——截图显示严格的单色 UI,无主导性强调色。
  • 勿应用厚重的投影或柔和的光晕——截图显示完全扁平的表面,无阴影使用。
  • 勿为主要内容卡片使用圆角——截图显示产品图像与布局区块均为直角。
  • 勿使用两端对齐或密集的大段文本——截图显示左对齐文本与充裕的垂直间距。
  • 勿添加不必要的边框或分隔线——截图使用留白和网格对齐分隔区域。
  • 避免: 过度营销语言
  • 避免: 杂乱的布局
  • 避免: 装饰性字体

10

包内真实截图

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

11

System Prompt

为精选平面设计书店设计的极简主义高端电商设计。UI 采用严格的单色调色板(#FFFFFF 背景,#1C1C1C 墨色),确保多彩书籍封面保持视觉焦点。排版依赖清晰、字距紧凑的无衬线字体(Helvetica/Arial),使用加粗、大尺寸标题。关键禁忌:绝不使用装饰性字体,绝不应用厚重阴影,绝不引入与产品竞争的明亮强调色。布局为网格制,内边距充裕,次级操作使用幽灵/胶囊按钮。交互模式微妙,依赖平滑的透明度与变换过渡。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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