01
设计气质 DNA
极简主义大胆排版高对比度开发者
一个用于交互设计作品的、冷峻而粗犷的展览空间。
02
色彩
#FFFF02Accent#000000Ink#171717Ink soft#8f8f8fBG#edededBG soft#6f6f6fMutedrgba(0, 0, 0, 1)Line以高对比度的单色为基底,搭配单一高饱和度的强调色。
03
字体
- display
85px · 400 - body
16px · 400 - label
14px · 400
关键文本元素使用极大的字号。 · 展示文本保持紧凑的行高。 · 字体粗细主要限制为 400。
04
间距
4px8px16px24px32px48px64px96px容器内部留有宽裕的 padding。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 12px
lg · 12px
pill · 9999px
部分元素使用 1px solid black 边框。
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
不对称的卡片式布局。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
容器的 hover 过渡效果。
交互元素上的光标变为 pointer。 · 标准点击行为。
08
组件
- button 无明显标准按钮;交互主要通过大型容器的 hover 状态实现。
- card 灰色背景上的白色矩形卡片。
- chip 未使用。
- input 未使用。
- hero 白色卡片上的大型排版,有时与大型几何图形重叠。
09
文案语气与禁用清单
- 语气 直接、自信且极简。
- 标题风格 超大尺寸、小写或句子首字母大写的排版陈述。
- 按钮文案 细微或无明显设计,依赖视觉层次引导。
- 不要使用厚重的投影——截图显示的是扁平、无边框的白色卡片。
- 不要到处使用明亮、饱和的背景色——截图显示以中性灰为主导。
- 不要使用小而精致的排版作为标题——截图显示的是巨大、粗体的文字。
- 不要使用多种字体粗细——截图显示主要依赖 400 粗细。
- 不要使用传统的导航栏——截图显示的是极简的自定义顶部导航。
- 不要在所有地方使用圆角——截图显示的是尖角或仅略微圆润的角。
- 避免: 装饰性元素
- 避免: 复杂渐变
- 避免: 拥挤的布局
10
包内真实截图
11
System Prompt
设计一个极简、以排版为核心的作品集网站,灵感源自粗野主义网页设计。采用冷峻、高对比度的色彩方案,以中性灰(#8f8f8f, #ededed)和纯黑(#000000)为主导,搭配单一、鲜艳的强调色(如电光黄 #FFFF02),并谨慎用于几何图形。排版应粗犷且巨大,展示文本使用 grotesque-sans 类别,正文使用 system-sans,主要保持统一的 400 粗细。布局应采用不对称的卡片式,容器内部留有宽裕的 padding(例如 64px)。关键约束:避免装饰性元素或复杂渐变,绝不使用小而精致的排版作为标题,并始终优先选择大胆、有冲击力的排版陈述而非密集的段落。










