精选 · 开放 · 免费

Jonaspelzer

一个展示15年以上数字产品设计经验的、富有格调的设计作品集。

01

设计气质 DNA

一个精致的数字作品集，如同一个持续更新的案例研究目录。

02

色彩

以高对比度的黑白色为基础，并仅搭配一个高饱和度的紫色作为点缀。

03

字体

geometric-sans · transitional-serif

• display56px · 400

在同一标题块内混用几何无衬线体与过渡衬线体，以营造韵律感与对比。 · 使用充裕的行高与字间距，确保优雅的可读性。 · 主导航与分类标签建议采用全大写形式。

04

间距

采用充裕的垂直内边距与留白，为排版与项目内容留出呼吸空间。

05

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

使用1px solid #000000以形成清晰边界；使用1px solid rgb(212, 214, 221)进行细微区隔。

0px 1px 4px 2px rgba(53, 2, 255, 0.1)

06

布局

以居中的首屏英雄区开始，随后是一个三列的项目卡片网格。

07

动效与交互

页面过渡与项目卡片悬停状态均为平滑动效。 · 项目缩略图在交互时伴有微小的缩放或位移动画。

在项目卡片与导航项上实现细微的缩放或阴影变化。 · 交互元素提供即时的视觉反馈。

08

组件

• button 药丸形导航栏，激活状态采用纯紫色背景。
• card 项目缩略图卡片，采用圆角（12px）并配有细微的阴影或边框。
• hero 大型排版组合，混合无衬线与衬线字体，上方留有大量空白。

09

文案语气与禁用清单

• 语气 专业、自信且富有经验。
• 标题风格 直接、陈述性强，并具有排版表现力。
• 按钮文案 清晰、以行动为导向，常在导航中以全大写形式呈现。

• 不要为导航使用衬线字体——截图显示为大写无衬线标签。
• 不要使用鲜艳或多色的调色板——截图显示的是严格的黑、白、紫配色方案。
• 不要将所有内容都居中——截图显示英雄区文本为左对齐，并采用结构化网格。
• 不要使用浓重的投影——截图显示仅有一个细微的紫色box-shadow实例。
• 不要使用复杂或装饰性的UI组件——截图显示的是一个极简的、以文本为驱动的界面。
• 不要使用深色模式界面——截图显示的是明亮的、浅色背景设计。
• 避免: 避免使用过于随意或俏皮的语言。
• 避免: 避免出现缺乏清晰层级的大段文字。
• 避免: 避免使用通用的企业术语。

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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