精選 · 開放 · 免費

Cydstumpel Nl

一個為創意開發者與演講者打造的大膽、富有表現力的作品集網站。

01

設計氣質 DNA

一個活潑且大膽的創意開發者作品集展示。

02

色彩

溫暖的米白色背景，搭配粗體黑色與高飽和度的紅色強調色，並輔以次要色系用於內容卡片。

03

字型

grotesque-sans · transitional-serif

• display80px · 400
• heading40px · 700
• body16px · 400

04

間距

以一致的 4px 為基準，並為卡片佈局提供寬裕的間距。

05

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

卡片採用醒目的 2px 實心邊框，使用強調色紅、藍、黑。

None: None · None: None

06

版面

非對稱的編輯式佈局，包含大型重疊的滾動橫幅與三欄式卡片網格。

07

動效與互動

在 hover 和 focus 狀態下有流暢的過渡效果 · 互動元素的 border-radius 變形 · 細膩的 opacity 淡入淡出

細膩的狀態變化，可能涉及顏色或邊框過渡。 · 按鈕與連結的啟用狀態。

08

組件

• button 大寫粗體的文字按鈕，通常帶有獨特的 border-radius 與 hover 效果。
• card 擁有粗壯彩色邊框、折角細節與膠囊形標籤的卡片。
• chip 小型圓角膠囊，用於 CSS、JS 和 ANIMATION 等標籤。
• input 在提供的截圖中不明顯。
• hero 一個巨大的水平滾動橫幅，帶有重疊文字與中央插圖。

09

文案語氣與禁用清單

• 語氣 自信、活潑且專業。
• 標題風格 粗體、大寫且極富表現力，使用 condensed sans-serif 與斜體 serif 字體。
• 按鈕文案 直接、大寫且具行動導向，常置於帶有邊框的容器中。

• 不要使用平坦、企業化的佈局——截圖顯示的是一種富有表現力、重疊的編輯式風格，並配有巨大的滾動橫幅。
• 不要使用冷色調、深色的色彩方案——截圖顯示的是溫暖的米白色背景搭配大膽的紅色強調。
• 不要使用標準的系統字體——截圖顯示的是粗體 condensed grotesque 與優雅的 transitional serif 字體的組合。
• 不要使用細薄的 1px 邊框——截圖顯示的是卡片與容器上醒目的 2px 實心邊框。
• 不要所有事物都使用微妙、柔和的顏色——截圖使用的是高飽和度的紅色作為主要強調色。
• 不要使用純粹基於網格、對稱的佈局——截圖顯示的是元素間重疊、非對稱的排列。
• 避免: 被動語氣
• 避免: 通用企業術語
• 避免: 過於正式的語調

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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