OpenDesign·你的设计资产库

网页参考

Christopherireland

为摄影师和导演打造的精致作品集,具有严格的编辑克制

PortfolioPhotographicEditorialCleanRefined
Christopherireland 网站截图

01

设计气质 DNA

极简主义编辑式摄影导演

高端印刷杂志版式移植到网络

02

色彩

#000000Ink
#5D5B5BInk soft
#F2F1ECBG
#BBBBBBMuted
rgba(0,0,0,1)Line

在温暖的米白色底上,使用严格的单色墨色,无任何色彩点缀

03

字体

didone-serif · geometric-sans · monospace

  • display96px · 400
  • heading63px · 400
  • body16px · 400

04

间距

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

充足的垂直间距,头部统一使用 30px 内边距

05

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

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

一条 1px 水平线分隔头部与内容区域

06

布局

1200container
12columns
24pxgutter
768 / 1024breakpoints

双栏布局,左侧为文本导航,右侧为大尺寸特写图片

07

动效与交互

200msmicro
300mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

交互状态使用平滑的背景色和透明度过渡

文本链接和分类标题上的微妙过渡 · 直接导航到相应版块

08

组件

  • button 基于文本的导航链接,悬停时带简单下划线
  • card 无;内容以扁平列表呈现,带有大号分类标题
  • chip 无
  • input 无
  • hero 全宽、以排版为主导的头部,突出摄影师姓名

09

文案语气与禁用清单

  • 语气 精致、沉静、专业
  • 标题风格 大号、全大写或标题式大小写的衬线字体排版
  • 按钮文案 含蓄的文本链接
  • 不要使用鲜艳的点缀色 —— 截图显示的是严格的黑白搭配米色的调色板
  • 不要使用圆角 —— 截图显示的是完全扁平、矩形的美学
  • 不要使用投影 —— 截图显示的是没有深度效果的简洁布局
  • 不要使用小而密集的段落 —— 截图显示的是充足的留白和大标题
  • 不要为标题使用装饰性无衬线字体 —— 截图使用高对比度衬线字体作为展示
  • 不要使用复杂的网格叠加 —— 截图依赖于简单的对齐和留白
  • 避免: 明亮色彩
  • 避免: 装饰性元素
  • 避免: 繁杂背景

10

包内真实截图

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

11

System Prompt

本网站是为一位名为 Christopher Ireland 的摄影师和导演打造的精致作品集。设计内核建立在严格的编辑克制之上,采用温暖的米白色 (#F2F1EC) 背景和纯粹的单色墨色 (#000000, #5D5B5B)。排版是主要的表现工具,大号展示标题使用 Didone 衬线字体,正文使用几何无衬线字体。布局特点是极其充足的留白和简洁的双栏结构。关键限制包括避免任何鲜艳的色彩点缀,消除圆角或投影以保持扁平、印刷感,以及避免任何复杂的装饰性 UI 组件。整体基调是精致而沉静的。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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