01
设计气质 DNA
构建者AI创作无代码赋能
一个友好、多彩的门户，将自然语言转化为功能性软件。
02
色彩
#FE7B02Accent#1C1C1CInk#5F5F5DInk soft#F7F4EDBG#FCFBF8BG soft#FDFCFCBG quiet#ECEAE4Mutedrgba(236, 234, 228, 1)Line温暖的中性基底，搭配充满活力、富于表现力的多色渐变。
03
字体
- display
60px · 480 - heading
48px · 480 - body
16px · 400 - small
14px · 400
04
间距
4px8px16px24px32px48px64px80px96px144px充足的留白，章节间有较大的垂直间距。
05
表面 (圆角 / 阴影 / 边线)
sm · 8px
md · 12px
lg · 16px
pill · 99999999px
1px solid rgb(236, 234, 228)
oklch(0.2 0 0 / 0.12) 0px 2px 2px -1px · oklch(0.2 0 0 / 0.12) 0px 4px 4px -2px · rgba(0, 0, 0, 0.1) 0px 20px 25px -5px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
居中的单栏布局，包含一个突出的主视觉区域。
07
动效与交互
150msmicro
200mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
UI 元素平滑的透明度与变换过渡。 · 悬停时的渐变变化。
微妙的颜色偏移和透明度变化。 · 通过缩放或透明度调整提供即时反馈。
08
组件
- button 高对比度、小圆角的胶囊形主按钮。
- card 柔和圆角的卡片，带有细微边框和温暖的背景色。
- input 大尺寸、圆角的输入框容器，作为主要交互点。
- hero 全宽渐变背景，配有居中文字和一个悬浮输入框。
09
文案语气与禁用清单
- 语气 鼓励、清晰、赋能。
- 标题风格 简短、有力、面向行动。
- 按钮文案 直接并专注于使用工具的益处。
- 避免使用纯白背景 — 截图显示的是温暖、略偏米白的背景。
- 避免使用尖锐的直角 — 截图显示卡片和输入框采用的是圆角。
- 避免使用冷峻、单色的配色方案 — 截图显示的是充满活力的多色渐变。
- 避免使用密集、杂乱的布局 — 截图显示的是充足的留白和清晰的层级。
- 避免使用复杂、装饰性的字体 — 截图显示的是简洁的几何无衬线风格。
- 避免使用刺眼、深色的边框 — 截图显示的是细微、浅色的边框。
- 避免: 充满术语的技术描述
- 避免: 密集的文字段落
- 避免: 被动或过于正式的语言
10
包内真实截图
11
System Prompt
Lovable 是一款通过对话界面构建应用和网站的 AI 驱动工具。其视觉识别由温暖的米白色背景、深中性墨水色（#1C1C1C）以及充满活力、富于表现力的多色渐变（蓝色、粉色、橙色）定义。字体使用简洁的几何无衬线类别。设计优先考虑简洁性、充足的留白以及友好、平易近人的感觉，适合一个旨在让软件创作对每个人都触手可及的产品。关键约束包括：保持一致使用圆角、避免纯白背景，并在没有不必要杂乱的情况下维持高对比度、清晰的视觉层级。