OpenDesign·你的设计资产库

网页参考

Kith

一个摄影驱动的街头服饰品牌,其优先考虑生活方式叙事和季节性lookbook,而非激进的零售网格。

FashionStreetwear

封面待补录,可通过原站查看设计。

01

设计气质 DNA

街头服饰生活方式高端编辑式夏季

一本高端街头服饰目录,感觉像一本电影感的生活方式杂志。

02

色彩

#333333Ink
#FFFFFFBG
#F2F2F2BG soft
#D9D9D9Muted
rgba(51, 51, 51, 1.0)Line

严格的单色画布设计,旨在完全隐退于背景,让充满活力的、真实世界的摄影驱动视觉兴趣。

03

字体

transitional-serif · humanist-sans

  • display28px · 300
  • body12px · 300
  • nav10px · 500

字体统一设置为大写,并采用宽松的字间距。 · 主标题过渡到衬线字体以增加编辑感。 · 正文内容保持极小(12px),以优先为摄影留出视觉空间。

04

间距

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

稳定的4px基础网格,利用充足的留白让全出血摄影得以呼吸。

05

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

sm · 0px
md · 0px
lg · 0px
pill · 9999px

1px solid边框是主要的UI分隔线,根据背景叠加层使用墨色或白色。

06

布局

1440container
12columns
24pxgutter
768 / 1024breakpoints

全出血首屏区域过渡到紧凑的4列产品网格。

07

动效与交互

200msmicro
300mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

标准悬停状态下的平滑颜色和变换过渡。

交互元素上的微妙不透明度偏移或背景颜色填充。 · 主要行动号召按钮上的即时状态变化。

08

组件

  • button 由1px尖锐边框和大写字间距定义的幽灵按钮,圆角为零。
  • card 紧凑、边缘到边缘的图像卡片,无内边距或圆角,形成连续的视觉网格。
  • chip 不适用
  • input 不适用
  • hero 巨大的全视口电影感图像,左下角对齐的衬线文本和幽灵操作按钮。

09

文案语气与禁用清单

  • 语气 精致、自信且注重生活方式,让摄影承担重任。
  • 标题风格 编辑式且以季节为主(例如 ‘Kith Summer 2026’),采用精致的衬线字体。
  • 按钮文案 直接、大写且实用,使用小型几何无衬线文本。
  • 不要在按钮上使用圆角——截图显示的是尖锐、矩形的0px圆角UI元素。
  • 不要使用大型、粗体的无衬线标题——截图显示的是用于展示文本的精致、轻量的衬线字体。
  • 不要使用明亮、饱和的背景颜色——截图显示的是严格的白色 (#FFFFFF) 和米白色 (#F2F2F2) UI表面。
  • 不要使用厚重的投影或3D效果——截图显示的是扁平的、基于2D边框的UI组件。
  • 不要使用混合大小写的句子排版——截图显示的是严格的大写格式和宽字间距。
  • 不要使用小而受限的图像容器——截图显示的是全出血、边缘到边缘的摄影,主导了视口。
  • 避免: 避免喧闹的促销语言或折扣驱动的横幅。
  • 避免: 避免在主要UI组件上使用圆角。
  • 避免: 避免用次要UI元素打乱视觉层次。

10

包内真实截图

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

11

System Prompt

Kith是一个高端街头服饰品牌,具有摄影优先、编辑式的美学。设计系统依赖于严格的单色画布(#FFFFFF背景,#333333墨色),让充满活力的、全出血的生活方式摄影驱动视觉兴趣。字体将用于展示文本的精致过渡衬线与用于UI的简洁humanist-sans(proxima-nova)配对,并始终保持宽字间距和大写。关键规则:永不使用圆角(保持尖锐的0px矩形),避免厚重的阴影或3D效果,并始终优先考虑首图而非UI装饰。对主要行动号召使用带有1px solid边框的幽灵按钮,以维持视觉轻盈感。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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