01
设计气质 DNA
极简主义干净结构化实用主义可访问
一本组织有序、层次清晰、功能设计的目录手册。
02
色彩
#111111Ink#FFFFFFBG#929292Mutedrgba(0,0,0,0.1)Line以高对比度的黑白为主,辅以中性灰用于次要元素,以实现最佳可读性。
03
字体
- display
56px · 700
所有文字均使用清晰、高可读性的人文无衬线字体。 · 标题与正文之间具有显著的字重对比。 · 充足的行高以确保舒适的阅读体验。
04
间距
4px8px16px24px32px48px64px96px一致的间距倍数,创造出可预测的垂直和水平节奏。
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 0px
pill · 999px
无可见边框;通过间距和色彩对比实现分隔。
06
布局
1440container
12columns
24pxgutter
768 / 1024breakpoints
全宽首屏区域与结构化的网格内容块交替出现。
07
动效与交互
150msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0.0, 0.2, 1)easing
内容过渡使用细微的淡入淡出效果。 · 平滑的滚动行为。
交互式文本元素使用细微的颜色变化或下划线。 · 按钮按下时提供即时的视觉反馈。
08
组件
- button 简洁的文本链接或无圆角的极简矩形按钮。
- card 干净的内容卡片,无阴影或边框,依赖间距和图像来呈现。
- chip 极简的标签或分类,通常仅为文本。
- input 带有细微边框的标准表单字段。
- hero 全宽的图片或视频,上覆文字,使用高对比度排版。
09
文案语气与禁用清单
- 语气 清晰、实用且信息丰富。
- 标题风格 直接、以行动为导向或以利益为焦点的陈述。
- 按钮文案 简单的祈使动词(例如“立即购买”、“了解更多”)。
- 不要在卡片或按钮上使用圆角——截图显示为锐利的直角边缘。
- 不要在UI元素上添加投影——截图使用干净、扁平的分隔方式。
- 不要为主内容区域使用彩色背景——截图使用纯白背景。
- 不要使用装饰性或手写体字体——截图使用干净、功能性的无衬线字体。
- 不要在图片上使用渐变叠加——截图使用清晰、高质量的摄影作品。
- 不要创建密集、杂乱的布局——截图使用充足的留白和清晰的网格。
- 避免: 术语或过于技术性的语言。
- 避免: 过多的感叹号。
- 避免: 抽象或诗意的表达。
11
System Prompt
定位:一家专注于可访问、功能性设计的全球家居零售商。关键十六进制颜色:#FFFFFF(背景)、#111111(主文本)、#929292(次要文本)。字体类别:所有文字均使用人文无衬线字体,强调可读性。关键禁忌:不要使用圆角、投影或装饰性字体。保持干净、基于网格的布局和充足的留白。避免杂乱的构图,使用克制的高对比度配色方案以实现最大程度的清晰度和可访问性。