精选 · 开放 · 免费

Clay

一家全球化品牌与用户体验设计机构作品集。

EditorialCleanProductCalmRestraint
Clay 网站截图
↓ 下载设计系统包 (17 MB)在 OpenDesign 中打开

原站: https://clay.global

📦 浏览包内文件 →

01

设计气质 DNA

品牌用户体验设计机构全球化设计创意

一家展示高端作品集的优质设计机构。

02

色彩

#06070AInk
#666C7AInk soft
#FFFFFFBG
#EFEDEEBG soft
#F3F4F6BG quiet
#B2B8C2Muted
rgba(6,7,10,1.0)Line

基于黑白单色墨水风格，搭配微妙的暖灰色背景渐变和低饱和度的灰色界面元素。

03

字体

geometric-sans

04

间距

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

采用标准4像素基础网格，在英雄区域留有充足空白，内容容器则使用统一内边距。

05

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

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

采用极简的1像素实线边框，多数卡片无边框，仅设有醒目的药丸形联系按钮。

0 4px 24px rgba(6,7,10,0.08)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

英雄区域采用非对称分栏布局（文字居左，3D图形居右），下方则排列大量基于图片的案例研究卡片网格。

07

动效与交互

150msmicro
650mssmall
900msmedium
cubic-bezier(0.16, 1, 0.3, 1)easing

页面加载时平滑的透明度淡入效果 · 滚动时的柔和变换动画 · 导航链接的hover颜色过渡

导航链接带有微妙的颜色过渡（0.15秒）。 · 交互元素提供即时响应，鼠标光标变为指针。

08

组件

09

文案语气与禁用清单

10

包内真实截图

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

抓自真实页面 · 真 computed styles

11

System Prompt

设计一个高端的全球化品牌与用户体验设计机构网站。使用以纯白(#FFFFFF)和深墨(#06070A)为核心的单色系配色，搭配微妙的暖灰色背景(#EFEDEE)和低饱和度的灰色界面元素(#666C7A)。字体必须使用简洁的几何无衬线字体，包含两种字重：粗体740用于大号展示标题，中等500用于正文文本，两者均需设置紧凑的负字间距。布局应体现充足留白、非对称分栏英雄区域以及大型无边框、以图片为主的案例研究卡片。关键交互元素（如主行动号召按钮）应采用黑色药丸形按钮。关键约束：避免所有装饰性衬线字体，绝不使用高饱和度强调色，并通过平滑的cubic-bezier过渡保持克制、精致的美学风格。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效，整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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