01
设计气质 DNA
设计工程师独立深思熟虑的交互流程驱动
一个简洁的个人工作室网站，连接设计与工程。
02
色彩
#1D4ED8Accent#111827Ink#4B5563Ink soft#FFFFFFBG#F6F8FABG quiet#9CA3AFMutedrgba(0,0,0,0.1)Line简洁的单色基底，搭配单一的高饱和度蓝色作为品牌与链接的强调色。
03
字体
- display
48px · 700 - h2
32px · 700 - body
18px · 400 - nav
14px · 500
大而紧凑的标题与舒适的阅读正文形成对比。 · 蓝色保留用于导航和行内链接。
04
间距
4px8px16px24px32px48px64px96px标准 4px 基础网格，章节间有充足的垂直留白。
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 0px
pill · 0px
logo 上使用 1px solid rgba(0,0,0,0.1) 的边框。
06
布局
1200container
12columns
24pxgutter
768 / 1024breakpoints
单栏、以文本为主的布局，一个大型图形插图突破了容器边界。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
静态呈现，截图中未见明显动画。
文本链接带下划线。 · 标准链接行为。
08
组件
- button 基于文本的链接，使用标准蓝色。
- card 未见。
- chip 未见。
- input 未见。
- hero 包含姓名和角色的大型文本块。
09
文案语气与禁用清单
- 语气 专业、透明、流程导向。
- 标题风格 直接且描述性强。
- 按钮文案 微妙的文本链接。
- 不要使用复杂渐变或厚重阴影——截图显示的是平面、干净的表面。
- 不要使用圆角无衬线字体——截图显示的是几何体和人文主义无衬线字体。
- 不要将所有文本居中对齐——截图显示标题和段落为左对齐。
- 不要使用多种强调色——截图显示的是严格的蓝色单色强调系统。
- 不要使用装饰性边框或华丽的分割线——截图显示的是极简的视觉分隔。
- 不要用过多的按钮或徽章使 UI 杂乱——截图显示的是非常克制、以文本优先的布局。
- 避免: 夸张词汇
- 避免: 炫目动画
- 避免: 厚重的营销文案
11
System Prompt
这是一位独立设计工程师的精致个人作品集。其视觉基因建立在干净的白色背景上，辅以浅灰色的细微章节分隔线。主色调为深蓝色，严格用于品牌标识和链接。排版采用粗体几何无衬线字体用于标题，人文主义无衬线字体用于正文，营造出专业且易于接近的感觉。布局严格左对齐且以文本为主，强调可读性和内容，而非炫目的 UI。关键设计约束：避免所有文本居中，避免复杂渐变或阴影，避免使用多种强调色。