OpenDesign·你的设计资产库

网页参考

Henry Codes

一个为丹佛网页开发者和设计师打造的、以排版驱动的大胆创意作品集。

PortfolioBold TypographyEditorialStudioDark Mode
Henry Codes 网站截图

01

设计气质 DNA

个人作品集创意网页开发者设计师丹佛大胆

一个大胆、实验性的创意作品集,感觉像是高端时尚社论与地下独立杂志的混合体。

02

色彩

#2A2722Ink
#FAFAFABG
#666666Muted
rgba(42,39,34,0.1)Line

高对比度单色调,具有极高的排版密度,并偶尔出现粗野主义的布局变化。

03

字体

transitional-serif · geometric-sans

  • display77px · 400
  • body16px · 400

04

间距

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

严格的 4px 基础单位,搭配充足的留白以平衡厚重的排版。

05

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

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

简单的 2px 实线边框或无边框;依赖间距和字体粗细来形成分隔。

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

全出血版块,在浅色和深色背景之间交替。

07

动效与交互

150msmicro
200mssmall
400msmedium
cubic-bezier(0.645, 0.045, 0.355, 1)easing

链接和交互元素上微妙的悬停过渡

微妙的颜色或宽度过渡。 · 即时响应,无弹跳或缩放效果。

08

组件

  • button 低调的文本式链接,带有悬停过渡效果。
  • card 简约、无边框的容器,依赖排版建立层次结构。
  • hero 巨大、超尺寸的排版,填满整个视口宽度。

09

文案语气与禁用清单

  • 语气 大胆、毫不妥协且高度个人化。
  • 标题风格 极具冲击力的超大号衬线排版,吸引注意力。
  • 按钮文案 低调的文本式行动号召,让内容自己说话。
  • 不要使用柔和、粉彩的颜色——截图显示的是高对比度单色调色板。
  • 不要使用俏皮、圆润的UI元素——截图显示的是锐利、粗野主义的排版。
  • 不要使用小而密集的网格——截图显示的是巨大的、全出血的排版布局。
  • 不要使用微妙、装饰性的图像——截图显示的是大胆、像素化或抽象的艺术。
  • 不要使用传统、保守的布局——截图显示的是实验性的、重叠的文本。
  • 不要使用单一背景色——截图在纯白和近黑色版块之间交替。
  • 避免: 通用的公司语言
  • 避免: 柔和或俏皮的设计元素
  • 避免: 传统的基于网格的布局

10

包内真实截图

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

11

System Prompt

该网站是一个为网页开发者和设计师打造的大胆、实验性的创意作品集。它采用高对比度单色背景(#FAFAFA 和 #2A2722),并搭配巨大的过渡衬线展示字体与几何无衬线正文字体。布局是粗野主义和社论式的,经常打破标准网格惯例。关键禁忌:不要使用柔和粉彩,不要使用俏皮圆润的UI,不要使用传统的小网格。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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