OpenDesign·你的设计资产库

网页参考

Collins

一个高端设计代理网站,平衡了大胆的编辑排版与克制、精致的极简主义。

BrandingStudio
Collins 网站截图

01

设计气质 DNA

精致权威编辑高端

高端设计代理工作室

02

色彩

#140700Ink
#d0d0c8Ink soft
#f8f8f7BG
#ffffffBG soft
#efefefBG quiet
#514c49Muted
rgba(208, 208, 200, 0.5)Line

近乎单色,搭配微妙的暖灰色和高对比度的墨色,以获得最大的编辑冲击力。

03

字体

transitional-serif · humanist-sans

  • display72px · 400
  • heading36px · 400
  • body16px · 400
  • caption14px · 400

04

间距

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

宽裕的留白搭配紧凑的字距,创造出有呼吸感的编辑节奏

05

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

sm · 4px
md · 16px
lg · 96px
pill · 999px

使用中性暖灰色的微妙 1px 边框

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

居中主视觉区,配有宽裕的垂直内边距,后接不对称的内容板块

07

动效与交互

250msmicro
400mssmall
800msmedium
cubic-bezier(0.19, 1, 0.22, 1)easing

裁剪路径显现 · 变换滑动 · 透明度渐变

微妙的颜色过渡,使用 0.7秒缓动 · 即时反馈,无弹跳效果

08

组件

  • button 极简药丸形按钮,深色墨色填充搭配白色文字
  • card 大型、以图片为主的卡片,圆角(16px),用于展示案例研究
  • chip 月桂枝边框的奖项徽章,采用水平 flex 布局排列
  • input 极简的行内文本框,带微妙边框
  • hero 全视口居中标题,配有充足的垂直呼吸空间

09

文案语气与禁用清单

  • 语气 权威而富有吸引力
  • 标题风格 简短、有力的祈使句,带句号
  • 按钮文案 简单的单词操作(探索)
  • 不要使用鲜艳的强调色——网站依赖近乎单色的色板,无主导强调色
  • 不要使用厚重的投影——界面设计是扁平且干净的
  • 不要在标题上使用紧凑的行距——全文保持宽裕的垂直节奏
  • 不要为展示文字使用无衬线体——主视觉标题仅使用衬线体
  • 不要在布局中堆砌多个元素——每个板块保持最大留白和单一焦点
  • 不要使用装饰性边框——唯一可见的边框是 1px 的微妙分隔线
  • 避免: 技术术语
  • 避免: 过于随意的语言
  • 避免: 泛泛的营销说辞

10

包内真实截图

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

这是一个为 Collins 设计的高端设计代理网站,具有编辑、克制的美学风格。色板近乎单色:米白色背景(#f8f8f7)、近黑墨色(#140700)和微妙的暖灰色(#d0d0c8, #514c49)。没有主导的强调色。排版在用于展示标题的过渡衬线体(紧凑负字距)和用于正文的人文主义无衬线体之间交替。宽裕的留白创造出有呼吸感的编辑节奏。关键约束:永不添加彩色强调色,永不为大号文字使用紧凑间距,永不使布局杂乱,永不用无衬线体作为主视觉展示字体,始终保持克制的高端基调,并始终优先呈现以图片为主的案例研究板块,而非文字密集的板块。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明,可复制给 Agent。