OpenDesign·你的设计资产库

网页参考

Haystackeditor

一个由 AI 驱动的代码审查工具,可自动化 PR 测试,且仅在出现关键问题时向开发者发出提醒。

Developer ToolsDark ModeBold TypographySaaSPremium

预览暂时不可用,请通过原站查看。

01

设计气质 DNA

开发者代码审查自动化GitHub生产力

一个智能过滤器,处理代码变更,仅将真正需要人工关注的问题推送至前台。

02

色彩

#8B5CF6Accent
#FFFFFFInk
#A0A0B5Ink soft
#0B0B14BG
#111120BG soft
#07070DBG quiet
#5C5C70Muted
rgba(255, 255, 255, 0.08)Line

深邃、类似太空的深色背景,搭配单一的亮紫色作为主要操作和高亮区域的强调色。

03

字体

geometric-sans · humanist-sans · monospace

  • display52px · 600
  • h142px · 600
  • body16px · 400
  • caption13px · 500

04

间距

4px
8px
12px
16px
24px
32px
48px
64px
96px
128px

基于一致的 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)。字体方面,标题使用几何无衬线字体,正文使用人文无衬线字体,两者均采用粗体字重以增强冲击力。布局宽敞,留白充足。关键禁忌:切勿使用浅色背景或多种强调色。避免使用衬线字体和杂乱、拥挤的布局。设计优先考虑清晰度以及面向开发者工作流的高科技、专注感。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效,整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明,可复制给 Agent。