精選 · 開放 · 免費

Serpentine

一個精緻的編輯式博物館介面，採用戲劇性的黑白字體與內容優先的版面。

01

設計氣質 DNA

一個策展的藝廊空間，平衡大膽的建築感字體與寧靜的攝影背景。

02

色彩

高對比單色調色盤，透過極致的黑白元素優先呈現藝術品。

03

字型

geometric-sans · transitional-serif

• display56px · 700
• body16px · 400
• caption13px · 700

所有導覽與 UI 標籤必須使用全大寫的幾何無襯線體。 · 文章段落必須使用過渡襯線體以確保可讀性。 · 大型標題維持緊湊的負字距。

04

間距

一致的 4px 基礎單位，確保大型字體元素的整齊對齊。

05

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

嚴格的 1px 實色邊框，使用黑色或白色以保持銳利邊緣。

rgba(0,0,0,0.3) 0px 32px 68px 0px

06

版面

全版出血的攝影主視覺區塊，後接結構化、寬邊距的內容區塊。

07

動效與互動

互動元素的流暢顏色與透明度過渡 · 標準線性淡入淡出用於彈窗覆蓋層

文字連結的細膩透明度變化或顏色反轉。 · 透過標準瀏覽器 focus 狀態提供即時視覺回饋。

08

組件

• button 極簡的矩形按鈕，實心黑色或白色填充，搭配全大寫文字。
• card 簡潔、無邊框的圖片容器，依賴大型字體建立層次。
• chip 用於導覽的簡單底線文字分頁。
• input 標準表單欄位，強調底部邊框。
• hero 高對比攝影背景，搭配超大字體的疊加文字。

09

文案語氣與禁用清單

• 語氣 具權威感、文化精緻且極簡。
• 標題風格 簡短、有力、全大寫的命令式標語，能立即吸引注意。
• 按鈕文案 直接且無裝飾，使用純文字按鈕或簡單箭頭。

• 不要使用圓角 — 螢幕截圖顯示所有容器皆為嚴格的 0px 圓角半徑
• 不要使用裝飾性手寫字體 — 螢幕截圖僅顯示大膽幾何無襯線體與過渡襯線體
• 不要使用俏皮、鮮豔的色彩 — 螢幕截圖顯示嚴格的高對比黑白調色盤
• 不要使用帶有厚重陰影的按鈕 — 螢幕截圖顯示平面、實心填充且具簡單邊框的按鈕
• 不要使用小型、隱藏的導覽 — 螢幕截圖顯示頁首中大膽的全大寫文字連結
• 不要使用密集、擁擠的網格 — 螢幕截圖顯示充足的留白與全版出血攝影
• 避免: 避免使用俏皮或過於隨意的語言。
• 避免: 避免使用裝飾性或手寫風格的字體。
• 避免: 避免主要 UI 元素使用圓角。
• 避免: 避免過度使用鮮豔色彩。
• 避免: 避免標準按鈕使用陰影效果。
• 避免: 避免擁擠或密集的版面。

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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