OpenDesign·你的设计资产库

网页参考

Guillermo Rauch

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

PortfolioDeveloper Tools
Guillermo Rauch 网站截图

01

设计气质 DNA

个人开发者作品集博客按时间顺序

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

02

色彩

#000000Ink
#fcfcfcBG
#737373Muted
rgba(229,231,235,1)Line

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

03

字体

geometric-sans · monospace

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

04

间距

4px
8px
16px
24px
32px
48px
64px
96px

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

05

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

sm · 2px
md · 8px
lg · 12px
pill · 999px

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

06

布局

900container
12columns
24pxgutter
768 / 1024breakpoints

列表项采用严格的三列表格类布局:年份(左)、标题(中)、计数(右)。

07

动效与交互

150msmicro
150mssmall
150msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

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

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

08

组件

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

09

文案语气与禁用清单

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

10

包内真实截图

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

这是一个极致极简的个人作品集和博客档案。它使用严格的单色配色:#000000 墨色位于 #fcfcfc 背景上,#737373 用于弱化的元数据。排版采用简洁的几何无衬线字体(归类为 geometric-sans),正文 14px,元数据 12px。布局为居中的窄容器,具有严谨的三列列表结构(年份、标题、计数)。关键禁忌:不要使用强调色,不要添加阴影,不要为主要容器使用圆角。不要使用装饰性边框或复杂网格。除网站标题外,任何地方都不要使用粗体文本。文案直接而专业,完全依赖排版和间距来建立层级。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效,整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明,可复制给 Agent。