OpenDesign·你的设计资产库

网页参考

Bryntaylor

为产品与网站设计师打造的精致、高端的作品集与服务展示平台。

StudioCleanPremiumDesign ToolsTypography

预览暂时不可用,请通过原站查看。

01

设计气质 DNA

极简主义精致专业高端简洁

一个精心规划的工作室空间,每件工具与每个项目都拥有充足的呼吸空间。

02

色彩

#000000Ink
rgba(0,0,0,0.66)Ink soft
#ffffffBG
#f4f2f2BG soft
#d1d5dbBG quiet
rgba(0,0,0,0.55)Muted
rgba(0,0,0,0.08)Line

高对比度的单色基底,搭配温暖的米白色主色强调与微妙的灰色调以增加层次感。

03

字体

grotesque-sans

  • display72px · 500
  • heading48px · 500
  • subheading24px · 400
  • body16px · 400

大型展示文本使用紧凑的行高(1.0)。 · 正文使用适中的字间距(0.24px)。 · 在展示文本、标题与正文字号之间保持清晰的层级关系。

04

间距

4px
8px
16px
24px
32px
48px
56px
64px
80px
96px
160px

基于4px网格系统,采用慷慨、一致的间距,版块间设置大量垂直内边距。

05

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

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

使用rgba(0,0,0,0.08)绘制细薄、微妙的边框,用于分隔线与卡片边缘。

rgba(0, 0, 0, 0.08) 0px -2px 0px 0px inset · rgba(0, 0, 0, 0.08) 0px 0px 0px 0.75px

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

全宽版块,居中内容,配备充足的垂直内边距,并以清晰的水平线分隔主要内容块。

07

动效与交互

250msmicro
300mssmall
400msmedium
cubic-bezier(0.165, 0.84, 0.44, 1)easing

在悬停与聚焦状态下平滑地改变透明度与变换效果。 · 交互元素的微妙阴影过渡。

微妙的透明度或变换变化,通常伴随平滑过渡。 · 即时反馈,可能是缩放或透明度变化。

08

组件

  • button 极简的黑色胶囊形按钮,配以白色文字;或简洁的文字链接,带有箭头图标。
  • card 简洁的卡片,带有微妙的边框或阴影,包含图片缩略图与大号文字。
  • chip 极简的文字标签或徽章,例如顶部横幅中的“New”徽章。
  • input 在截图中未突出展示。
  • hero 大号居中文字,置于柔和的米白色背景上,配有充足的内边距,聚焦于设计师姓名与头衔。

09

文案语气与禁用清单

  • 语气 专业、自信、直接。
  • 标题风格 加粗、清晰、以效益为导向,使用大号、厚重的排版。
  • 按钮文案 以行动为导向且具体,使用简洁的黑色按钮或带箭头的文字链接。
  • 不要使用多种强调色——截图中显示的是严格的单色系配色,搭配温暖的米白色。
  • 不要使用装饰性或手写字体——截图中使用的是简洁的几何无衬线体。
  • 不要使用厚重的投影阴影——截图中使用的是微妙的内阴影或1px的浅阴影。
  • 不要使用狭小、拥挤的间距——截图中采用了充足的内边距与较大的垂直间距。
  • 不要将主标题文本左对齐——截图中将主标题居中对齐。
  • 不要使用直角矩形——截图中使用的是完全圆润的胶囊形或8-12px的微妙圆角。
  • 避免: 避免过于随意或冗长的语言。
  • 避免: 避免使用未经解释的复杂术语。
  • 避免: 避免杂乱的布局或相互竞争的视觉元素。

11

System Prompt

这是一个为产品与网站设计师打造的高端自由职业者作品集,定位为精致、专业的服务商。视觉语言是极简主义与单色系的,建立在严格的黑、白与柔和的米白色(#f4f2f2)配色方案之上,并以微妙的灰色调增加层次感。字体是简洁的几何无衬线体(Neue Montreal),并以大尺寸使用以增强冲击力。关键设计特征包括慷慨的间距、微妙的内阴影以及使用自定义cubic-bezier曲线的平滑过渡。关键禁忌:避免使用多种强调色,避免使用装饰性字体,避免使用厚重的投影阴影,避免使用拥挤的间距,以及避免主标题文本左对齐。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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