01
设计气质 DNA
开发者作品集3D交互深色主题极简主义创意工程
一位创意工程师的数字名片，融合3D抽象艺术
02
色彩
#d1c5adInk#c8c8c8Ink soft#0f0f10BG#a0a0a0Mutedrgba(200,200,200,0.85)Line深邃黑色基底，搭配温暖的米白色排版与鲜明的3D球体点缀
03
字体
- display
104px · 700 - heading
48px · 600 - subheading
32px · 600 - body
24px · 400 - small
16px · 400
展示型标题采用紧凑行高（0.9）以增强视觉冲击力 · 正文保持舒适的1.5倍行高 · 半粗体（600）用于强调和副标题
04
间距
4px8px16px24px32px48px64px96px以4px为基础网格，主要章节间采用48-96px的充裕垂直间距
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 96px
rgba(200,200,200,0.85) 用作文本颜色与边框颜色
0 0 120px rgba(80,120,200,0.15) —— 3D球体背后的柔和彩色光晕
06
布局
1200container
2columns
48pxgutter
768 / 1024breakpoints
非对称布局，大型3D视觉元素与文本区域交错重叠
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
3D球体伴随细微视差/旋转效果浮动 · 章节间平滑滚动过渡 · 交互元素的悬停状态
可点击元素上光标变为指针 · 平滑导航至页面锚点
08
组件
- button 无传统按钮；采用带下划线样式的文本链接
- card 工作经历板块，采用双栏布局展示公司名称与描述
- hero 大型姓名标题，搭配浮动3D球体作为装饰元素
09
文案语气与禁用清单
- 语气 自信而平易近人，专业且富有个性
- 标题风格 粗体、大尺寸的陈述式标题，字间距紧凑
- 按钮文案 采用下划线文本链接而非按钮组件
- 避免使用浅色背景——截图显示始终采用深色（#0f0f10）背景
- 避免添加多种强调色——截图依赖3D球体渐变，而非UI强调色
- 避免对正文使用紧凑行高——截图显示采用舒适的1.5倍行高
- 避免添加可见的卡片边框——截图采用深色叠层设计，无边框
- 避免将所有文本居中——截图显示文本始终左对齐
- 避免使用小尺寸展示型标题——截图姓名部分采用104px大尺寸
- 避免: 企业术语
- 避免: 过度自我宣传
- 避免: 杂乱的布局
10
包内真实截图
11
System Prompt
这是一个具有深邃精致美学的高级开发者作品集网站。关键颜色为极深色背景（#0f0f10）、温暖的米白色文本（#d1c5ad）以及柔和的灰色（#c8c8c8）正文。字体采用几何无衬线体Avenir Next，展示型标题最大可达104px粗体。设计采用交互式3D浮动球体，以紫色、蓝色和青色渐变作为深邃背景上的装饰元素。关键禁忌：永远不要使用浅色背景，永远不要添加可见的卡片边框，永远不要将所有文本居中，始终保持充裕间距（48-96px），永远不要使用小尺寸的展示型标题。布局为非对称结构，内容环绕3D视觉元素流动。该网站体现了工程技能与视觉创意的交汇，是高端作品集设计的宝贵参考。