OpenDesign·你的设计资产库

网页参考

Taiki Murayama

一个大胆的编辑式设计作品集,通过巨型字体、高对比度图像与极简界面元素来展示作品。

PortfolioStudioCleanTypographyEditorial
Taiki Murayama 网站截图

01

设计气质 DNA

设计作品集极简编辑风格高端

如同一个精心策划的设计师作品廊,以大胆的字体排印与克制的优雅呈现。

02

色彩

#42ff00Accent
#0b0b0fInk
#bbbbbbInk soft
#f7f7f7BG
rgba(11,11,15,1)Line

高对比度单色配色,搭配单一鲜艳强调色。采用浅色中性背景,以突出作品图像。

03

字体

geometric-sans · humanist-sans · monospace

  • display110px · 400
  • heading54px · 400
  • subhead34px · 400
  • body28px · 400
  • caption16px · 400

04

间距

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

宽松的编辑式节奏,通过充足的padding与间距营造开阔、透气的版式。

05

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

sm · 4px
md · 15px
lg · 300px
pill · 999px

内容板块之间使用近黑色的细实线作为主要分隔线。

06

布局

1440container
12columns
24pxgutter
768 / 1024breakpoints

非对称编辑式网格,通过叠加图像与大段文字打破传统栏式结构。

07

动效与交互

140msmicro
200mssmall
600msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

交互元素的平滑缩放与透明度过渡 · 图像集群的类parallax移动效果

元素在hover时轻微放大。 · 所有交互元素使用标准指针光标。

08

组件

  • button 极简的文本导航,当前项通过鲜艳的绿色背景块进行高亮。
  • card 图像以松散、叠加的集群方式呈现,无严格容器,漂浮于背景之上。
  • chip 不适用。
  • input 不适用。
  • hero 动态拼贴式构图,包含大面积叠加摄影与醒目、超大号的字体排印。

09

文案语气与禁用清单

  • 语气 自信、专业且具有艺术上的大胆气魄。
  • 标题风格 超大号、字距紧凑的几何无衬线体名称与标题。
  • 按钮文案 极简,依赖文本与单一星号图标,而非传统按钮形状。
  • 不使用投影——截图显示的是边缘清晰的平面图像。
  • 不使用卡片容器装载图像——截图显示图像自由漂浮并叠加。
  • 不使用多种字重进行强调——截图显示几乎只使用400字重,依赖字号建立层级。
  • 不将标题居中对齐——截图显示左对齐或非对称放置的文本。
  • 不使用多种强调色——截图仅显示一种鲜艳的绿色高亮。
  • 不使用密集的段落文本——截图显示简短、有力的陈述与列表。
  • 避免: 避免装饰性花饰或手写字体
  • 避免: 避免使用多种强调色
  • 避免: 避免密集的文本块或杂乱的布局
  • 避免: 避免使用卡片或模态框等标准UI组件模式
  • 避免: 避免繁复的背景或渐变
  • 避免: 避免使用投影来营造深度感

10

包内真实截图

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

11

System Prompt

这是一位创意总监的高端设计作品集,定位大胆且具有编辑风格的自信。其设计DNA基于严格的高对比度单色方案:极浅灰色背景(#f7f7f7)、近黑色墨迹(#0b0b0f),以及单一、克制使用的鲜艳绿色强调色(#42ff00)用于激活状态。字体排印以几何无衬线展示字体(Helvetica Neue)为主,使用巨大尺度(最大110px)与紧凑字距,搭配人文主义无衬线字体用于正文。版式为非对称、打破网格的构图,留白充足。关键禁忌:永远不使用投影,永远不将图像置于卡片容器中,永远不使用多种强调色。该网站采用宽松的编辑式节奏,并在交互中使用平滑过渡(cubic-bezier(0.4, 0, 0.2, 1))。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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