精选 · 开放 · 免费

Ganni

一个以粗犷字体和高冲击力摄影为特色的高端时尚电商平台。

01

设计气质 DNA

一本大胆、极简的时尚编辑刊物

02

色彩

中性画布，让生动的摄影驱动视觉能量。

03

字体

grotesque-sans

• display26px · 500
• body16px · 400
• small14px · 400
• micro12px · 400

导航和类别标签通常使用大写字母。 · 标题使用混合大小写或全大写，并采用紧凑的字间距。 · 正文使用标准的首字母大写句式。

04

间距

一个灵活的4px基础网格，确保组件内部间距和布局间隙保持一致。

05

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

用于标准交互元素的1px黑色实线边框。

rgba(0, 0, 0, 0.4) 0px 4px 8px 0px

06

布局

一个自适应的流体网格系统，可从全出血摄影布局切换至多栏产品布局。

07

动效与交互

用于标准界面状态变化的平滑0.15秒缓入过渡。 · 用于较大元素移动的0.8秒 cubic-bezier 过渡。

通过细微的背景或文字颜色变化指示状态更改。 · 交互元素的标准指针交互。

08

组件

• button 高对比度的纯色块（通常是黑色背景配白色文字），不带圆角。
• card 一个简洁、结构化的产品展示布局，以一张主图为核心，辅以最少的文字信息。
• input 通过底部边框定义的极简矩形输入框。
• hero 全出血摄影图像，结合大号字体和醒目的行动号召按钮。

09

文案语气与禁用清单

• 语气 直接、简洁且自信。
• 标题风格 简短、有力，常通过特定的大写形式进行风格化处理。
• 按钮文案 清晰且带有紧迫感，频繁使用全大写文本。

• 不要在按钮上使用柔软的圆角——截图显示的是棱角分明的矩形界面元素。
• 不要依赖单一的强强调色——截图显示的是以摄影为主导的、以单色为主的配色方案。
• 不要使用纤细或花哨的字体——截图显示的是粗壮、实心的无衬线字体。
• 不要用过多的边框使布局显得杂乱——截图显示的是通过清晰、开放的留白来界定元素。
• 不要为导航使用低对比度文本——截图显示的是浅色背景上的醒目黑色文字。
• 不要为标准界面元素使用装饰性阴影——截图显示的是一种扁平、干净的美学风格。
• 避免: 过于装饰性的字体
• 避免: 过度使用次要颜色
• 避免: 复杂的界面模式

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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