OpenDesign·你的设计资产库

网页参考

Maryloufaure

一个极简的作品集网站，作为 Marylou Faure 鲜艳、趣味插画的纯净画布。

PortfolioPlayfulBold TypographyExpressiveGallery
Maryloufaure 网站截图

01

设计气质 DNA

艺术家插画趣味大胆愉悦

一个大胆、趣味十足的艺术画廊，展示着充满活力的角色驱动插画。

02

色彩

#000000Ink
#FFFFFFBG
#868785Muted
rgba(0,0,0,0.2)Line

界面严格中性（黑白），使艺术作品的大胆色彩能主导视觉层次。

03

字体

grotesque-sans

  • display40px · 400
  • body16px · 400
  • label12px · 400

使用简洁的无衬线字体，为插画保持极简的背景。 · 为大型展示标题应用紧凑的字间距（-0.5px）。 · 为小型导航和说明标签应用宽松的字间距（0.5px）。

04

间距

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

一致的 15px 内边距为内容块和导航元素创建统一的边距。

05

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

sm · 0px
md · 8px
lg · 0px
pill · 50px

1px solid rgba(0,0,0,0.2) 用于水平分隔线和细结构线条。

rgba(0, 0, 0, 0.09) 0px 0px 14px 0px · rgba(0, 0, 0, 0.21) 0px 0px 4px 0px · rgba(0, 0, 0, 0.09) 0px 0px 0px 1px

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

全宽单栏布局，在宽描述文本块和全出血、边缘到边缘的图片网格之间交替。

07

动效与交互

100msmicro
200mssmall
500msmedium
ease-outeasing

Opacity 淡入淡出（0.4s 至 0.5s），实现状态间的平滑过渡。 · 链接悬停交互的 text-decoration 切换。 · 隐藏元素显现时的 transform 和 opacity 变换。

链接上出现 text-decoration 下划线。 · 所有可点击元素使用标准指针光标。

08

组件

  • button 无背景或边框样式的纯文本导航链接。
  • card 全宽图片块，在单张大图和分割网格之间交替，由细线分隔。
  • chip 简单的黑白单色客户端标志水平列表。
  • input 用于联系信息的文本链接，悬停时带下划线样式。
  • hero 一个分割部分，左侧是描述文本块，右侧是两张缩略图组成的网格。

09

文案语气与禁用清单

  • 语气 自信、专业，略带趣味。
  • 标题风格 大型、简洁、直接的标题（例如‘可口可乐’）。
  • 按钮文案 用于导航和联系的细微纯文本链接。
  • 不要使用装饰字体——截图显示的是简洁、标准的 grotesque-sans（Helvetica/Arial）。
  • 不要给内容卡片添加阴影或圆角——截图显示的是平坦、边缘到边缘的图片。
  • 不要为 UI 使用单一的主导强调色——截图显示的是严格的黑白界面。
  • 不要为按钮使用实心背景色——截图显示的是纯文本导航链接。
  • 不要使用复杂、杂乱的布局——截图显示的是简单、线性的单栏流。
  • 不要使用粗重的字体权重——截图显示的是全程标准的 400 权重。
  • 避免: 避免装饰性字体或复杂的排版处理。
  • 避免: 避免与艺术作品竞争的繁杂 UI 元素。
  • 避免: 避免在 UI 元素中使用颜色；保持严格黑白。

10

包内真实截图

Maryloufaure — 桌面首屏（hero）
桌面首屏（hero）
Maryloufaure — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Maryloufaure — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Maryloufaure — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Maryloufaure — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Maryloufaure — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Maryloufaure — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Maryloufaure — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Maryloufaure — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Maryloufaure — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Maryloufaure — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Maryloufaure — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Maryloufaure — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Maryloufaure — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Maryloufaure — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Maryloufaure — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Maryloufaure — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Maryloufaure — 移动首屏
移动首屏

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

11

System Prompt

这是一个极简的艺术家作品集网站，作为鲜艳、趣味插画的纯净、中性画布。界面依赖严格的黑白配色方案（#000000 墨水色于 #FFFFFF 背景上），#868785 用于淡化标签。字体使用标准的 grotesque-sans（Helvetica/Arial），全程保持一致的 400 权重，大型标题使用紧凑字间距（-0.5px），小型标签使用宽松字间距（0.5px）。关键禁止事项包括：绝不使用装饰字体，绝不为内容卡片添加 UI 阴影或圆角，绝不引入主导的 UI 强调色。布局是简单、线性的单栏流，全出血图片由细 1px 线条分隔。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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