精选 · 开放 · 免费
Jhey Tompkins
一个专注于 UI 实验与交互设计的开发者作品集。
portfoliocss
01
设计气质 DNA
个人开发者创意界面
为设计工程师打造的简洁、注重排版的个人作品集。
02
色彩
#EB5757Accent
#000000Ink
#666666Ink soft
#FFFFFFBG
rgba(255,255,255,1)Line
高对比度的黑白基础，搭配暖色调用于交互强调。
03
字体
didone-serif · humanist-sans · monospaced
- display
58px · 400 - subtitle
14px · 600 - body
16px · 300
元数据文字采用全大写并收紧字间距 · 标题使用衬线字体，正文使用无衬线字体
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
主要区块间留有充裕的垂直间距。
05
表面 (圆角 / 阴影 / 边线)
sm · 6px
md · 8px
lg · 12px
pill · 999px
无可见的结构性边框。
06
布局
1280container
1columns
24pxgutter
768 / 1024breakpoints
居中的单列布局，留有充裕留白。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
所有元素都定义了 transition 属性。
交互元素上显示指针光标。 · 交互元素上显示指针光标。
08
组件
- button 无可见按钮。
- card 无可见卡片。
- chip 无可见标签芯片。
- input 无可见输入框。
- hero 大号衬线标题，后接等宽副标题和无衬线段落。
09
文案语气与禁用清单
- 语气 专业、亲切，且略带趣味性。
- 标题风格 大号、优雅的衬线字体。
- 按钮文案 带箭头的简洁文本链接。
- 不要使用深色背景——截图显示为干净的白色背景。
- 不要为 hero 标题使用无衬线字体——截图显示为衬线标题。
- 不要为主要链接使用蓝色——截图显示为暖红/橙色强调色。
- 不要使用单列全宽布局——截图显示为受限的段落宽度。
- 不要为正文使用粗体字重——截图显示为浅字重。
- 不要为元数据标签使用小写——截图显示为全大写并收紧字间距。
- 避免: 过度企业化的术语
- 避免: 激进的销售语言
- 避免: 杂乱的布局
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一个设计工程师的个人作品集网站，特点是在白色背景上采用简洁的单列布局。其设计基因建立在高对比度基础上，使用深墨色（#000000）置于白色（#FFFFFF）之上，并以暖红色（#EB5757）作为交互高亮。排版上，主 hero 使用迪多内衬线展示字体，搭配人文主义无衬线字体用于正文，以及等宽字体用于标签和元数据信息。关键的设计约束包括：保持充裕的留白和限定段落宽度，主要展示文字使用衬线字体，元数据标签采用全大写并收紧字间距。避免使用深色模式、蓝色强调色或过于复杂的多栏布局。
en · zh-CN · zh-TW · ja · ko