精選 · 開放 · 免費

Handsomefrank

大膽、以插畫為核心的創意機構作品集，搭配活潑的字體排印與鮮豔色塊。

AgencyPortfolioBold TypographyExpressiveClean
Handsomefrank 網站截圖
↓ 下載設計系統包 (40 MB)在 OpenDesign 中開啟

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

📦 瀏覽包內檔案 →

01

設計氣質 DNA

活潑大膽創意機構作品集

一個展示插畫家的充滿活力的創意工作室

02

色彩

#000000Ink
#FFFFFFBG
#2C2C2CMuted
rgba(0,0,0,0.1)Line

黑與白的高對比配對，搭配鮮豔飽和的色塊以區分不同區塊

03

字型

transitional-serif · grotesque-sans

所有主要標題使用過渡襯線體，傳達活潑感與權威性 · 內文與次要資訊使用怪誕無襯線體，確保可讀性 · 大型展示文字套用緊湊字距（-1.6px）以增強視覺衝擊

04

間距

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

寬裕的留白，內容區塊周圍使用較大的 padding 值

05

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

sm · 4px
md · 8px
lg · 12px
pill · 999px

盡量減少或不使用，依賴色塊與字體排印建立層級

06

版面

1280container
12columns
24pxgutter
768 / 1024breakpoints

不對稱佈局，搭配大型色塊與重疊插畫

07

動效與互動

220msmicro
400mssmall
800msmedium
cubic-bezier(0.23, 1, 0.32, 1)easing

懸停狀態的平滑過渡 · 互動元素的變形動畫 · 使用 cubic-bezier 緩動實現流體動態

細微的縮放與顏色過渡 · 透過變形變化提供即時視覺回饋

08

組件

09

文案語氣與禁用清單

10

包內真實截圖

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

擷取自真實頁面 · 真 computed styles

11

System Prompt

Handsome Frank 是一個大膽、以插畫為核心的創意機構作品集，標題使用過渡襯線體，內文使用怪誕無襯線體。關鍵色彩包括黑色（#000000）與白色（#FFFFFF）以建立對比，以及鮮豔的區塊背景色如水藍（#2BA58E）、紅（#E23B3B）與橘（#F4A261）。設計強調大型、具表現力的字體（70px 展示字型、38px 標題字型），並搭配緊湊字距。關鍵禁忌：避免使用細字重，絕不對主要色塊添加圓角，不使用柔和粉彩色調，也不將所有文字置中對齊。該網站透過全視窗色塊搭配重疊插畫與大膽陳述式標題，來展示插畫家的作品。

把這份品味接進你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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