精选 · 开放 · 免费

Quentinhocde

一个为交互开发者打造的、以高对比度排版为主导的作品集网站。

01

设计气质 DNA

一个面向创意技术专家的现代野兽派风格数字作品集。

02

色彩

严格的单色配色，不含任何强调色，完全依靠字体大小与字重来建立视觉层次。

03

字体

geometric-sans · grotesque-sans

• display-xl144px · 700
• display-lg97px · 700
• body16px · 400
• caption10px · 400

大型展示文本使用紧凑的负字距，以营造紧凑、有力的视觉效果。 · 展示文本与导航链接广泛使用大写字母，以维持结构化的野兽派风格。 · 正文应保持标准的 16px，以确保在复杂背景下的可读性。

04

间距

采用 4px 基础比例进行所有间距设计，其中 12px 和 20px 作为内部组件填充的主要边距。

05

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

无可见边框；通过空间布局和排版实现分隔。

06

布局

全出血沉浸式布局，拥有复杂背景，包含固定顶部导航栏，内容分布于灵活网格中。

07

动效与交互

交互元素与背景组件应用带有轻微延迟的 transform 和 background-size 过渡。 · 背景纹理在不同状态间的细微变化暗示了持续、微妙的运动感。

交互元素使用 'cursor: pointer' 以指示可点击性，transform 过渡提供细微反馈。 · 标准指针事件，通过 CSS 过渡实现即时视觉状态变化。

08

组件

• button 基于文本的链接，带有指针光标和大写样式，无传统按钮边框或背景。
• card 无传统卡片；信息以浮动文本块形式直接呈现于背景之上。
• chip 无可见的标签或芯片。
• input 落地页上无可见表单输入框。
• hero 全视口沉浸式区域，由覆盖在复杂纹理背景之上的、多行巨型排版式声明主导。

09

文案语气与禁用清单

• 语气 专业、直接且自信，聚焦于工艺与技术能力。
• 标题风格 大号、大写、字重粗重的排版式声明，作为主要视觉焦点。
• 按钮文案 简洁、无装饰的文本链接，常使用外部链接图标表示导航至当前页面之外。

• 不要引入第三种强调色——截图显示为严格的黑底白字单色配色。
• 不要在大型文本上使用宽字距——截图显示为紧凑的负字距，以营造密集、野兽派的外观。
• 不要对展示文本使用衬线或手写字型——截图显示主要标题均采用几何无衬线体。
• 不要为交互元素应用边框、阴影或背景色——截图显示为纯文本链接。
• 不要使用传统按钮组件——截图显示为大写文本链接配合指针光标。
• 不要对主标题声明使用多栏网格——截图显示为单栏巨型排版区块。
• 避免: 避免使用彩色强调色或渐变。
• 避免: 避免使用装饰性或手写体字型。
• 避免: 避免使用带边框或阴影的传统卡片式 UI 组件。
• 避免: 避免使用会破坏沉浸感的大面积填充或留白。
• 避免: 避免使用带背景填充的标准按钮组件。
• 避免: 避免对核心声明使用小号、低调的排版。

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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