精选 · 开放 · 免费

Stinkstudios

一个高端创意工作室作品集，以大胆的排版、电影感的摄影和纯粹的黑白色调为特色。

01

设计气质 DNA

一个以高对比度排版展示大规模创意作品的电影感画廊。

02

色彩

高对比度的单色基底，让电影感的项目摄影成为主要视觉焦点。

03

字体

grotesque-sans · monospace

• display60px · 300
• heading52px · 300
• body16px · 300
• caption14px · 300

使用 Helvetica 作为主要无衬线字体。 · 大型展示文本需保持极紧凑的负字间距。 · 所有界面文本应使用轻字重（300）。

04

间距

大型视觉元素周围采用充足的内边距，导航和列表中则采用更紧凑、一致的间距。

05

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

主要用于分隔和下划线的 1px 实线白色或黑色细线。

06

布局

全出血的首屏图像，其后是大小项目卡片的混合网格。

07

动效与交互

交互元素上平滑的透明度淡变。 · 导航和卡片上基于变形的悬停状态。 · 加载状态下 Logo 元素的旋转或旋转动画。

通过细微的透明度降低或颜色偏移来指示可交互性。 · 立即的状态变化或导航至项目详情页。

08

组件

• button 简单的文本链接，带有下划线或悬停时的透明度变化。
• card 边到边的摄影缩略图，下方或旁边有最少的文字叠加。
• chip 用于“ADVERTISING”等分类的小型、大写、等宽字体，字母间距较大。
• input 极简设计，可能表现为带有底部边框的简单文本输入框。
• hero 全视口沉浸式视频或图像背景，搭配巨大、字距紧凑的展示型排版。

09

文案语气与禁用清单

• 语气 自信、极简、专业。
• 标题风格 简短、有力、视觉主导，依赖字号而非复杂的措辞。
• 按钮文案 低调的文本链接，融入整体极简美学。

• 不要使用装饰性衬线字体 — 截图显示所有界面和展示文本均采用干净的几何无衬线字体。
• 不要为界面元素添加投影 — 截图显示完全扁平的表面，没有任何高度效果。
• 不要使用鲜艳、高饱和度的强调色 — 截图显示严格的单色调色板（黑、白、柔和的灰）。
• 不要在导航中使用居中文本对齐 — 截图显示导航链接在首屏底部右对齐。
• 不要对正文使用粗字重 — 截图显示主要使用轻字重（300）文本以营造精致感。
• 不要在主要卡片上使用圆角 — 截图显示项目图像采用直角边缘，仅在次要元素上使用小的 10px 圆角。
• 避免: 避免使用装饰性衬线字体。
• 避免: 避免使用霓虹色或多色渐变。
• 避免: 避免使用带有过多边框或投影的杂乱界面。
• 避免: 避免使用俏皮或圆润的气泡式界面元素。
• 避免: 避免在首屏区域放置大段密集的正文文本。
• 避免: 避免使用分散摄影注意力的复杂动画。

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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