精选 · 开放 · 免费

Represent

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

01

设计气质 DNA

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

02

色彩

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

03

字体

grotesque-sans

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

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

04

间距

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

05

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

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

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

06

布局

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

07

动效与交互

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

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

08

组件

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

09

文案语气与禁用清单

• 语气 极简、直接、高端。
• 标题风格 粗体、大写、紧凑。
• 按钮文案 行动导向、大写、高度醒目。

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

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko