精选 · 开放 · 免费
David Hckh
面向网页开发者的趣味3D插画个人作品集
PortfolioPlayful3DDeveloperWarm
01
设计气质 DNA
开发者作品集趣味性3D个人
一个温馨、插画风格的开发者工作空间
02
色彩
#FF8400Accent
#2D2A24Ink
#5F5646Ink soft
#F5EFE6BG
#E9DED0BG soft
rgba(45, 42, 36, 0.1)Line
温暖奶油色基底搭配深墨色形成对比，活力橙色用于主要操作
03
字体
humanist-sans · monospace
- display
72px · 800 - h2
48px · 800 - body
16px · 400
导航和徽章标签使用大写形式 · 大号展示文字保持紧凑的负字间距 · 标题使用粗体以建立清晰的视觉层级
04
间距
4px
8px
12px
16px
18px
24px
32px
36px
48px
64px
96px
统一4px网格系统，主要区域间保持充足留白
05
表面 (圆角 / 阴影 / 边线)
sm · 12px
md · 16px
lg · 24px
pill · 100px
2px实线墨色描边，4px实线橙色用于徽章
0 4px 24px rgba(45, 42, 36, 0.08) · 0 8px 32px rgba(45, 42, 36, 0.12)
06
布局
1200container
12columns
24pxgutter
768 / 1024breakpoints
全宽主视觉区域采用分割布局，项目使用2栏网格
07
动效与交互
100msmicro
200mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
hover时平滑的背景色与变换过渡 · 颜色与透明度变化的缓入缓出过渡
交互元素上的微妙背景色与变换变化 · 即时响应配合微过渡
08
组件
- button 药丸造型，100px圆角半径，橙色背景配白色文字
- card 24px圆角半径，带有图像，略带圆角
- chip 倾斜4px边框的徽章标签，大写文字
- input 截图中不可见
- hero 分割布局，左侧大号粗体标题，右侧3D插画
09
文案语气与禁用清单
- 语气 友好、亲切且专业
- 标题风格 大号、粗体、略带小写风格的人文无衬线字体，富有个性
- 按钮文案 大写药丸形按钮，高对比度橙色
- 不要使用细体字重——截图显示标题使用800字重
- 不要使用深色背景——截图显示温暖的奶油色#F5EFE6背景
- 不要使用直角——截图显示药丸形状圆角半径达100px
- 不要使用蓝色强调——截图显示活力橙#FF8400作为主强调色
- 不要使用衬线字体——截图仅使用Urbanist人文无衬线字体
- 不要使用最小化留白——截图显示充足的内边距与区域间距
- 避免: 不要使用衬线字体
- 避免: 不要使用冷色调或临床感蓝色作为主强调色
- 避免: 不要使用尖锐直角
- 避免: 不要使用细体或轻量字重作为标题
- 避免: 不要使用深色模式背景
- 避免: 不要使用局促的区域间距
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
面向网页开发者David Heckhoff的趣味个人作品集网站。使用温暖奶油色背景(#F5EFE6)搭配深墨色(#2D2A24)与活力橙色(#FF8400)点缀。字体使用Urbanist人文无衬线字体，展示标题采用72px粗体800字重。特色包括3D插画主视觉场景、圆角药丸形按钮与倾斜徽章标签。布局宽敞，留白充足。不要使用深色模式，不要使用衬线字体，不要使用尖锐直角，不要使用细体字重作为标题，不要使用蓝色强调，不要使用局促间距。
en · zh-CN · zh-TW · ja · ko