精选 · 开放 · 免费

Sneakinpeace

一个高端流媒体平台，精选奢华运动鞋活动和编辑内容。

01

设计气质 DNA

一个高端运动鞋和时尚活动的直播杂志频道。

02

色彩

一个柔和、中性的色调，使用暖灰和米白，让全出血的摄影和视频内容占据主导，辅以一个功能性的红色点缀。

03

字体

transitional-serif · neo-grotesque-sans

• display36px · 400
• body14px · 400
• caption12px · 500

04

间距

灵活的间距，优先用于叠加卡片和导航元素的 padding，而非严格的垂直网格。

05

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

使用微妙的边框和柔和的 box-shadow，将浮动元素与视频背景区分开来。

0px 1px 6px -1px rgba(0, 0, 0, 0.08) · 0px 1px 1px -1px rgba(0, 0, 0, 0.08)

06

布局

全出血媒体画布，搭配用于内容和导航的浮动叠加面板。

07

动效与交互

用于内容淡入的平滑透明度过渡。 · 交互式导航链接的微妙 hover 状态。

导航链接和按钮上的微妙透明度变化。 · 交互元素使用标准指针光标，可选内容使用文本光标。

08

组件

• button 药丸形状的状态徽章（例如 LIVE）和用于媒体控制的小型图标按钮。
• card 带有柔和阴影和圆角的浮动面板，包含视频详情或产品列表。
• chip 小型、圆角的类别标签（例如 Womens, Mens），附属于产品列表。
• input 基于文本的极简导航和搜索输入框，没有厚重的视觉边框。
• hero 全屏视频或摄影背景，叠加描述性文字。

09

文案语气与禁用清单

• 语气 精致、经过策展、编辑驱动。
• 标题风格 活动标题使用粗体、优雅的衬线字体，营造高端时尚杂志的感觉。
• 按钮文案 微妙、功能性的基于文本的导航和行动链接。

• 不要使用厚重的装饰元素——截图显示的是极简、功能性的界面叠加层。
• 主要标题不要使用无衬线字体——截图显示特色标题使用的是优雅的过渡衬线字体。
• 不要使用明亮、饱和的背景颜色——截图显示的是中性灰色 (#F0EEED) 和白色。
• 不要使用强烈的投影——截图显示用于营造层次感的是非常微妙、柔和的 box-shadow。
• 不要用密集的文字使布局杂乱——截图显示的是充足的留白和聚焦的内容块。
• 主要元素不要使用尖锐、方形的角——截图显示一致地使用圆角边框 (4px 到 6px)。
• 避免: 与摄影内容冲突的明亮、霓虹色彩。
• 避免: 分散视觉媒体注意力的厚重、华丽字体。
• 避免: 与全屏视频体验竞争的密集、杂乱布局。

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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