精选 · 开放 · 免费

Wearechaiboy

为一个当代茶品牌打造的黑暗、高端的编辑式电商体验。

01

设计气质 DNA

为现代茶品牌打造的高时尚杂志编辑风格。

02

色彩

极致高对比度的单色，以黑色画布和白色排版为基础，依靠摄影来赋予视觉重量。

03

字体

grotesque-sans

• display54px · 400
• body14px · 400
• small11px · 400

所有导航和功能文本使用大写字母。 · 为大号展示字体应用紧凑的字间距（-1px）。

04

间距

紧凑而有分寸，利用大量的留白来强调编辑摄影。

05

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

1px solid #AFAFAF 或 1px solid rgba(255,255,255,0.2)

06

布局

全出血的垂直画布，带有严格的页眉/页脚边界和一个滚动的滚动条。

07

动效与交互

用于模态覆盖层和UI状态变化的平滑透明度过渡。 · 用于推广消息的线性滚动滚动条。

微妙的颜色变化或透明度改变以指示可交互性。 · 通过透明度或背景颜色过渡提供即时的视觉反馈。

08

组件

• button 幽灵或轮廓样式，带有微妙的圆角，使用大写文本和透明背景。
• card 以图像为中心，UI极简，依靠边到边的摄影。
• chip 用于类别的小型轮廓徽章，带有圆角。
• input 模态覆盖层内简单的仅底部边框文本字段。
• hero 全屏沉浸式摄影，作为主要视觉元素。

09

文案语气与禁用清单

• 语气 精致、高端、直接。
• 标题风格 简短、有力、全大写的陈述，吸引注意力。
• 按钮文案 克制但清晰，通常使用幽灵按钮或简单的带下划线文本。

• 不要使用多种品牌颜色——截图显示一个由黑色、白色和灰色构成的严格单色调色板。
• 不要使用装饰性或手写字体——截图显示仅使用干净的无衬线字体。
• 不要使用厚重的投影——截图显示平坦、边到边的摄影，没有立体感。
• 不要使用复杂的多色渐变——截图显示纯黑色背景。
• 不要在导航中使用小写字母——截图显示页眉和页脚的所有文本均为大写。
• 不要使用圆角卡片边框——截图显示的是锐利的矩形容器或全出血图像。
• 避免: 避免使用多种颜色；保持调色板严格单色。
• 避免: 避免装饰性或手写风格字体；保持干净、现代的美学。
• 避免: 避免厚重的投影或不必要的渐变。
• 避免: 避免杂乱的布局；优先考虑大型图像和留白。
• 避免: 避免俏皮或随意的语气。

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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