01
设计气质 DNA
创意交互设计开发作品集3D
一个高端创意代理机构的作品集
02
色彩
#FFFFFFInk#000000BG#999999Mutedrgba(255, 255, 255, 0.1)Line采用高对比度的黑白配色，确保项目图像获得最大关注。
03
字体
- display
96px · 400
展示型衬线字体用于项目标题 · 小型几何无衬线字体用于导航和元数据 · 展示字体与正文字体之间保持高对比度
04
间距
4px8px16px24px32px48px64px96px使用充裕的留白来框定大型项目图像。
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 0px
pill · 0px
无可见边框；依赖图像边缘和对比度来界定区域。
06
布局
1440container
12columns
24pxgutter
768 / 1024breakpoints
全宽项目展示，搭配极简的界面框架，营造画廊般的体验。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
微妙的图像倾斜和hover效果
项目图像上产生微妙的缩放或位置偏移 · 直接导航至项目详情页
08
组件
- button 极简的文本链接，附带微妙的hover状态
- card 全出血图片卡片，带有文字叠加层
- hero 大型、略带倾斜的项目图像，居中放置展示型文字
09
文案语气与禁用清单
- 语气 专业、富有创意、风格内敛
- 标题风格 用于项目名称的大型优雅衬线字体
- 按钮文案 带箭头指示的极简文本链接
- 避免使用圆角 — 截图显示为锐利的矩形图像边缘
- 避免添加装饰性背景 — 截图显示为纯黑背景
- 避免使用彩色点缀 — 截图显示为单色调文字配色
- 避免使用复杂的导航 — 截图显示为极简的两项顶部菜单
- 避免使用狭小、拥挤的布局 — 截图显示为大型视觉元素周围有充裕间距
- 避免使用俏皮的字体 — 截图显示为优雅、精致的衬线字体排印
- 避免: 彩色渐变
- 避免: 杂乱的界面
- 避免: 过度装饰的元素
11
System Prompt
这是一个创意开发者的作品集网站，通过大型项目图像优先进行视觉叙事。设计采用高对比度的黑色（#000000）背景搭配白色（#FFFFFF）文字，营造画廊般的体验，让作品成为绝对核心。字体方面，使用优雅的过渡衬线字体作为展示标题，使用简洁的几何无衬线字体作为正文。关键约束：避免在任何元素上使用圆角，保持严格的单色色调板，不使用彩色点缀，并保持导航极度精简。布局应显得宽敞而精致，采用全出血的项目展示以吸引注意力。切勿添加与项目视觉元素竞争的装饰性元素。