精选 · 开放 · 免费

Design Museum

一个精致的文化机构网站，优先考虑摄影视觉冲击与大胆的字体标识。

01

设计气质 DNA

一座大胆、具有建筑感的画廊入口，转化为数字界面。

02

色彩

高对比度单色系，搭配建筑感黄色强调色与沉浸式摄影。

03

字体

geometric-sans · grotesque-sans

• display50px · 700
• heading30px · 700
• body15px · 400
• small12px · 500

为大型展示文字使用紧凑的字距，营造建筑张力。 · 导航和操作标签优先采用大写样式。 · 在展示字体与正文字重之间保持高对比度，以建立清晰的层级。

04

间距

基于4px的网格，主要区块间保持充裕留白，让摄影画面得以呼吸。

05

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

界面元素使用1px黑色实线边框，激活状态使用2px实线。

0px 32px 68px 0px rgba(0,0,0,0.3)

06

布局

全宽摄影主视觉区，内容居中，信息布局基于网格。

07

动效与交互

文本元素在滚动时采用错落淡入与上滑动画。 · 交互元素的平滑悬停过渡效果。 · 主视觉图像上微妙的视差效果。

颜色反转或背景快速切换。 · 提供即时视觉反馈，伴随轻微缩放或透明度变化。

08

组件

• button 高对比度纯色块（黑/白/黄），棱角分明，文字大写。
• card 通过锐利边框或极简内边距定义的干净容器。
• chip 基于文本的简洁标签，可选边框。
• input 极简表单元素，边框干净，内边距标准。
• hero 大幅摄影背景，搭配粗体排版覆盖层。

09

文案语气与禁用清单

• 语气 具有机构感、权威性，同时热情且富有前瞻性。
• 标题风格 大胆、简洁，措辞常具建筑感。
• 按钮文案 直接、行动导向，常使用大写以示强调。

• 不要在主要按钮上使用圆角——截图显示按钮为锐利的矩形形状。
• 不要为文本使用低对比度颜色——截图显示为白或黄背景上的高对比度黑色文本。
• 不要使用装饰性或衬线字体——截图显示为几何与怪诞无衬线字体族。
• 不要使用柔和、粉彩的强调色——截图显示为大胆、高饱和度的黄色强调。
• 不要让所有元素都居中导航——截图显示为左对齐文本搭配居中的汉堡菜单。
• 不要在卡片上使用充裕的圆角——截图显示为锐利的边角或极小的圆角。
• 避免: 避免使用过度装饰或手写风格字体。
• 避免: 避免使用柔和的粉彩调色板。
• 避免: 避免在主要按钮上使用圆角。
• 避免: 避免留白不足的杂乱布局。
• 避免: 避免使用泛泛的库存摄影。
• 避免: 避免关键信息使用低对比度文本。

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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