01
设计气质 DNA
数据库开发者ORMPostgres工具
一款干净、专业的开发者工具，具有友好、易上手的美学风格。
02
色彩
#0D9488Accent#1D242FInk#111827Ink soft#FFFFFFBG#F3F4F6BG soft#F0FDFBBG quiet#6B7280Mutedrgba(226, 232, 240, 1)Line在干净的白色背景上使用高对比度的深色文字，蓝绿色严格用于行动号召和交互点睛元素。
03
字体
- display
72px · 700 - h2
40px · 700 - h3
20px · 600 - body
16px · 400 - caption
12px · 400
所有高冲击力标题使用几何无衬线字体。 · 正文使用人文主义无衬线字体以保证可读性。 · 等宽字体严格用于代码片段和命令行。
04
间距
4px8px12px16px24px32px48px64px96px垂直节奏保持一致，以4px为增量，确保对齐的栏间距和内边距。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid #E2E8F0
0px 1px 2px 0px rgba(0, 0, 0, 0.04) · 0px 8px 16px -4px rgba(0, 0, 0, 0.04) · 0px 10px 25px -5px rgba(0, 0, 0, 0.1)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
标准居中容器，使用3列网格布局来展示功能卡片。
07
动效与交互
150msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
悬停时平滑的颜色和背景颜色过渡。 · 用于交互性显示的变换和透明度过渡。
幽灵按钮和链接在悬停时有微妙的背景颜色变化；使用标准指针光标。 · 通过缩放或透明度变化提供即时的视觉反馈。
08
组件
- button 圆角胶囊形状，实心蓝绿色背景配白色文字，或带边框的幽灵样式。
- card 白色背景，1px浅灰色边框，8px至12px圆角，带有微妙的盒阴影。
- chip 不突出显示；徽章采用简单的文字或小型圆角容器形式。
- input 简单的等宽命令行代码块，浅色背景，6px圆角。
- hero 超大加粗标题，居中布局，带有微妙的薄荷绿背景渐变和浮动粒子效果。
09
文案语气与禁用清单
- 语气 专业、自信，并以开发者为中心。
- 标题风格 大胆、有力且直接，常使用大型几何字体。
- 按钮文案 使用行动导向的动词，如“创建”、“开始”、“登录”。
- 不要使用深色主背景——截图显示以白色和浅薄荷绿背景为主。
- 不要使用衬线字体作为标题——截图显示为加粗、几何无衬线标题。
- 不要使用混乱或多彩的配色方案——截图使用严格的白/灰/黑方案，仅配以单一蓝绿色点睛。
- 不要在卡片上使用厚重的投影——截图显示为非常微妙、近乎扁平的边框和轻微阴影。
- 不要在主视觉区使用复杂、繁杂的插图——截图显示为简洁的字体排印配合极简的抽象粒子效果。
- 不要使用狭小、局促的间距——截图显示有充裕的内边距和清晰的视觉层次。
- 避免: 缺乏上下文的行话
- 避免: 过于俏皮或异想天开的语言
- 避免: 密集、未格式化的文本块
10
包内真实截图
11
System Prompt
这是一个现代SaaS开发者工具落地页（Prisma），其特点是干净、专业的美学风格。布局使用12列网格，配合充足的留白和居中容器。主要颜色包括白色背景（#FFFFFF）、深色墨水文字（#1D242F）、柔和的灰色元数据（#6B7280），以及作为所有主要操作强调色的蓝绿色（#0D9488）。字体排印严重依赖几何无衬线展示字体来制作加粗、大型标题，以及人文主义无衬线字体用于正文。关键约束：始终使用白色或浅薄荷绿（#F0FDFB）作为背景；绝不使用衬线字体；确保蓝绿色仅用于交互元素（如按钮）；保持充裕的内边距（12-24px）并使用微妙的、近乎扁平的边框代替厚重阴影。