精选 · 开放 · 免费

Parker Studio

一个精致的设计工作室作品集，在高对比度图像、优雅排版和趣味点缀之间取得平衡。

01

设计气质 DNA

一个现代画廊空间，展示具有独特视觉身份的多样化创意项目。

02

色彩

高对比度调色板，采用柔和薄荷绿和纯白背景，使用墨黑色以获得最佳可读性。

03

字体

transitional-serif · grotesque-sans

• display43px · 400
• body16px · 400

为项目标题混合使用过渡衬线字体，导航则采用干净的怪诞无衬线字体。 · 为大号显示文本保持紧凑的行高。 · 对导航样式使用统一的大写转换。

04

间距

宽松的垂直间距营造出开放感，并突出了视觉作品。

05

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

1px solid rgba(0,0,0,1)

0px 4px 4px rgba(0, 0, 0, 0.25)

06

布局

非对称的编辑式布局，搭配大型沉浸式图像和大量留白。

07

动效与交互

在 hover 状态下应用平滑的不透明度和 transform 过渡。

细微的颜色或位置变化，主要应用于文本链接。 · 直接导航或触发模态框。

08

组件

• button 极简的、基于文本的导航，带有简单的 transition。
• card 大型、沉浸式的项目卡片，通常跨越整个宽度。
• hero 全出血、图像驱动的 hero 区域，为每个项目设定独特的视觉基调。

09

文案语气与禁用清单

• 语气 自信、专业且略带趣味。
• 标题风格 简短有力的项目标题，常使用大号衬线字体。
• 按钮文案 低调、功能性的文本链接用于导航。

• 不要使用多种相互竞争的背景颜色——截图显示每个部分都干净、聚焦地使用柔和薄荷绿、白色或黑色。
• 不要对所有元素都应用厚重的投影——截图显示它们被谨慎使用，主要用于为特定对象增加深度。
• 不要将所有文本内容居中——截图显示导航和标题采用左对齐，以建立清晰的视觉层次。
• 不要对所有标题都使用无衬线字体——截图明显地为 'Architecture' 等项目标题使用了过渡衬线字体。
• 不要为导航使用低对比度文本——截图显示在背景上使用了高对比度的黑色或白色文本。
• 不要普遍使用圆角——截图显示图像和布局容器主要采用直角边缘。
• 避免: 分散作品注意力的过度装饰元素。
• 避免: 杂乱的布局或过多的 UI 组件。
• 避免: 刺眼的多色渐变。
• 避免: 在扁平元素上使用厚重的投影。

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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