OpenDesign·你的设计资产库

网页参考

Represent

一个极简、大胆的时尚编辑网站,专注于强烈排版与全出血摄影。

FashionStreetwear

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

01

设计气质 DNA

街头服饰高端极简大胆编辑风

以简洁编辑杂志形式呈现的高端街头服饰图录。

02

色彩

#AE0200Accent
#000000Ink
#575757Ink soft
#F7F7F7BG
#C7C7C7Muted
rgba(0,0,0,0.1)Line

高对比度单色体系,辅以单一深红色用于强调。

03

字体

grotesque-sans

  • display48px · 700
  • h232px · 600
  • body16px · 400
  • caption12px · 400

导航、标签及次级UI元素使用大写字母。 · 大型展示字体保持紧密字间距。

04

间距

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

8px基础单位,配合4px微调步进,用于紧凑的UI元素。

05

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

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

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

rgba(0, 0, 0, 0.3) 0px 0px 24px 0px

06

布局

1440container
12columns
24pxgutter
768 / 1024breakpoints

全出血摄影搭配叠加文字,过渡至产品列表的整洁网格。

07

动效与交互

200msmicro
300mssmall
500msmedium
ease-in-outeasing

悬停与滚动时平滑的透明度与变换过渡。 · 图像切换的微妙淡入淡出。

交互元素在悬停时产生细微透明度变化或轻微缩放。 · 通过过渡效果提供即时视觉反馈。

08

组件

  • button 纯黑色矩形按钮搭配白色大写文字,偶尔出现胶囊形变体。
  • card 无边框的整洁产品卡片,聚焦于图像展示。
  • chip 用于筛选的大写粗体文字标签。
  • input 极简输入框,采用1px实线底部边框。
  • hero 全屏、高冲击力的摄影首屏,叠加排版文字。

09

文案语气与禁用清单

  • 语气 极简、直接、高端。
  • 标题风格 粗体、大写、紧凑。
  • 按钮文案 行动导向、大写、高度醒目。
  • 勿使用装饰性字体——截图显示严格依赖粗体无衬线字体。
  • 勿在主要UI元素上使用圆角——截图显示为利落的直角边缘。
  • 勿使用多色配色——截图显示为严格的单色基底搭配单一红色点缀。
  • 勿在卡片上使用细微投影——截图显示为平面或非常厚重、特定的阴影。
  • 勿在主要导航中使用混合大小写——截图显示UI标签均采用大写。
  • 勿使用柔和、柔和的背景色——截图显示为纯白或浅灰(#F7F7F7)基底。
  • 避免: 手写字体
  • 避免: 艳丽渐变
  • 避免: 杂乱布局

10

包内真实截图

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

11

System Prompt

这是一个高端街头服饰时尚网站,采用极简编辑美学。设计DNA植根于高对比度单色体系(黑色#000000搭配白色#F7F7F7),使用粗体、大写无衬线字体(STKBureau)。布局高度依赖全出血摄影首屏与结构化12列网格。关键点缀色为深红色(#AE0200)。关键禁忌:主要元素勿使用圆角,勿引入装饰性或手写字体,勿使用多色配色。整体感觉干净、大胆且高度克制。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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