OpenDesign·你的设计资产库

网页参考

Studio Otto

一份鲜明、文字密集的 portfolio,通过严谨的单色与无衬线网格展示创意项目。

PortfolioAgencyCleanCurationGallery
Studio Otto 网站截图

01

设计气质 DNA

极简编辑式单色画廊机构

一本高端的极简画廊图录或一份鲜明的建筑作品集。

02

色彩

#010101Ink
#FFFFFFBG
rgba(1,1,1,1.0)Line

严格的单色调色板,通过纯粹的负空间和排版最大化对比度和可读性。

03

字体

grotesque-sans

  • body11px · 400
  • display11px · 400

标题和分类采用大写变换 · 所有文字元素采用紧凑、压缩的行高 · 严格的单色排版层级,仅通过字重、大小写和字间距定义

04

间距

4px
5px
15px
24px
32px
48px
64px
96px

紧凑的微间距系统,严重依赖 5px 和 15px 的 padding 增量,形成密集的网格。

05

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

sm · 0px
md · 0px
lg · 0px
pill · 0px

锐利的 1px 实线黑色边框,偶尔用于结构分隔。

06

布局

1440container
12columns
5pxgutter
768 / 1024breakpoints

密集、非对称的多栏网格,具有强烈的垂直对齐,文字紧密环绕元素。

07

动效与交互

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

hover 状态下平滑的 0.6 秒背景过渡

交互式文字元素上的细微背景过渡或状态变化。 · 通过指针光标直接导航。

08

组件

  • button 基于文字的交互元素,使用指针光标,通常是大写的无衬线链接。
  • card 由排版和空白定义的非对称网格单元格,而非容器。
  • chip 无
  • input 无
  • hero 大量负空间将主要文字和图像网格推向底部或偏中心。

09

文案语气与禁用清单

  • 语气 超然、专业且严格信息性。
  • 标题风格 简短、大写、宽字距的无衬线分类标签。
  • 按钮文案 隐含的、基于文字的导航,不使用传统按钮组件。
  • 不要使用投影——截图显示的是完全扁平、无边框的元素。
  • 不要使用圆角——截图显示所有可见表面都是严格的矩形。
  • 不要使用宽泛的排版比例——截图显示的是高度统一的小号文字。
  • 不要使用高饱和度的强调色——截图显示的是严格的黑白单色板。
  • 不要使用大型居中的主标题区——截图显示文字块嵌套在密集、底部偏重的网格中。
  • 不要使用宽松的 padding——截图显示紧凑的 5px 和 15px 增量形成了密集的视觉节奏。
  • 避免: 情感化语言
  • 避免: 装饰性元素
  • 避免: 传统 UI 组件

10

包内真实截图

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

11

System Prompt

一个为创意机构设计的、鲜明、极简的 portfolio,依赖于大量的空白和一个推向视窗底部的密集、文字密集型网格。视觉语言严格单色,使用近黑 (#010101) 墨水在纯白 (#FFFFFF) 背景上。排版仅为紧凑的无衬线体,统一设置为小号 (11.5px),通过大写和增加字间距建立层级。避免使用传统 UI 组件、圆角、投影或任何高饱和度的强调色;设计纯粹依赖非对称的网格布局和紧凑的排版间距来创建结构。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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