01
设计气质 DNA
无障碍像素完美工程化简洁专业
一个精心打造的工程作品集
02
色彩
#5eead4Accent#e2e8f0Ink#0f172aBG#94a3b8Mutedrgba(226,232,240,0.1)Line采用高对比度的深底浅字以确保可读性，并以青色作为交互强调色。
03
字体
- display
48px · 700 - h1
20px · 500 - body
16px · 400 - caption
12px · 500
标签使用大写字母 · 次要信息使用柔和色彩 · 姓名和标题使用粗体
04
间距
4px8px12px16px24px32px48px64px96px4px 基准网格
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 6px
lg · 0px
pill · 9999px
rgba(226,232,240,0.1)
06
布局
1100container
12columns
24pxgutter
768 / 1024breakpoints
两栏布局，包含固定侧边栏导航和主内容区域。
07
动效与交互
150msmicro
300mssmall
0msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
悬停时颜色与背景色的过渡 · 链接的变换过渡
文本颜色变化，标签背景色变化。 · 标准的链接导航。
08
组件
- button 药丸形标签，青色背景搭配深色文字。
- card 包含日期、职位和技术标签的经历条目。
- chip 用于展示技术的小型圆角矩形。
- hero 大型粗体姓名、副标题和简短个人简介。
09
文案语气与禁用清单
- 语气 专业、自信且清晰。
- 标题风格 直接且具描述性。
- 按钮文案 极简，通常仅为带箭头的文本链接。
- 不要使用浅色背景——截图显示背景为深石板色 (#0f172a)。
- 不要使用单一强调色——截图显示青色 (#5eead4) 仅用于高亮。
- 不要使用过宽的间距——截图显示紧凑的 16px 间距和 4px 基准网格。
- 不要使用装饰性字体——截图显示简洁的人文主义无衬线字体。
- 不要使用浓重的投影——截图显示扁平化表面。
- 不要使用复杂的渐变——截图显示纯色和微妙的径向渐变。
- 避免: 过于随意的语言
- 避免: 炫目或分散注意力的动画
- 避免: 对工作描述含糊不清
10
包内真实截图
11
System Prompt
这是一个专注于无障碍性和工程卓越性的个人开发者作品集。采用深石板色背景 (#0f172a) 搭配浅色文字 (#e2e8f0) 和青色强调色 (#5eead4)。排版使用简洁的人文主义无衬线字体，并具有清晰的层级。关键禁忌：不要使用浅色背景，不要过度使用青色强调色，不要使用装饰性字体。