精選 · 開放 · 免費

DIA Studio

一個設計與創新工作室，透過高對比、網格化的編輯介面呈現其作品。

01

設計氣質 DNA

一個在精緻、排版驅動的空間中，經過策展的設計作品畫廊。

02

色彩

嚴格的單色調色盤，優先考慮最大對比度，以中立方式呈現作品。

03

字型

transitional-serif

• display56px · 500
• body16px · 450

所有介面元素使用襯線字體（JJannon）。 · 保持緊湊的行高（約1.1），營造緊密、密集的排版感受。 · 使用方括號作為操作和篩選器的標準介面分隔符。

04

間距

緊湊且網格對齊的間距，垂直內距極小，優先考慮密度。

05

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

無可見介面邊框；透過留白、色彩對比和網格對齊實現分隔。

06

版面

嚴格、密集的馬賽克網格佈局，不同長寬比的圖片緊密排列。

07

動效與互動

畫廊項目懸停時的透明度漸變

圖片縮圖的細微透明度變化，表示可互動性。 · 直接導覽至專案頁面或分類視圖。

08

組件

• button 無傳統按鈕；互動透過方括號包圍的純文字連結處理。
• card 專案卡片為純攝影縮圖，以密集、無邊框的網格呈現，無覆蓋層。
• chip 分類篩選器是方括號包圍的文字列表項目。
• input 搜尋功能以方括號包圍的簡單文字提示表示。
• hero 首圖區域非單一大型圖片，而是從視窗頂端延伸的連續、無斷裂馬賽克作品網格。

09

文案語氣與禁用清單

• 語氣 專業、自信且含蓄。
• 標題風格 宣言式且直接，使用經典襯線字體。
• 按鈕文案 含蓄且排版導向，使用方括號取代傳統按鈕。

• 避免使用圓角——介面嚴格保持銳利矩形。
• 避免使用強烈強調色——網站完全依賴單色調色盤。
• 避免使用按鈕元件——互動採用方括號內的文字連結。
• 避免使用陰影效果——介面完全平面化。
• 避免使用無襯線字體——網站嚴格使用襯線字體。
• 避免在馬賽克網格中產生大垂直間隙——網格緊密排列。
• 避免: playful 語言
• 避免: 誇張的行銷文案
• 避免: 過度使用大寫字母
• 避免: 表情符號或視覺裝飾

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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