精选 · 开放 · 免费

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 网格，板块内边距使用更大的跳跃值。

05

表面 (圆角 / 阴影 / 边线)

sm · 4px

md · 8px

lg · 48px

pill · 999px

1px solid rgba(255,255,255,0.1)

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）。
不要在主要按钮上使用尖锐的圆角——截图显示胶囊形圆角（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