精选 · 开放 · 免费

Guillermo Rauch

一份极致洁净、以排版为核心的技术名人个人档案。

01

设计气质 DNA

一本极简技术日志或一份整洁的学术阅读清单。

02

色彩

极度克制，采用高对比度的黑白配色，并以微妙的灰色用于元数据。

03

字体

geometric-sans · monospace

• display18px · 700
• body14px · 400
• caption12px · 400

04

间距

严格的垂直间距基于 4px 增量，列表项与区间主要使用 8px 和 24px。

05

表面 (圆角 / 阴影 / 边线)

微妙的 1px 实线边框主要用于标签，定义为 rgb(229,231,235)。

06

布局

列表项采用严格的三列表格类布局：年份（左）、标题（中）、计数（右）。

07

动效与交互

所有元素采用微妙的过渡效果 (0.15s)，用于悬停状态和边框颜色变化。

光标变为指针，带有微妙的 0.15s 过渡。 · 标准链接导航。

08

组件

• button 无可见内边距或背景的最小化文本链接，除非采用标签格式。
• card 由包含年份、标题和计数的行形成的概念性卡片。
• chip 小型药丸状标签，带有 1px 边框和轻微内边距，见于页脚。
• input 未见输入组件。
• hero 简洁页眉，左侧为网站标题，右侧为导航链接。

09

文案语气与禁用清单

• 语气 专业、直接、含蓄。
• 标题风格 简洁、粗体、左对齐。
• 按钮文案 微妙的文本链接，通常带有图标（如 X）。

• 不要使用多种颜色——截图显示的是严格的单色黑/白/灰配色。
• 不要为卡片或容器添加投影——截图显示的是完全平面、无阴影的设计。
• 不要使用装饰性边框或厚重的分隔线——截图使用垂直间距和对齐来替代。
• 不要使用复杂网格或重叠元素——截图显示的是严谨、线性的三列列表布局。
• 不要过度使用粗体文本——截图仅对主网站标题使用 700 字重。
• 不要为主要容器使用圆角——截图对主列表使用直角。
• 避免: 夸张的营销语言
• 避免: 视觉杂乱
• 避免: 装饰性图像

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko