精選 · 開放 · 免費

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

透明度淡入淡出 (0.4s 至 0.5s) 實現狀態間平滑過渡。 · 連結懸停互動的 text-decoration 切換。 · 隱藏元素揭示時的變形與透明度變化。

連結懸停時顯示 text-decoration 底線。 · 所有可點擊元素使用標準指標游標。

08

組件

09

文案語氣與禁用清單

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

這是一個極簡藝術家作品集網站,作為鮮明活潑插畫的純淨中性畫布。介面採用嚴格的黑白配色方案(#000000 墨水於 #FFFFFF 背景),#868785 用於柔和標籤。字體使用標準 grotesque-sans (Helvetica/Arial),保持統一 400 粗細,大型標題採用緊湊字距 (-0.5px),小型標籤採用寬鬆字距 (0.5px)。關鍵禁忌包括:切勿使用裝飾性字體、切勿為內容卡片添加介面陰影或圓角、切勿引入主導的介面強調色。佈局為簡潔、線性的單欄流,全出血圖片以細 1px 線分隔。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效,整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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