精选 · 开放 · 免费
Knickey
一个为包容性内衣设计的精致、以图片为主导的电子商务界面。
ConsumerCleanPhotographicCalmRefined
01
设计气质 DNA
内衣包容性可持续简约舒适
一个安静、精心策划的目录，让产品摄影自由呼吸。
02
色彩
#233735Accent
#241f20Ink
#f5f4eeBG
#8bba78Muted
rgba(36,31,32,1.0)Line
大地色中性色与柔和的绿色共同营造出平静、有机的调色板。
03
字体
didone-serif · humanist-sans
- display
64px · 400 - headline
32px · 400 - body
17px · 400 - caption
14px · 400
为重要数字和大号强调文本使用 didone-serif 字体。 · 为所有交互元素和正文使用 humanist-sans 字体。 · 在无衬线字体元素上保持一致的宽字间距。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
使用 4 和 8 的倍数作为一致的内边距，营造出通透的布局。
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 4px
lg · 0px
pill · 999px
除复选框输入外，无可见边框；模态窗口依赖间距和背景对比度。
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
分屏布局，全出血摄影图片环绕着居中的文本栏。
07
动效与交互
200msmicro
300mssmall
800msmedium
cubic-bezier(0.19, 1, 0.22, 1)easing
模态叠加层的淡入淡出和缩放进入效果。 · 交互元素的微妙变换过渡效果。
按钮上的微妙背景色过渡效果。 · 通过右上角的小 'X' 图标关闭模态窗口。
08
组件
- button 实心深色矩形按钮，白色大写文字，无圆角。
- card 以图片为主、无边框的卡片，依赖摄影而非容器。
- chip 无可见组件。
- input 自定义复选框，带圆角和柔和灰色边框。
- hero 全屏或大型模态叠加层，采用摄影图片与居中文本的分割构图。
09
文案语气与禁用清单
- 语气 自信、平静且友善。
- 标题风格 简短、直接、聚焦价值（例如 'You've Got 15% Off'）。
- 按钮文案 清晰、大写、面向行动（例如 'CLAIM 15% OFF'）。
- 不要使用厚重的投影——截图显示的是平坦、无边框的表面。
- 不要使用明亮、高饱和度的点缀色——截图显示的是柔和的绿色和深青色。
- 不要为展示文字使用活泼或圆润的无衬线字体——截图显示的是锋利的 didone-serif 字体。
- 不要将长段落文本居中对齐——截图显示文本栏窄而居中，仅适用于短文案。
- 不要为内容卡片添加不必要的边框——截图显示的是无边框的图像。
- 不要使用深色模式或高对比度主题——截图显示的是浅色、奶油色的灰白色背景。
- 避免: 激进或紧迫的语言
- 避免: 过于随意或俚语化的表达
- 避免: 视觉杂乱或嘈杂的背景
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一个为可持续内衣品牌设计的精致电子商务界面，以平静的大地色调为特色。关键颜色包括奶油色灰白色背景（#f5f4ee）、深墨色文本（#241f20）、柔和绿色点缀色（#8bba78）以及用于主按钮的深青色（#233735）。字体排印将用于大号展示文本的锋利 didone-serif 字体与用于所有正文和 UI 元素的 humanist-sans 字体相结合。布局宽敞，常采用分屏构图，全出血摄影图片环绕居中文本。关键禁忌：不要使用明亮、霓虹色彩；避免厚重边框或投影；不要使用活泼、圆润的字体；避免杂乱背景；不要将大段文本居中对齐；避免使用激进、紧迫的营销语言。
en · zh-CN · zh-TW · ja · ko