精选 · 开放 · 免费

Maryloufaure

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

PortfolioPlayfulBold TypographyExpressiveGallery
Maryloufaure 网站截图
↓ 下载设计系统包 (51 MB)在 OpenDesign 中打开

原站: https://maryloufaure.com

📦 浏览包内文件 →

01

设计气质 DNA

艺术家插画趣味大胆愉悦

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

02

色彩

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

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

03

字体

grotesque-sans

使用简洁的无衬线字体，为插画保持极简的背景。 · 为大型展示标题应用紧凑的字间距（-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

组件

09

文案语气与禁用清单

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 — 移动首屏
移动首屏

抓自真实页面 · 真 computed styles

11

System Prompt

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

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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