01
设计气质 DNA
开发者代码审查自动化GitHub生产力
一个智能过滤器,处理代码变更,仅将真正需要人工关注的问题推送至前台。
02
色彩
#8B5CF6Accent#FFFFFFInk#A0A0B5Ink soft#0B0B14BG#111120BG soft#07070DBG quiet#5C5C70Mutedrgba(255, 255, 255, 0.08)Line深邃、类似太空的深色背景,搭配单一的亮紫色作为主要操作和高亮区域的强调色。
03
字体
- display
52px · 600 - h1
42px · 600 - body
16px · 400 - caption
13px · 500
04
间距
4px8px12px16px24px32px48px64px96px128px基于一致的 4px 网格,并留有充足的留白,以营造高级感。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
纤细、半透明白色边框,用于实现细微的视觉分隔。
0 0 0 1px rgba(255,255,255,0.08)
06
布局
1200container
12columns
24pxgutter
768 / 1024breakpoints
全宽主视觉区,文字居中,后接一个两栏分栏布局用于功能展示。
07
动效与交互
150msmicro
300mssmall
600msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
类似星空的发光点,可能带有细微的视差或淡入动画。
交互元素上的细微透明度变化或发光效果。 · 即时响应,无明显的视觉反馈。
08
组件
- button 高对比度的药丸形按钮,采用纯色强调色背景。
- card 带有纤细边框和轻微背景变化的微妙容器。
- chip 带有背景和边框的小型药丸形标签。
- input 深色背景搭配纤细边框,可能用于搜索或代码输入。
- hero 大型、氛围感十足的主视觉区,包含醒目的标题、简洁的文案以及发光的背景效果。
09
文案语气与禁用清单
- 语气 自信、专业,且略带挑衅性。
- 标题风格 简短、有力的陈述句式,承诺显著的效率提升。
- 按钮文案 直接且行动导向,例如“免费开始”、“预约通话”。
- 不要使用浅色背景——截图展示的是一个深色模式界面。
- 不要使用超过一种强调色——截图显示只有一种主导的紫色。
- 不要使用衬线字体——截图使用了几何无衬线和人文无衬线字体。
- 不要使用纤细、优雅的字体——标题使用了粗体字重。
- 不要到处使用圆角矩形——截图使用了药丸形状和微妙的边框。
- 不要使用杂乱、多彩的图案——截图使用了干净、带有星辰的氛围渐变。
- 避免: 浮夸的营销用语
- 避免: 脱离上下文的、过于复杂的术语
- 避免: 被动语态
11
System Prompt
Haystack 是一个用于自动化代码审查的开发者工具。设计采用高级深色模式界面,具有深靛蓝/黑色背景(#0B0B14)和单一的亮紫色强调色(#8B5CF6)。字体方面,标题使用几何无衬线字体,正文使用人文无衬线字体,两者均采用粗体字重以增强冲击力。布局宽敞,留白充足。关键禁忌:切勿使用浅色背景或多种强调色。避免使用衬线字体和杂乱、拥挤的布局。设计优先考虑清晰度以及面向开发者工作流的高科技、专注感。