01
设计气质 DNA
作品集资深产品设计师案例研究简洁专业
一个以沉静自信和精准排版呈现的设计作品精选画廊
02
色彩
#393737Ink#F6F7F6BGrgba(57,55,55,0.5)Mutedrgb(57,55,55)Line中性暖灰色调，带有细微噪点纹理，让项目图像提供所有色彩
03
字体
- display
61px · 400 - heading
55px · 400 - subhead
24px · 400 - body
16px · 400 - small
14px · 400
所有文字统一使用 400 字重 · 大写字母仅少量用于标签和标记 · 展示尺寸采用紧凑行高以增强冲击力
04
间距
4px8px16px24px32px48px64px96px章节间采用宽裕的垂直间距，保持一致的 32px 和 96px 间隔，创造呼吸空间
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 48px
1px 实线深灰色（#393737）边框，按钮和标签采用宽裕的圆角药丸造型
06
布局
1280container
12columns
32pxgutter
768 / 1024breakpoints
单栏作品集布局，拥有宽裕内边距和居中内容
07
动效与交互
200msmicro
200mssmall
800msmedium
cubic-bezier(0.645, 0.045, 0.355, 1)easing
所有交互元素采用平滑 0.2s 过渡 · 所有过渡使用一致的 cubic-bezier 缓动
使用自定义 cubic-bezier 缓动在 0.2s 内进行微妙的透明度或颜色过渡 · 标准点击行为，指针光标应用于 23 个交互元素
08
组件
- button 药丸形轮廓按钮，宽裕内边距（16px 32px）和 48px border-radius，透明背景上的深色文字
- card 全宽项目展示，带有噪点纹理渐变背景和嵌入式浏览器截图
- chip 小号大写标签标记，1px 实线边框和紧凑内边距，用于分类
- hero 大型排版项目标题，包含年份范围、标签标记和描述性副标题，下方是全宽项目预览图
09
文案语气与禁用清单
- 语气 专业、含蓄且自信，不浮夸
- 标题风格 大型、简洁的 grotesque-sans 标题，包含年份范围，以克制优雅的方式呈现
- 按钮文案 简洁的、大写文字标签，置于药丸形轮廓按钮中
- 不要使用多种字重——截图显示全文统一使用 400 字重
- 不要添加装饰性图形或插图——截图仅显示排版和项目图像
- 不要在界面中使用鲜艳强调色——截图显示中性灰色，色彩仅来自项目内容
- 不要创建复杂的多栏布局——截图显示简洁的单栏居中布局
- 不要为卡片或元素添加投影——截图显示完全平面化、无阴影的表面
- 不要在任何地方使用衬线字体——截图仅显示线条干净的 grotesque-sans 字体
- 不要为按钮添加背景色——截图仅显示轮廓式药丸按钮
- 避免: 鲜艳色彩
- 避免: 装饰元素
- 避免: 复杂动画
- 避免: 杂乱布局
10
包内真实截图
11
System Prompt
这是一个资深产品设计师的作品集网站，具有简洁、含蓄的美学风格。设计使用中性暖灰色（#F6F7F6）背景，带有细微噪点纹理和深炭灰色（#393737）排版。所有文字使用 Neue Montreal（grotesque-sans 类别），字重 400，营造出一致且精致的视觉效果。项目标题以大尺寸（55-61px）展示，行高紧凑。布局为单栏，章节间拥有宽裕的 96px 间距。按钮为药丸形，具有 48px border-radius 和 1px 实线边框。界面本身不使用强调色——色彩完全来自项目展示图像。关键禁忌：永远不要使用多种字重，永远不要添加阴影，永远不要使用装饰性图形，保持严格的灰色调色板。网站优先考虑内容清晰度和呼吸空间，而非视觉复杂性。