精選 · 開放 · 免費

Loewe

一個高端時裝品牌網站，將大尺幅攝影與簡約的介面設計相結合，以提升產品的故事性。

01

設計氣質 DNA

一份活起來的高級時裝雜誌跨頁。

02

色彩

以鮮明的黑白為基底，讓豐富的攝影影像主導視覺，並以單一、大膽的青色作為點綴。

03

字型

geometric-sans

• display120px · 400
• heading22px · 400
• body14px · 400
• caption13px · 400

所有主要標題與 UI 元素皆使用 Avus。 · 保持嚴格的字體階層，並在各層級間保留慷慨的間距。 · 字體粗細使用 regular 或 medium；避免在標準文字中使用粗體。

04

間距

採用一致的 4px 基礎網格，並搭配慷慨的內邊距（通常水平方向為 24px），為內容區塊創造呼吸空間。

05

表面 (圓角 / 陰影 / 邊線)

極簡使用，在必要時以 1px 實心黑線進行細微的區隔。

06

版面

全出血、雜誌風格的版面，以大型影像為主導，搭配慷慨的留白與固定的頂部導覽列。

07

動效與互動

平滑的 opacity 過渡效果，用於揭示內容。 · 細微的 transform 動畫，用於導覽選單與覆蓋層。 · Flex-basis 過渡效果，用於展開內容區塊。

細微的 opacity 變化或視覺揭示，維持網站精緻的感受。 · 平滑的過渡與狀態變化，通常揭示更多文字或新視圖。

08

組件

• button 極簡，通常僅為文字搭配一個三角形圖示 (▸)，依賴字體排印與留白，而非容器。
• card 透過大型、全寬的圖片呈現內容，下方搭配簡潔的文字排版，作為擴展式的卡片使用。
• input 一個簡單的文字輸入框，僅有單一底部邊框，無背景或可見容器。
• hero 一個巨大、全視口高度的攝影主視覺，搭配超大、粗體的字體直接疊加在圖片上。

09

文案語氣與禁用清單

• 語氣 自信、精緻，並帶點詩意。
• 標題風格 直接、陳述性，且常具啟發性，使用大而簡潔的字體排印。
• 按鈕文案 細微且整合，文字連結旁使用小型三角形圖示 (▸)，而非顯眼的按鈕。

• 不要使用陰影 — 截圖顯示的是扁平、乾淨的佈局。
• 不要在容器上使用圓角 — 截圖顯示的是銳利、零半徑的邊緣。
• 不要在內文中使用粗體字重 — 截圖顯示的是 regular 字重的文字。
• 不要使用複雜的漸層 — 截圖顯示的是純色與乾淨的攝影。
• 不要為主要操作使用寬幅、填滿的按鈕樣式 — 截圖顯示的是簡約的文字連結。
• 不要用多欄文字過度填滿版面 — 截圖顯示的是慷慨的留白。
• 避免: 避免用不必要的 UI 元素或裝飾性圖形使介面變得雜亂。
• 避免: 避免使用厚重的陰影或複雜的漸層。
• 避免: 避免突兀或急促的動畫。

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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