OpenDesign·你的设计资产库

网页参考

Jonaspelzer

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

PortfolioTypographyCleanStudioEditorial
Jonaspelzer 网站截图

01

设计气质 DNA

设计师数字产品网站Jonas Pelzer15+ 年经验

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

02

色彩

#3502FFAccent
#000000Ink
#FFFFFFBG
rgba(0, 0, 0, 0.1)Line

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

03

字体

geometric-sans · transitional-serif

  • display56px · 400

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

04

间距

4px
8px
16px
24px
32px
48px
64px
96px

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

05

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

sm · 4px
md · 8px
lg · 12px
pill · 999px

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

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

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

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

07

动效与交互

220msmicro
400mssmall
800msmedium
cubic-bezier(0.22, 1, 0.36, 1)easing

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

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

08

组件

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

09

文案语气与禁用清单

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

10

包内真实截图

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

这是一个为资深数字设计师打造的、以排版为驱动的精致设计作品集。调色板以黑色(#000000)和白色(#FFFFFF)的高对比度为基础,搭配一个鲜艳的紫色(#3502FF)作为点缀。排版是几何无衬线体与过渡衬线体类别的巧妙融合。布局居中且宽敞,留白充裕。关键禁忌:避免使用彩色渐变,避免为导航使用衬线字体,避免杂乱的布局。语调专业且富有经验,采用直接、陈述性的标题。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效,整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明,可复制给 Agent。