精選 · 開放 · 免費

Format

專為藝術家與創意企業打造的頂級作品集建構工具。

designportfolio

Format 網站截圖

↓ 下載設計系統包 (35 MB)在 OpenDesign 中開啟

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

📦 瀏覽包內檔案 →

01

設計氣質 DNA

創意作品集建構工具專業藝術家

為數位創意工作者打造的精緻高級畫廊入口。

02

色彩

#E9EE64Accent

#FFFFFFInk

#404040Ink soft

#171223BG

#262134BG soft

#532C8AMuted

rgba(255,255,255,0.1)Line

以深紫黑色為基底，對比高飽和霓虹黃與中飽和紫色。

03

字型

grotesque-sans · humanist-sans

display72px · 700
h232px · 500
body16px · 400

04

間距

4px

8px

16px

24px

32px

48px

64px

96px

標準 4px 格線，區塊 padding 採用較大跳躍。

05

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

sm · 4px

md · 8px

lg · 48px

pill · 999px

rgba(0, 0, 0, 0.3) 0px 20px 40px 0px · rgba(0, 0, 0, 0.3) 0px 32px 68px 0px

06

版面

1280container

12columns

24pxgutter

768 / 1024breakpoints

標準分割英雄版面，文字在左，模擬圖在右。下方為基於格線的功能區塊。

07

動效與互動

220msmicro

400mssmall

800msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

按鈕與連結有細微的懸停過渡效果，背景平滑淡入淡出。

互動元素在懸停時，背景顏色或透明度會發生細微變化。 · 透過縮放或顏色變化提供立即視覺回饋。

08

組件

button 高飽和黃色膠囊形按鈕，搭配深色文字，或僅為深色文字連結。
card 功能卡片，帶有細微背景與大型展示排版。
input 簡潔文字輸入框，邊框極簡。
hero 全版面深色英雄區，搭配大型排版、紫色點綴與傾斜的作品集模擬圖。

09

文案語氣與禁用清單

語氣專業、啟發人心且具創意。
標題風格 大膽、直接、以效益為導向。
按鈕文案 清晰、行動導向且具鼓勵性（例如：「立即開始建構」）。

勿使用淺色背景——截圖顯示為深紫黑色（#171223）基底。
標題勿使用襯線字體——截圖顯示為簡潔的 grotesque-sans。
勿使用低飽和度點綴色——截圖顯示為高飽和黃色（#E9EE64）與紫色（#905ED1）。
主要按鈕勿使用尖銳圓角——截圖顯示為膠囊形 border-radius（48px+）。
英雄區文字勿過小——截圖顯示為大型 72px 展示排版。
功能區塊勿使用複雜格線版面——截圖顯示為充足留白與聚焦的欄位。
避免: 技術術語
避免: 企業僵化感
避免: 雜亂版面

10

包內真實截圖

Format — 桌面首屏（hero） — 桌面首屏（hero）

Format — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Format — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Format — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Format — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Format — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Format — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Format — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Format — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Format — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Format — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Format — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Format — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Format — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Format — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Format — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Format — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Format — 移动首屏 — 移动首屏

擷取自真實頁面 · 真 computed styles

11

System Prompt

Format.com 是一款頂級作品集建構工具，專為創意專業人士，特別是藝術家所設計。它採用深沉、精緻的調色盤，背景為深紫黑色（#171223），行動呼籲處點綴高飽和霓虹黃（#E9EE64），並以中飽和紫色（#905ED1）作為亮點。排版簡潔現代，展示文字使用 grotesque-sans，內文則使用 humanist-sans。關鍵設計規則：絕不使用淺色背景、避免低飽和點綴色，並確保所有主要按鈕為高對比度的膠囊形。版面寬敞且聚焦，強調大膽醒目的標題與高品質作品集模擬圖，以激發創意與專業感。

把這份品味接進你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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