精选 · 开放 · 免费
Kevinbrenkman
一个为创意伙伴服务的设计驱动型网页开发实践。
AgencyPortfolioCleanTypographyStudio
01
设计气质 DNA
设计驱动网页开发实践创意伙伴
一个精致、极简的 Studio Portfolio，让作品自己说话。
02
色彩
#000000Ink
#3B3B3BInk soft
#FFFFFFBG
#F8F8F8BG soft
#DFDFDFMuted
rgba(0, 0, 0, 0.1)Line
高对比度的单色基础，完全服务于项目图像。
03
字体
grotesque-sans · monospace
- display
32px · 400 - body
14px · 400
所有主要文本使用 grotesque-sans 字体。 · 所有元素保持统一的 400 字重。 · 所有正文和展示文本应用一致的 0.25px 字间距。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
严格的 4px 基准单位，文本元素周围采用紧凑、一致的 padding。
05
表面 (圆角 / 阴影 / 边线)
sm · 2px
md · 0px
lg · 0px
pill · 999px
采用 rgba(59, 59, 59, 0.3) 的 1px 细实线边框，用于实现微妙的视觉分隔。
无
06
布局
1440container
12columns
24pxgutter
768 / 1024breakpoints
全宽通边距布局，项目图像横跨整个视口宽度，文本则限定在舒适的阅读宽度内。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.215, 0.61, 0.355, 1)easing
hover 状态下的 padding 和 opacity 过渡。 · 交互元素的 Transform 动画。
通过细微的 padding 或 opacity 过渡来指示可交互性。 · 即时响应，无复杂状态变化。
08
组件
- button 极简的内联文本链接，采用 2px border radius 和微妙的 hover 状态。
- card 全出血的项目条目，包含标题、分类、描述及一张大型主视觉图片。
- chip 小型、药丸状的标签，采用微妙的背景填充色来区分分类。
- input 在提供的截图中未出现。
- hero 全宽项目图像，无传统 padding 或边框装饰。
09
文案语气与禁用清单
- 语气 专业、直接且克制。
- 标题风格 清晰、简洁、描述性的项目标题。
- 按钮文案 微妙的、内联的文本链接，而非突出的按钮。
- 不要使用明亮的强调色——截图显示的是严格单色的调色板，没有主导性的高饱和度颜色。
- 不要使用粗重的字体字重——截图显示所有文本的字重统一为 400。
- 不要使用复杂的阴影或深度效果——截图显示的是平面化、无边框或仅带微妙边框的布局。
- 不要大量使用圆角——截图显示的是锐利、最小化的 2px border radius。
- 不要使用激进的行动号召——截图显示的是微妙的、内联的文本链接，而非突出的按钮。
- 不要使用装饰性字体——截图显示的是干净、一致的 grotesque sans-serif 字体。
- 避免: 营销术语或激进的销售语言。
- 避免: 过度装饰的元素或令人分心的动画。
- 避免: 与项目图像竞争的明亮、饱和的强调色。
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
为一个创意工作室设计一个干净、专业的 Portfolio 网站。使用高对比度的单色调色板，背景为白色（#FFFFFF），文本为黑色（#000000），辅以微妙的灰色（#F8F8F8，#DFDFDF）。主字体设为 grotesque-sans 类别，字重统一为 400，字间距一致为 0.25px。布局应为全宽、通边距，项目图像占据视觉中心，UI 元素极简、克制。关键禁忌：切勿使用明亮、饱和的强调色；切勿使用粗体或重字重；切勿添加复杂的阴影或装饰性 UI 元素；切勿使用激进的行动号召；切勿使用超过 2px 最小值的圆角；切勿使用装饰性字体。
en · zh-CN · zh-TW · ja · ko