01
设计气质 DNA
作品集个人简洁极简专业设计导向
一个个人数字作品集，以最少干扰的方式展示产品设计和创意作品
02
色彩
#000000Ink#FFFFFFBG#888888Mutedrgba(0,0,0,0.1)Line高对比度的黑白色调，次要导航和文本使用柔和的灰色
03
字体
- display
48px · 500 - heading
24px · 500 - body
16px · 400
标题和标题使用几何无衬线字体 · 导航链接使用柔和灰色（#888888） · 元素间保持大间距以提供呼吸空间
04
间距
4px8px16px24px32px48px64px96px充裕的垂直间距，主标题元素周围留有显著空白
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 4px
lg · 8px
pill · 999px
主页面无可见边框；嵌入的项目截图中可能存在细边框
06
布局
1200container
12columns
24pxgutter
768 / 1024breakpoints
单列居中布局，留有充足留白和清晰的视觉层次
07
动效与交互
0msmicro
0mssmall
0msmedium
lineareasing
静态截图无可见动效或动画
导航链接在悬停时显示微妙下划线或颜色变化 · 标准链接导航行为
08
组件
- button 导航使用极简文本链接
- card 项目截图以设备框架（笔记本电脑、手机）形式在白色背景上呈现
- chip 主页面无可见标签组件
- input 主页面无可见输入字段
- hero 大型排版式主标题，包含姓名和年份，位于项目展示上方
09
文案语气与禁用清单
- 语气 专业、极简、自信
- 标题风格 采用大号粗体排版处理，字间距紧凑
- 按钮文案 细微的文本式导航，无突出行动号召按钮
- 不要使用多种颜色——截图显示严格的黑白灰配色
- 不要添加装饰元素——截图显示完全极简的设计
- 不要使用厚重阴影或 3D 效果——截图呈现扁平、简洁的展示
- 不要拥挤元素——截图显示整体留有充足空白
- 不要使用装饰性字体——截图显示简洁的几何无衬线字体
- 不要包含复杂导航——截图显示右上角简单的文本链接
- 避免: 避免杂乱布局、过度装饰或复杂视觉层次
11
System Prompt
这是 Mike Matas 的个人作品集网站，采用简洁、极简的设计，专注于排版和留白。网站使用严格的黑（#000000）白（#FFFFFF）配色方案，次要元素使用柔和灰色（#888888）。排版采用几何无衬线字体用于显示元素，人文无衬线字体用于正文，创造出清晰的视觉层次。布局特点为充裕的间距和居中容器，优先考虑可读性和项目展示。关键设计原则包括：绝对的极简主义（无装饰元素）、高对比度确保可读性，以及战略性使用留白创造视觉呼吸空间。关键设计约束包括避免色彩强调、复杂阴影或任何会分散作品集内容注意力的视觉干扰。该站点在交互设计上体现了克制，采用微妙的悬停状态和标准导航模式。