OpenDesign·你的设计资产库

网页参考

Danieltriendl

基于网格的简洁作品集,展示富有表现力的彩色插画项目。

PortfolioStudioCurationPhotographicExpressive

预览暂时不可用,请通过原站查看。

01

设计气质 DNA

插画作品集视觉艺术性创意

精心策划的数字插画展览。

02

色彩

#1A1A1AInk
#666666Ink soft
#FFFFFFBG
#999999Muted
rgba(0, 0, 0, 0.1)Line

界面采用中性极简框架,让鲜艳的艺术作品本身定义色彩体验。

03

字体

humanist-sans

  • display32px · 600
  • body16px · 400

字体设计保持极简与功能性,避免与艺术作品形成视觉竞争。 · 标题采用加粗字重,确保项目识别清晰明了。 · 正文使用标准字重,保证描述文字和标签的最佳可读性。

04

间距

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

网格项之间采用宽松间距,营造呼吸感与画廊般的氛围。

05

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

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

采用细腻的细边框或柔和阴影分隔网格项。

06

布局

1400container
4columns
20pxgutter
768 / 1024breakpoints

不对称瀑布流网格布局,自适应不同图片的纵横比。

07

动效与交互

200msmicro
400mssmall
600msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

项目卡片采用细腻的悬停效果,可能包含缩放或透明度变化。

项目卡片和导航按钮等交互元素提供细腻的视觉反馈。 · 通过标准导航进入项目详情页。

08

组件

  • button 简洁的圆角胶囊形按钮,配以细边框与清晰文字标签。
  • card 以图片为核心的项目卡片,展示艺术作品、标题与标签,无明显边框。
  • chip 基于文字的简约标签,用于分类展示,位于项目标题下方。
  • input 截图中未显示输入框组件。
  • hero 整个网格即为主视觉区域,直接呈现作品集内容。

09

文案语气与禁用清单

  • 语气 专业、自信,聚焦于作品本身。
  • 标题风格 直接且具有描述性的项目标题。
  • 按钮文案 清晰的功能性导航标签,如「探索」和「索引」。
  • 避免添加复杂背景——截图显示为纯净白色画布。
  • 避免使用装饰性花体字体——截图采用简洁易读的人文无衬线字体。
  • 避免为卡片添加厚重阴影或渐变——截图采用扁平化图像呈现。
  • 避免用不必要的UI元素充斥界面——截图以艺术作品为优先。
  • 避免使用深色主题——截图明确采用白色背景的浅色主题。
  • 避免僵化统一的网格——截图采用不对称瀑布流布局。
  • 避免: 浮夸的营销语言
  • 避免: 过度复杂的描述
  • 避免: 喧闹抢眼的标题

11

System Prompt

这是一个专注于插画师作品集的简洁网站。设计基因围绕让鲜艳的艺术作品在中性白色(#FFFFFF)背景上成为视觉中心而构建。布局采用不对称瀑布流网格。字体采用深灰色(#1A1A1A)的人文无衬线字体,确保清晰可读且不干扰视觉内容。关键禁忌:1)不要添加会分散艺术作品注意力的复杂背景或图案。2)不要使用装饰性花体字体;保持字体设计的功能性与极简性。3)不要添加厚重阴影、渐变或复杂的卡片边框;界面应呈现为轻盈的画廊式框架。整体设计原则是通过克制UI设计来最大化插画内容的视觉冲击力。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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