OpenDesign·你的设计资产库

网页参考

Quentinhocde

一个为交互开发者打造的、以高对比度排版为主导的作品集网站。

DeveloperTypographyPortfolioBold TypographyMonochrome
Quentinhocde 网站截图

01

设计气质 DNA

极简字体排印工艺聚焦开发者交互

一个面向创意技术专家的现代野兽派风格数字作品集。

02

色彩

#FFFFFFInk
#000000BG
rgba(255,255,255,1.0)Line

严格的单色配色,不含任何强调色,完全依靠字体大小与字重来建立视觉层次。

03

字体

geometric-sans · grotesque-sans

  • display-xl144px · 700
  • display-lg97px · 700
  • body16px · 400
  • caption10px · 400

大型展示文本使用紧凑的负字距,以营造紧凑、有力的视觉效果。 · 展示文本与导航链接广泛使用大写字母,以维持结构化的野兽派风格。 · 正文应保持标准的 16px,以确保在复杂背景下的可读性。

04

间距

4px
8px
12px
16px
20px
24px
32px
48px
64px

采用 4px 基础比例进行所有间距设计,其中 12px 和 20px 作为内部组件填充的主要边距。

05

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

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

无可见边框;通过空间布局和排版实现分隔。

06

布局

4columns
20pxgutter
768 / 1024breakpoints

全出血沉浸式布局,拥有复杂背景,包含固定顶部导航栏,内容分布于灵活网格中。

07

动效与交互

0msmicro
300mssmall
800msmedium
cubic-bezier(0.645, 0.045, 0.355, 1)easing

交互元素与背景组件应用带有轻微延迟的 transform 和 background-size 过渡。 · 背景纹理在不同状态间的细微变化暗示了持续、微妙的运动感。

交互元素使用 'cursor: pointer' 以指示可点击性,transform 过渡提供细微反馈。 · 标准指针事件,通过 CSS 过渡实现即时视觉状态变化。

08

组件

  • button 基于文本的链接,带有指针光标和大写样式,无传统按钮边框或背景。
  • card 无传统卡片;信息以浮动文本块形式直接呈现于背景之上。
  • chip 无可见的标签或芯片。
  • input 落地页上无可见表单输入框。
  • hero 全视口沉浸式区域,由覆盖在复杂纹理背景之上的、多行巨型排版式声明主导。

09

文案语气与禁用清单

  • 语气 专业、直接且自信,聚焦于工艺与技术能力。
  • 标题风格 大号、大写、字重粗重的排版式声明,作为主要视觉焦点。
  • 按钮文案 简洁、无装饰的文本链接,常使用外部链接图标表示导航至当前页面之外。
  • 不要引入第三种强调色——截图显示为严格的黑底白字单色配色。
  • 不要在大型文本上使用宽字距——截图显示为紧凑的负字距,以营造密集、野兽派的外观。
  • 不要对展示文本使用衬线或手写字型——截图显示主要标题均采用几何无衬线体。
  • 不要为交互元素应用边框、阴影或背景色——截图显示为纯文本链接。
  • 不要使用传统按钮组件——截图显示为大写文本链接配合指针光标。
  • 不要对主标题声明使用多栏网格——截图显示为单栏巨型排版区块。
  • 避免: 避免使用彩色强调色或渐变。
  • 避免: 避免使用装饰性或手写体字型。
  • 避免: 避免使用带边框或阴影的传统卡片式 UI 组件。
  • 避免: 避免使用会破坏沉浸感的大面积填充或留白。
  • 避免: 避免使用带背景填充的标准按钮组件。
  • 避免: 避免对核心声明使用小号、低调的排版。

10

包内真实截图

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

11

System Prompt

一个交互开发者的作品集网站,采用严格的单色配色(#000000 背景,#FFFFFF 文字)和粗重、野兽派的排版。设计依赖于巨型的、大写的展示字体(归类为几何无衬线体),并搭配简洁的怪诞无衬线体用于正文。布局沉浸且全出血,避免使用卡片或彩色按钮等传统 UI 组件。交互反馈通过平滑的 0.3s cubic-bezier 过渡实现。关键约束:绝不使用强调色,绝不在大型文本上使用宽字距,绝不使用带边框的传统按钮。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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