OpenDesign·你的设计资产库

网页参考

Frog

一个高端设计工作室网站,以高对比度深色首屏、纯净白色内容区与鲜明的衬线展示字体为特色。

StudioProduct

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

01

设计气质 DNA

创新设计机构高端数字

一家高端设计机构作品集,在极简主义与沉浸式摄影案例间取得平衡。

02

色彩

#000000Ink
#ffffffBG soft
#888888Muted
rgba(136,136,136,1)Line

采用严格的单色系色板,以绝对黑白为主,辅以中性灰用于次要文本。

03

字体

transitional-serif · grotesque-sans

  • display60px · 400
  • body16px · 400

展示性标题使用过渡衬线体。 · 所有正文与界面文本使用怪诞无衬线体。

04

间距

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

采用一致的4px基础栅格,主要区块间距为56px。

05

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

sm · 0px
md · 0px
lg · 16px
pill · 999px

使用白色或黑色的1px或2px细边框,形成微妙对比。

0px 0px 0px 0px rgba(0,0,0,0.6)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

满版首屏图片,下方为堆叠式内容区块。

07

动效与交互

200msmicro
350mssmall
700msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

平滑的淡入淡出过渡,用于透明度与可见性变化。 · 交互元素带有微妙的transform滑动效果。

光标变为指针,透明度发生细微变化。 · 提供即时视觉反馈。

08

组件

  • button 纯黑矩形配白色文字,圆角极小。
  • card 以图片为主,搭配叠加或相邻文字,边缘清晰。
  • chip 胶囊形圆角,带轮廓边框。
  • input 极简的下划线或边框样式。
  • hero 全视口摄影背景,居中衬线展示文字。

09

文案语气与禁用清单

  • 语气 专业、自信且具有权威性。
  • 标题风格 简短、有力,常采用衬线字体。
  • 按钮文案 直接且行动导向。
  • 不要使用鲜艳的霓虹色强调色——截图显示为严格的黑白调色板。
  • 不要为主要元素使用圆角——截图显示为锐利、方正的边缘。
  • 不要为标题使用活泼的无衬线字体——截图使用的是鲜明的衬线字体。
  • 不要让首屏区域过于拥挤——截图显示为一张简洁的单图配以极简文字。
  • 不要为主要区块使用灰色背景——截图依赖纯黑与纯白。
  • 不要使用复杂阴影——截图主要采用扁平化表面。
  • 避免: 避免使用活泼或非正式的语言。
  • 避免: 避免使用杂乱的布局。
  • 避免: 避免使用装饰性渐变。

10

包内真实截图

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

11

System Prompt

Frog 是一个高端设计工作室网站,以纯黑纯白构成的鲜明高对比度单色调色板为特色。排版上使用鲜明的衬线展示字体,搭配简洁的怪诞无衬线体作为正文。布局宽敞且具有编辑感,优先呈现大幅摄影内容与极简界面元素,让作品本身发声。关键十六进制颜色为 #000000 用于深色背景,#FFFFFF 用于浅色文字,#888888 用于次要信息。关键设计约束:避免在主要组件上使用圆角,避免使用鲜艳的强调色,不要使用装饰性渐变。整体保持专业且权威的语调。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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