01
设计气质 DNA
复古趣味防晒泳池边怀旧
一本在网页上活过来的复古度假手册。
02
色彩
#333333Ink#ebe6dcBG#d8d4cbMutedrgba(51,51,51,1.0)Line温暖的米白色背景搭配深灰色文字，确保高可读性。
03
字体
- display
48px · 400 - heading
30px · 400 - body
16px · 400 - small
18px · 400
使用过渡衬线字体用于大型推广和展示文本。 · 使用人文无衬线字体用于正文和导航。 · 展示字体保持负字间距。
04
间距
4px8px16px24px32px48px64px96px基于4px网格的统一间距，主要部分使用更大的间隔。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
4px solid #333333
rgba(0, 0, 0, 0.1) 1px 1px 5px 0px · rgba(0, 0, 0, 0.75) 2px 2px 2px 0px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
不对称网格，图像重叠且留有大量空白。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0, 0.75, 1)easing
交互元素上的平滑颜色和变换过渡。
微妙的颜色变化或图像缩放。 · 标准指针光标。
08
组件
- button 全宽按钮，采用圆润的药丸形状和温暖的黄色背景。
- card 以图像为主的卡片，带有细边框和复古标签，如“FIG. 1”。
- input 简洁输入框，仅有底部边框，无背景填充。
- hero 全宽背景图像，带有4px细边框框架和叠加文本。
09
文案语气与禁用清单
- 语气 诙谐、怀旧且带有趣味性的权威感。
- 标题风格 大型、优雅的衬线字体排版。
- 按钮文案 药丸形状按钮，搭配粗体无衬线文本。
- 不要使用纯白背景——截图显示的是温暖的米白色（#ebe6dc）。
- 不要为原始按钮使用明亮、高饱和度的强调色——截图显示的是温暖的柔和黄色（#f1d27a）。
- 不要为展示文本使用粗重的无衬线字体——截图显示的是纤细的过渡衬线字体。
- 不要使用12列对称布局和紧密的栏间距——截图显示的是宽敞的间距和不对称对齐。
- 不要为原始按钮使用尖锐的矩形角——截图显示的是完全圆润的药丸形状。
- 不要使用暗黑模式或黑色背景——截图显示的是浅色、纸质感的背景。
- 避免: 现代极简主义
- 避免: 冷调或临床感的调色板
- 避免: 过于复杂的布局
10
包内真实截图
11
System Prompt
设计一个俏皮、复古灵感的防晒品牌消费者网站。美学是怀旧的1980年代泳池边奢华感，使用温暖的米白色背景（#ebe6dc）和深灰色文字（#333333）。排版结合纤细的过渡衬线字体用于展示文本，人文无衬线字体用于正文。原始操作按钮是全宽、药丸形状，并填充温暖的柔和黄色。布局宽敞且不对称，通常包含复古摄影和复古图形元素，如条形码或虚线边框。避免现代极简主义、纯白背景或高对比度的霓虹色调。整体感觉是精致而充满奇思妙想。