精选 · 开放 · 免费
Driesbos
一个面向创意开发者的、以文本为核心的极简作品集。
DeveloperPortfolioMonochromeCleanCuration
01
设计气质 DNA
创意开发者屡获殊荣设计团队助手
仿佛是位于明亮工作室中、井然有序的工具箱。
02
色彩
#050200Ink
#E8E7E3BG
#9E9C97Muted
rgba(5,2,0,1.0)Line
高对比度的单色调，搭配温暖如纸张的背景色，将视觉焦点完全集中于排版。
03
字体
grotesque-sans
使用定制的无衬线字体作为身份标识 · 严格保持400字重 · 使用25px内边距以保持一致的块状节奏
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
基于网格，通过固定的25px内部边距创造一致的视觉节奏。
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 0px
pill · 999px
使用1px黑色实线定义区块与表格，主视觉区域呈现独特的3D线框效果。
06
布局
1000container
4columns
768breakpoints
单列、基于区块的布局，项目列表采用表格形式呈现。
07
动效与交互
220msmicro
330mssmall
700msmedium
cubic-bezier(0.77, 0, 0.28, 1)easing
水平跑马灯滚动条 · 文本与背景采用330毫秒平滑过渡 · 复杂变换使用700毫秒cubic-bezier缓动
微妙的330毫秒颜色与背景过渡效果。 · 极简的视觉反馈，主要依赖过渡时长。
08
组件
- button 仅含文本的极简链接，搭配自定义箭头图标。
- card 作为主要焦点的3D线框轮廓主视觉容器。
- input 当前视图中不适用。
- hero 一个透视绘制的线框盒，内含网站名称与介绍文本。
09
文案语气与禁用清单
- 语气 直接、专业且简洁。
- 标题风格 由破折号分隔的短促、有力的短语。
- 按钮文案 通过箭头图标与重复的跑马灯滚动条进行暗示。
- 不要使用圆角——截图显示所有容器和卡片均为锐利的0px圆角半径。
- 不要使用浓重投影——截图显示仅使用扁平的1px实线边框进行界定。
- 不要使用装饰性图像——截图显示严格的基于文本的线框美学。
- 不要使用粗体——截图显示全局统一使用400字重。
- 不要使用鲜艳的强调色——截图严格使用黑与暖米白的单色调。
- 不要使用复杂的多栏网格——截图显示严格的单列、基于区块的垂直流布局。
- 避免: 避免使用浓重的投影或柔和的模糊效果
- 避免: 避免在主要容器上使用圆角
- 避免: 避免对主要内容采用多栏布局
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一个面向创意开发者的极简作品集网站。它使用温暖的米白色背景（#E8E7E3）与深棕黑色文本（#050200），字体为定制的无衬线字体（字重400）。布局为单列、基于区块，由锐利的1px实线边框定义。独特的3D线框盒框定了主视觉区域。关键禁忌：避免圆角，避免投影，避免使用粗体字重，以及避免使用任何鲜艳的强调色。设计依赖330毫秒的过渡效果处理所有状态变化，并使用重复的跑马灯滚动条进行交互。
en · zh-CN · zh-TW · ja · ko