01
设计气质 DNA
工程基础设施多智能体企业级平台
一个用于构建复杂AI系统的专业工坊
02
色彩
#10b981Accent#f2f2f2Ink#f0f6fcInk soft#0a0a0aBG#1a1a1aBG soft#050507BG quiet#b8b3b0Mutedrgb(38, 38, 38)Line高对比度暗色主题，辅以单一翡翠绿作为聚焦点缀色
03
字体
- display
56px · 600 - body
16px · 400 - mono
14px · 400
为UI和正文使用Inter或类似的人文主义无衬线字体 · 为代码块使用IBM Plex Mono或类似的等宽字体 · 大号展示文本应紧凑且加粗
04
间距
4px8px12px16px24px32px48px64px96px标准4px网格，配合宽松的段落间距
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid rgb(38, 38, 38)
rgba(0, 0, 0, 0.7) 0px 20px 60px 0px · rgba(0, 217, 146, 0.3) 0px 0px 30px 0px · rgba(92, 88, 85, 0.3) 0px 0px 15px 0px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
固定宽度最大容器，配有宽松的侧边内边距
07
动效与交互
150msmicro
200mssmall
700msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
平滑的颜色和背景色过渡 · 细微的透明度渐变
颜色变化或边框高亮 · 即时视觉反馈
08
组件
- button 深色背景，1px边框，白色文字，悬停状态变化
- card 深色卡片，悬停时带有细微的内发光或边框
- chip 深色背景、带细微边框的小药丸状标签
- input 带细微边框的深色输入框
- hero 分栏布局，包含标题和一个复杂的节点图
09
文案语气与禁用清单
- 语气 专业、技术、自信
- 标题风格 大号、加粗、直接
- 按钮文案 以行动为导向，明确下一步
- 不要使用明亮、多彩的渐变 — 截图显示的是暗色背景上单一的翡翠绿主色调
- 不要使用圆润、气泡感的组件 — 截图显示的是锐利的8px圆角和平实的边框
- 不要使用宽而细的字体排印 — 截图显示的是紧凑、加粗的展示字体
- 不要使用浅色背景 — 截图完全是深色模式
- 不要使用过多的投影阴影 — 截图使用细微的发光和纤薄的边框来营造层次感
- 不要使用居中对齐的正文 — 截图显示的是左对齐的内容块
- 避免: 俏皮的语言
- 避免: 过多的感叹号
- 避免: 模糊的承诺
10
包内真实截图
11
System Prompt
Voltagent 是一款深色主题的开发者工具，用于构建企业级AI智能体系统。其设计DNA核心在于高对比度、专业的深色配色，使用深黑(#0a0a0a)背景、亮白(#f2f2f2)文字，以及活力翡翠绿(#10b981)作为点缀色。排印依赖人文主义无衬线字体以确保清晰度，等宽字体用于代码。布局采用12列网格，空间开阔，并有宽松的段落内边距。避免使用俏皮或圆润的美学风格；保持锐利的圆角和纤薄、细微的边框。不要使用多彩渐变或浅色主题。确保代码块使用像IBM Plex Mono这样简洁的等宽字体。过渡应平滑而细微，聚焦于颜色和透明度的变化。