精選 · 開放 · 免費

10Xdesigners

一個高對比度、以排版為主導的中心，供設計師分享與發現資源。

01

設計氣質 DNA

一座高端、極簡的設計師工具與資源庫。

02

色彩

運用嚴格的黑白基底，搭配單一高飽和度紅色點綴的鮮明、高對比度極簡主義。

03

字型

grotesque-sans

• display300px · 400
• heading32px · 400
• body18px · 400
• small13px · 400

為巨大的展示文字使用極緊湊的字距調整 (-12px)，以維持視覺凝聚力。 · 在所有元素間保持一致的正常字重 (400)，以保持設計的乾淨與統一。

04

間距

嚴格的 4px 基線網格，元素之間留有充裕、有意識的間距。

05

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

使用 1px solid rgba(148, 148, 148, 0.3) 作為分隔線和輸入框狀態，並保持節制。

無

06

版面

全版寬的首頁橫幅搭配巨大字體，後接結構化的網格內容區域。

07

動效與互動

平滑、線性的 UI 狀態變換可見性過渡。 · 互動元素上細膩的懸停效果。

細膩的色彩偏移或透明度變化，以指示可互動性。 · 立即、靈敏的回饋，無複雜動畫。

08

組件

• button 膠囊造型的主操作按鈕，採用高對比度色彩與乾淨字體。
• card 極簡風格的卡片，專注於內容，具有清晰的字體與細膩的邊框。
• chip 類似單選按鈕的選擇區塊，具有明確的啟用與未啟用狀態。
• input 乾淨的文字輸入框，圓角邊框，並具備平滑的聚焦過渡效果。
• hero 全螢幕、沉浸式的首頁橫幅區塊，由巨大的排版陳述主導。

09

文案語氣與禁用清單

• 語氣 直接、自信且專業，面向熟悉設計的受眾。
• 標題風格 大膽、巨大且具排版表現力，常使用緊湊間距。
• 按鈕文案 清晰、導向行動且視覺突出，引導使用者進行下一步操作。

• 不要使用多種字重 — 畫面截圖顯示僅使用字重 400。
• 不要使用多種強調色 — 畫面截圖顯示僅有一個紅色強調色 (#FF1841)。
• 不要使用柔和或低飽和度的背景色 — 畫面截圖顯示純黑背景。
• 不要使用緊湊、密集的間距 — 畫面截圖顯示充裕的留白與大型排版比例。
• 不要使用複雜、裝飾性的 UI 元素 — 畫面截圖顯示乾淨、極簡的元件。
• 不要使用厚重的陰影或 3D 效果 — 畫面截圖顯示平面的、高對比度的表面。
• 避免: 避免過度裝飾的字體或過多的配色方案。
• 避免: 避免密集的段落；使用充裕的間距與清晰的層次結構。
• 避免: 避免會分散核心內容注意力的複雜動畫。

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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