01
设计气质 DNA
实验性粗野主义前卫重动效高级时装
一本高级时装编辑杂志,通过粗野主义的数字动效得以生动呈现。
02
色彩
#000000Ink#c9c9c9Ink soft#ffffffBG softrgba(0,0,0,1.0)Line严格的、高对比度的单色方案,依赖黑、白和单一的中性灰,营造出鲜明、戏剧性的视觉场域。
03
字体
- display
80px · 400 - body
11px · 400
使用主要衬线字体系列,保持严格的两级排版层级。 · 为大尺寸展示文本使用紧凑的字距,营造密集、编辑感。 · 正文保持小号、统一尺寸,以最大化负空间。
04
间距
1px5px10px30px80px一种宽松、实验性的韵律,由大量的负空间和用于 UI 元素的精确微间距驱动。
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 0px
pill · 0px
1px solid black 和 1px solid white 主要用于锐利的 UI 元素和蒙版。
0px 0px 0px 0px rgba(0,0,0,0)
06
布局
1440container
12columns
10pxgutter
768 / 1024breakpoints
一种极简主义的、以单栏为主的布局,利用极致的垂直间距和居中元素。
07
动效与交互
220msmicro
600mssmall
800msmedium
cubic-bezier(0.16, 1, 0.3, 1)easing
复杂的 clip-path 显现和视差滚动效果。 · 元素进入视口时平滑、弹性的过渡。 · 大量依赖 transform 属性进行 3D 和 2D 运动。
由指针移动触发的自定义光标状态和细微的文本过渡。 · 元素充当复杂时间轴动画的触发器,而非传统的页面加载。
08
组件
- button 极简的、基于文本的交互,带有指针光标,通常伴随自定义的动态光标。
- card 内容主要通过全宽、大尺寸的图像和文本块来展示,而非传统的卡片形式。
- hero 一个戏剧性的、通常极简的 hero 区域,以巨大的、字距紧密的排版和电影般的转场为特色。
09
文案语气与禁用清单
- 语气 神秘、自信且高度精致。
- 标题风格 简短、有力且通常抽象,以巨大排版呈现。
- 按钮文案 微妙而含蓄,依赖用户的好奇心来驱动探索。
- 不要使用色彩点缀——截图显示的是严格的黑白方案。
- 不要使用圆角——截图显示的是完全锐利、未倒角的几何元素。
- 不要使用俏皮、圆润的无衬线字体——截图展示的是锐利、编辑感的衬线体。
- 不要使用密集的多栏布局——截图显示了大量的负空间和垂直堆叠。
- 不要使用标准、杂乱的 UI 组件——截图显示的是一种极简、定制化的方法。
- 不要使用明亮、欢快的图像——截图呈现的是黑暗、富有情绪和抽象的视觉效果。
- 避免: 不要使用多种颜色——配色方案严格限于单色。
- 避免: 不要使用圆角——几何形状应是锐利且粗野主义的。
- 避免: 不要使用标准 UI 组件,如标准卡片或传统菜单。
- 避免: 不要使用俏皮或装饰性的无衬线字体。
- 避免: 不要回避大面积的空白——负空间是主要设计元素。
- 避免: 不要使用通用的图库照片——图像应高度精选且具有艺术性。
10
包内真实截图
11
System Prompt
本系统定义了一个前卫、粗野主义的数字设计机构作品集。它依赖于一种鲜明的单色方案(#000000, #ffffff)和一种锐利的 didone 衬线字体类别,用于巨大、字距紧密的展示文本。布局由极致的垂直间距、极简 UI 和复杂的动效驱动交互定义,使用 cubic-bezier(0.16, 1, 0.3, 1) 进行 clip-path 和 transform 动画。关键约束:保持严格的单色方案,避免所有圆角,且绝不使用标准、杂乱的 UI 组件。设计必须感觉像是一本高级时装编辑杂志,通过实验性的数字动效得以生动呈现。



