精選 · 開放 · 免費

Kevinbrenkman

一個服務於創意夥伴的設計主導網站開發實踐。

AgencyPortfolioCleanTypographyStudio
Kevinbrenkman 網站截圖
↓ 下載設計系統包 (12 MB)在 OpenDesign 中開啟

原站: https://www.kevinbrenkman.com

📦 瀏覽包內檔案 →

01

設計氣質 DNA

設計主導網站開發實踐創意夥伴

一個精緻、簡約的工作室作品集，讓作品自己說話。

02

色彩

#000000Ink
#3B3B3BInk soft
#FFFFFFBG
#F8F8F8BG soft
#DFDFDFMuted
rgba(0, 0, 0, 0.1)Line

高對比度的單色基礎，完全襯托專案視覺內容。

03

字型

grotesque-sans · monospace

所有主要文字使用 grotesque-sans 字體類別。 · 所有元素保持 400 的統一字重。 · 所有內文與展示文字應用一致的 0.25px 字間距。

04

間距

4px
8px
16px
24px
32px
48px
64px
96px

嚴格的 4px 基礎單位，文字元素周圍有緊密且一致的 padding。

05

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

sm · 2px
md · 0px
lg · 0px
pill · 999px

使用 rgba(59, 59, 59, 0.3) 的細薄 1px 實心邊框，進行微妙的區隔。

無

06

版面

1440container
12columns
24pxgutter
768 / 1024breakpoints

全寬、邊對邊的佈局，專案圖片橫跨整個視窗寬度，文字則限制在舒適的閱讀寬度內。

07

動效與互動

220msmicro
400mssmall
800msmedium
cubic-bezier(0.215, 0.61, 0.355, 1)easing

hover 狀態下的 padding 與 opacity 過渡效果。 · 互動元素的變換動畫。

細膩的 padding 或 opacity 過渡效果，以指示互動性。 · 即時回應，無複雜的狀態變化。

08

組件

09

文案語氣與禁用清單

10

包內真實截圖

Kevinbrenkman — 桌面首屏（hero）
桌面首屏（hero）
Kevinbrenkman — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Kevinbrenkman — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Kevinbrenkman — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Kevinbrenkman — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Kevinbrenkman — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Kevinbrenkman — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Kevinbrenkman — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Kevinbrenkman — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Kevinbrenkman — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Kevinbrenkman — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Kevinbrenkman — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Kevinbrenkman — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Kevinbrenkman — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Kevinbrenkman — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Kevinbrenkman — 移动首屏
移动首屏

擷取自真實頁面 · 真 computed styles

11

System Prompt

為一個創意工作室設計一個乾淨、專業的作品集網站。使用高對比度的單色調色盤，背景為白色 (#FFFFFF)，文字為黑色 (#000000)，並搭配細膩的灰色 (#F8F8F8, #DFDFDF)。將主要字體設定為 grotesque sans-serif 類別，統一字重為 400，一致的字間距為 0.25px。佈局應為全寬且邊對邊，讓專案視覺成為核心，UI 元素則保持最小化與克制。關鍵禁忌：絕不使用明亮、飽和的強調色；絕不使用粗體或重字重；絕不添加複雜陰影或裝飾性 UI 元素；絕不使用具攻擊性的行動呼籲；絕不使用超過最小 2px radius 的圓角；絕不使用裝飾性排版。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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