01
设计气质 DNA
极简专业干净作品集移动优先
一个安静的画廊空间,让作品自己说话。
02
色彩
#333333Ink#888888Ink soft#F5F5F5BGrgba(0,0,0,0.1)Line中性且克制,使用柔和的米白色背景来突出多彩的项目缩略图。
03
字体
- display
14px · 500 - body
16px · 400
导航和次要标签使用大写字母和字间距 · 正文使用标准句子大小写 · 保持字体尺寸相对较小且低调
04
间距
4px8px16px24px32px48px64px96px灵活的布局,项目卡片周围有充足的留白。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 24px
pill · 999px
细微或无边框,依靠阴影和间距来区分。
0 8px 32px rgba(0,0,0,0.08)
06
布局
1400container
12columns
32pxgutter
768 / 1024breakpoints
居中的头部,居中的项目卡片网格,居中的底部滚动指示器。
07
动效与交互
200msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
微妙的滚动指示器暗示垂直移动。 · 项目效果图的静态呈现。
项目卡片悬停时轻微抬升或缩放。 · 导航至详细的案例研究页面。
08
组件
- button 效果图内用于主要操作的极简胶囊形或矩形按钮,带有纯色背景(例如蓝色)。
- card 展示项目缩略图的大型圆角矩形,带有柔和阴影,作为主要的作品集网格项。
- hero 宽敞的顶部区域,包含设计师姓名、头衔和一个左对齐、居中、右对齐的“关于”链接。
09
文案语气与禁用清单
- 语气 专业、沉静且自信。
- 标题风格 低调、大写、加宽字间距的无衬线字体。
- 按钮文案 直接简单,如“向下滚动查看更多”或“关于”。
- 不要使用明亮、霓虹的颜色——截图显示的是柔和、中性的背景。
- 不要使用装饰性的衬线字体——截图显示的是干净、现代的无衬线字体排印。
- 不要创建杂乱的布局——截图显示的是充足的留白和聚焦的网格。
- 不要使用粗重的边框或轮廓——截图显示的是定义卡片边界的柔和阴影。
- 不要使用深色模式——截图显示的是明亮、米白色的背景。
- 不要对所有内容都使用粗大、醒目的字体——截图显示的是一个克制、小尺寸的字体系统。
- 避免: 刺眼的颜色
- 避免: 密集的文字
- 避免: 杂乱的布局
- 避免: 装饰性元素
- 避免: 花哨的字体
11
System Prompt
这是一个极简的产品设计作品集网站。它采用柔和的米白色背景(#F5F5F5),并使用深灰色(#333333)和柔和灰色(#888888)的人文主义无衬线字体排印。布局居中,留白充足,以干净的网格呈现项目效果图,具有大的圆角和柔和阴影。关键的禁忌包括避免深色模式、粗重边框、杂乱布局、明亮的霓虹色、装饰性衬线字体以及过于醒目的字体。整体美学是沉静、专业的,旨在让项目作品脱颖而出。