精选 · 开放 · 免费

Serpentine

一个精致的编辑式博物馆界面，采用戏剧性的黑白字体和以内容为先的布局。

01

设计气质 DNA

一个精心策划的画廊空间，平衡了大胆的建筑风格字体与宁静的摄影背景。

02

色彩

高对比度单色系，通过鲜明的黑白元素优先突出艺术品。

03

字体

geometric-sans · transitional-serif

• display56px · 700
• body16px · 400
• caption13px · 700

所有导航和UI标签必须使用大写几何无衬线字体。 · 文章段落必须使用过渡衬线字体以提高可读性。 · 大型展示标题保持紧凑的负字距。

04

间距

基于4px的基准单位，确保大型字体元素的对齐清晰。

05

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

严格使用1px实线边框，黑色或白色，以保持清晰的边缘。

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

06

布局

全出血摄影主视觉区域，后接结构化、宽边距的内容区块。

07

动效与交互

交互元素上的平滑颜色和不透明度过渡 · 模态覆盖层的标准线性淡入淡出

文本链接上的微妙不透明度变化或颜色反转。 · 通过标准浏览器焦点状态提供即时视觉反馈。

08

组件

• button 极简矩形，采用纯黑或纯白填充和大写文本。
• card 简洁、无边框的图片容器，依赖大字体建立层级。
• chip 用于导航的简单带下划线的文本标签。
• input 标准表单字段，强调底部边框。
• hero 高对比度摄影背景，搭配超大字体叠加层。

09

文案语气与禁用清单

• 语气 权威、文化精致且极简。
• 标题风格 简短、有力、全大写的指令性文字，引人注目。
• 按钮文案 直接且朴素，使用纯文本按钮或简单箭头。

• 不要使用圆角——截图显示所有容器严格为0px圆角
• 不要使用装饰性手写字体——截图仅显示粗体几何无衬线和过渡衬线字体
• 不要使用俏皮、鲜艳的颜色——截图显示严格的高对比度黑白配色
• 不要使用重度投影的按钮——截图显示扁平、纯色填充、带简单边框的按钮
• 不要使用小型、隐藏的导航——截图显示页眉中粗体、大写的文本链接
• 不要使用密集、拥挤的网格——截图显示大量留白和全出血摄影
• 避免: 避免俏皮或过于随意的语言。
• 避免: 避免装饰性或手写风格的字体。
• 避免: 避免主要UI元素使用圆角。
• 避免: 避免过度使用鲜艳色彩。
• 避免: 避免标准按钮使用投影。
• 避免: 避免布局杂乱或密集。

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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