01
设计气质 DNA
AI驱动设计加速营销网站开发者工具
一个融合AI生成与人工策划的网页设计创意副驾。
02
色彩
#6248FFAccent#161616Ink#686868Ink soft#F1F0EEBG#FFFFFFBG soft#E4E2DFBG quietrgba(22,22,22,0.1)Line中性、温暖的灰色基底提供干净画布，让鲜明的紫色强调和深色文字引导视觉焦点。
03
字体
- display
80px · 500 - h2
40px · 500 - body-lg
19px · 400 - body
16px · 400 - caption
14px · 400
大型展示标题使用紧凑的字间距。 · 所有正文内容使用标准400字重。
04
间距
4px8px12px16px24px32px48px64px96px以4px的固定倍数创建一致、可预测的版面节奏。
05
表面 (圆角 / 阴影 / 边线)
sm · 6px
md · 8px
lg · 16px
pill · 999px
1px solid rgba(22,22,22,0.1)
rgba(0, 0, 0, 0.04) 0px 1px 2px 0px · rgba(0, 0, 0, 0.08) 0px 1px 3px 0px · rgba(0, 0, 0, 0.08) 0px 8px 10px -4px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
居中单栏布局，主视觉区包含充裕留白和漂浮的UI元素。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.46, 0.45, 0.94)easing
hover时平滑的透明度与变换过渡。 · 装饰性UI元素的浮动动画。 · 视口进入时加速的版面变化。
卡片和按钮在hover时产生微妙的背景色变化和轻微的垂直位移。 · 通过背景变化或缩放变换提供即时的视觉反馈。
08
组件
- button 深色填充的主按钮，配白色文字，以及紫色描边的幽灵变体。
- card 白色或浅灰色卡片，带有柔和阴影和圆角。
- chip 小型圆润的徽章式标签，用于社会证明和导航标签。
- input 大型、醒目的输入框，带有渐变边框和内置的填充式操作按钮。
- hero 以浅色背景为衬的大字排版，两侧伴有漂浮、可交互的UI卡片。
09
文案语气与禁用清单
- 语气 赋能、专业、创新。
- 标题风格 粗体、直接、利益驱动的陈述。
- 按钮文案 行动导向且富有吸引力。
- 不要使用纯白色背景——截图显示的是温暖的灰白色。
- 不要使用衬线展示字体——截图显示的是几何或人文主义无衬线字体。
- 不要使用明亮的霓虹强调色——截图显示的是深邃、饱和的紫色。
- 不要让布局显得拥挤——截图显示有充裕的留白和居中对齐。
- 不要使用生硬的投影——截图显示的是柔和、弥散的阴影。
- 不要在UI元素上使用尖角——截图显示的是最大可达16px的圆角。
- 避免: 被动语态
- 避免: 未经解释的过于技术性的术语
- 避免: 模糊的承诺
10
包内真实截图
11
System Prompt
Relume是一款用于营销网站的高端AI设计工具，定位为快速、协作的副驾，而非人类设计师的替代品。设计采用温暖的灰白色背景（#F1F0EE），深炭灰色文字（#161616），以及标志性的紫色强调色（#6248FF）。字体排印围绕干净的人文主义无衬线类别构建，用于展示和正文。关键设计规则：不使用纯白色背景，避免为标题使用衬线字体，并保持充裕的留白以维持界面高端、整洁的观感。