01
设计气质 DNA
智能体自动化工具平台开发者
一个以开发者为中心的清洁平台，感觉像是用于构建 AI 智能体的现代 SaaS 工具。
02
色彩
#ffffffInk#e2e2e2Ink soft#0f0f0fBG#1a1a1aBG soft#444444Mutedrgba(44, 44, 44, 1)Line高对比度深色模式，采用近乎黑色的背景和清晰的白色排版，以实现最大的可读性和专注度。
03
字体
- display
72px · 700 - h1
48px · 700 - body
16px · 400 - mono
14px · 400
使用 abcDiatype 用于展示和正文文本 · 使用 JetBrains Mono 用于代码和技术内容 · 保持标题的 letter-spacing 紧凑，正文使用 normal · 通过 1.5 的正文行高维持一致的垂直韵律
04
间距
4px8px12px16px24px32px48px64px96px采用一致的 4px 基础网格，配合模块化的间距比例，实现垂直和水平的韵律感
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
使用 1px solid rgb(44, 44, 44) 作为容器的细微边界
rgba(0, 0, 0, 0.15) 4px 4px 0px 0px · rgba(0, 0, 0, 0.5) 0px 8px 32px 0px · rgba(0, 0, 0, 0.5) 0px 16px 48px 0px · rgba(0, 0, 0, 0.35) 0px 6px 20px 0px · rgba(0, 0, 0, 0.25) 0px 25px 50px -12px · rgba(0, 0, 0, 0.4) 0px 4px 20px 0px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
居中布局，留有充足空白，内容最大宽度为 1280px
07
动效与交互
150msmicro
200mssmall
300msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
hover 时平滑的颜色和背景过渡 · 交互元素上细微的变换效果 · 所有交互组件使用一致的过渡时间
交互元素上的细微颜色变化和平滑过渡 · 提供即时反馈，同时保持视觉变化最小以维持专注度
08
组件
- button 简洁、极简的按钮，采用大写文本、细微边框和平滑过渡效果。主要按钮为白色背景配深色文本，次要按钮为透明背景配边框。
- card 深色容器，带有细微边框和圆角，采用简洁的排版和极简装饰。
- chip 小型、圆角的标签，使用大写文本，用于标签和分类。
- input 深色输入框，带有细微边框和清晰的排版，专为技术内容设计。
- hero 全宽深色区域，配有大号粗体排版、渐变背景和居中的行动号召按钮。
09
文案语气与禁用清单
- 语气 专业、技术、自信
- 标题风格 大胆、直接的陈述，关于智能体能力和平台优势
- 按钮文案 以行动为导向，提供清晰的价值主张，例如“免费开始”
- 不要使用浅色背景 —— 截图显示的是 #0f0f0f 背景的深色模式
- 不要使用装饰性衬线字体 —— 截图显示的是几何无衬线排版
- 不要使用明亮、饱和的强调色 —— 截图显示的是带有细微渐变的单色调色板
- 不要使用小而拥挤的间距 —— 截图显示的是充足的空白和 4px 基础网格
- 不要使用圆润、俏皮的 UI 元素 —— 截图显示的是锐利、极简的设计，带有细微的 border-radius
- 不要使用复杂、分层的视觉效果 —— 截图显示的是干净的扁平设计，带有细微阴影
- 避免: 过于随意或俏皮的语言
- 避免: 模糊或歧义的技术描述
- 避免: 过多的感叹号或炒作
10
包内真实截图
11
System Prompt
Composio 是一个用于构建和部署 AI 智能体的开发者平台，定位为一个清洁、专业的工具解决方案。设计采用深色模式调色板，近乎黑色的背景 (#0f0f0f)、清晰的白色文本 (#ffffff) 和细微的灰色强调色 (#444444)。排版采用几何无衬线字体 (abcDiatype) 用于展示和正文文本，单间距字体 (JetBrains Mono) 用于技术内容。布局遵循居中、宽敞的设计，采用 4px 基础网格。关键注意事项：避免浅色背景，跳过装饰性字体，不要使用明亮的强调色，保持充足的间距，避免俏皮的 UI 元素，并保持视觉效果极简。