01
设计气质 DNA
作品集极简简洁编辑
画廊目录
02
色彩
#5046E5Accent#1A1A1AInk#4A4A4AInk soft#FFFFFFBG#F8F8FCBG soft#7A7A7AMutedrgba(0, 0, 0, 0.1)Line高对比度黑白配色，辅以单一深靛蓝强调色用于链接和交互元素。
03
字体
- display
48px · 500 - headline
24px · 500 - body
16px · 400
使用简洁的几何无衬线字体作为标题和正文文本。 · 使用等宽字体用于导航和特定标签。
04
间距
4px8px16px24px32px48px64px96px严格的4px网格，配合充裕留白
05
表面 (圆角 / 阴影 / 边线)
sm · 2px
md · 4px
lg · 8px
pill · 999px
1px solid rgba(0,0,0,0.1)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
简洁的单栏网格用于作品集列表，条目间留有充足内边距。
07
动效与交互
200msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
内容加载时采用微妙的淡入效果
链接通过改变透明度或颜色至强调色来响应悬停。 · 标准指针光标。
08
组件
- button 药丸形导航按钮，采用纯色背景填充。
- card 水平布局，文本居左，预览图居右，以细边框分隔。
- chip 小型等宽字体标签，用于项目分类。
- input 不可见。
- hero 简洁的大尺寸左对齐排版，不含图像。
09
文案语气与禁用清单
- 语气 冷静、专业、专注。
- 标题风格 直接且无装饰，使用大号无衬线字体。
- 按钮文案 极简风格，使用纯色背景的药丸形等宽字体按钮。
- 避免使用复杂渐变——截图显示为纯色背景。
- 避免使用投影——截图显示为扁平、干净的表面。
- 避免使用超出轻微圆角的圆角——截图显示为锐利或略微圆润的边缘。
- 避免使用多种强调色——截图显示为单一靛蓝强调色。
- 避免使用居中文本——截图显示为左对齐布局。
- 避免在主要文本中使用衬线字体——截图显示为几何无衬线字体。
- 避免: 装饰元素
- 避免: 花哨动画
- 避免: 复杂渐变
11
System Prompt
这是一个网页设计师与开发者的极简作品集网站。设计基于高对比度、干净的黑白调色板，辅以单一深靛蓝强调色（#5046E5）用于链接和交互元素。排版采用简洁的几何无衬线字体作为标题和正文文本，导航和特定标签使用等宽字体。关键约束：避免复杂渐变、投影或多种强调色。布局采用宽敞的左对齐网格，严格遵循4px间距，优先考虑可读性和内容而非装饰元素。使用药丸形按钮和带细边框的水平卡片。保持冷静专业的基调，避免使用花哨动画或装饰元素。