精选 · 开放 · 免费
Emil Kowalski
一个面向开发者的沉静作品集，采用洁净、以排版为核心的方法。
portfoliodev
01
设计气质 DNA
设计工程师洁净极简开发者作品集
一本井然有序的笔记本
02
色彩
#21201cInk
#63635eInk soft
#fdfdfcBG
rgba(233,233,231,1)Line
单色调，以温暖的米白为基底，搭配高对比度的排版。
03
字体
humanist-sans
正文使用浅灰色（#63635e），阅读更柔和。 · 章节标题为黑色（#21201c），字重略粗。 · 正文保持统一的24px行高。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
通过一致的24px行高和主要段落间宽松的96px垂直间距建立垂直节奏。
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 6px
lg · 0px
pill · 9999px
1px solid 边框颜色（rgb(233,233,231)）
0 0 0 1px rgba(0,0,0,0.08) · 0 2px 2px 0 rgba(0,0,0,0.04)
06
布局
640container
1columns
768breakpoints
单栏布局，容器窄幅居中。
07
动效与交互
150msmicro
150mssmall
150msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
交互元素上的细微颜色过渡。
悬停时细微的颜色变化（transition: 0.15s）。 · 标准点击行为。
08
组件
- button 深色、圆角胶囊形的主要操作按钮，配白色文字。
- card 不适用 - 采用基于列表的极简结构，无卡片。
- chip 不适用
- input 带细微边框的圆角输入框。
- hero 基于文字的极简主视觉区，包含姓名、头衔和个人简介。
09
文案语气与禁用清单
- 语气 自信、专业、直接。
- 标题风格 简洁直接，通常是一个单词或短语。
- 按钮文案 简洁、以行动为导向的文字，置于高对比度按钮上。
- 避免使用明亮、饱和的强调色 — 截图显示的是单色调色板。
- 避免使用复杂的多栏布局 — 截图显示的是单一、窄幅的栏。
- 避免使用厚重的投影 — 截图显示的是细微、柔和的边框。
- 避免使用大型、戏剧性的字体 — 截图显示的是适度、易读的字号比例。
- 避免使用纯几何或人文主义特征的无衬线字体 — 截图显示的是洁净、中性的无衬线字体。
- 避免使用过多的内边距或外边距 — 截图显示的是紧凑、一致的间距。
- 避免: 营销套话
- 避免: 复杂术语
- 避免: 过多的感叹号
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一个面向设计工程师的极简开发者作品集。设计依赖于洁净的单色调色板，搭配温暖的米白背景（#fdfdfc）与深墨色（#21201c）。布局为单一、窄幅的栏，优先考虑可读性和内容，而非视觉复杂性。排版采用中性无衬线字体类别，通过字重和颜色（而非字号）建立清晰的层次结构。关键设计元素包括细微的1px边框和圆角输入框。关键禁忌：避免使用明亮的强调色、复杂的网格、厚重的阴影和过大的展示字体。整体感觉沉静、精致且专业。
en · zh-CN · zh-TW · ja · ko