精选 · 开放 · 免费

Brittany Chiang

一个简洁、无障碍的开发者作品集，强调排版与内容层级。

01

设计气质 DNA

一个精心打造的工程作品集

02

色彩

采用高对比度的深底浅字以确保可读性，并以青色作为交互强调色。

03

字体

humanist-sans · monospace

• display48px · 700
• h120px · 500
• body16px · 400
• caption12px · 500

标签使用大写字母 · 次要信息使用柔和色彩 · 姓名和标题使用粗体

04

间距

4px 基准网格

05

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

rgba(226,232,240,0.1)

06

布局

两栏布局，包含固定侧边栏导航和主内容区域。

07

动效与交互

悬停时颜色与背景色的过渡 · 链接的变换过渡

文本颜色变化，标签背景色变化。 · 标准的链接导航。

08

组件

• button 药丸形标签，青色背景搭配深色文字。
• card 包含日期、职位和技术标签的经历条目。
• chip 用于展示技术的小型圆角矩形。
• hero 大型粗体姓名、副标题和简短个人简介。

09

文案语气与禁用清单

• 语气 专业、自信且清晰。
• 标题风格 直接且具描述性。
• 按钮文案 极简，通常仅为带箭头的文本链接。

• 不要使用浅色背景——截图显示背景为深石板色 (#0f172a)。
• 不要使用单一强调色——截图显示青色 (#5eead4) 仅用于高亮。
• 不要使用过宽的间距——截图显示紧凑的 16px 间距和 4px 基准网格。
• 不要使用装饰性字体——截图显示简洁的人文主义无衬线字体。
• 不要使用浓重的投影——截图显示扁平化表面。
• 不要使用复杂的渐变——截图显示纯色和微妙的径向渐变。
• 避免: 过于随意的语言
• 避免: 炫目或分散注意力的动画
• 避免: 对工作描述含糊不清

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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