OpenDesign·你的设计资产库

网页参考

Superlog Sh

AI 驱动的可观测性平台,可为生产事件自动生成修复 PR。

Developer ToolsAISaaSDark ModeProductivity

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

01

设计气质 DNA

可观测性缺陷修复编码代理工程

一位不知疲倦的高级工程师,能够检测、分析并自主修复生产环境缺陷。

02

色彩

#485AE2Accent
#F5F5F6Ink
#8A8A8FInk soft
#141415BG
#232325BG soft
#5A5A60Muted
rgba(255,255,255,0.07)Line

使用深黑与近白色实现高对比度深色模式,单一电光蓝用于主要操作强调。

03

字体

humanist-sans · geometric-mono

  • display64px · 500
  • h148px · 500
  • h236px · 600
  • body16px · 400
  • small13px · 400
  • mono14px · 400
  • label12px · 500

04

间距

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

主要章节间采用充足的垂直内边距(32px-64px),而基础 8px 网格控制组件间距。

05

表面 (圆角 / 阴影 / 边线)

sm · 2px
md · 8px
lg · 12px
pill · 9999px

1px solid rgba(255,255,255,0.07)

0px 12px 30px rgba(0,0,0,0.24) · 0px 28px 100px rgba(0,0,0,0.65) · 0px 6px 14px -6px rgba(72,90,226,0.55)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

居中单栏布局,配有充足外边距,在功能展示区过渡至多栏网格。

07

动效与交互

150msmicro
150mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

交互元素上平滑的颜色与背景色过渡 · 悬停状态下的缩放与变换效果

平滑的颜色变化及通过 box-shadow 实现的微妙高度变化。 · 微妙的缩放变换或即时视觉反馈。

08

组件

  • button 主要按钮采用鲜艳蓝色背景、白色文字及圆角胶囊造型,悬停时带有微妙的辉光阴影。
  • card 卡片为半透明深色面板,配有纤细的白色边框和大圆角,用于容纳浮动的 UI 元素或代码预览。
  • chip 徽章与状态指示器使用小号大写文字,配以细边框或微妙的彩色背景。
  • input 终端提示界面为深色圆角容器,配有闪烁的蓝色光标和“COPY”操作按钮。
  • hero 宽阔的深色顶部区域,展示大型标题、微妙的火箭发射背景图以及浮动的编码代理终端界面。

09

文案语气与禁用清单

  • 语气 自信、直接且高度技术化,直接与开发者对话,解决复杂的工程问题。
  • 标题风格 简短、有力、陈述性的短语(例如“我们修复缺陷”、“告别警报疲劳”)。
  • 按钮文案 以行动为导向且直截了当(例如“立即开始”)。
  • 不要使用明亮、饱和的渐变——截图显示的是单色深色主题搭配单一蓝色强调。
  • 不要使用俏皮的圆角无衬线字体——截图使用的是结构化的人文主义无衬线字体(Inter)。
  • 不要使用浅色模式界面——截图展示的是专用的深色模式设计。
  • 不要使用纤细、低对比度的边框——截图使用微妙但可见的 0.07 不透明度白色边框。
  • 不要所有文本都居中——截图对功能描述使用左对齐文本,对主标题区域使用居中文本。
  • 不要使用复杂、多彩的徽章——截图使用简单的、柔和的大写标签配以细边框。
  • 避免: 模糊的营销术语
  • 避免: 过于复杂的句子
  • 避免: 被动语态
  • 避免: 过多的感叹号

11

System Prompt

Superlog 的现代开发者工具落地页,这是一个 AI 驱动的可观测性平台。设计基于深色、近黑色的深色模式(#141415),搭配高对比度白色文本(#F5F5F6)和单一的鲜艳电光蓝强调色(#485AE2)用于主要操作。字体排版采用简洁的人文主义无衬线字体用于正文和展示文本,搭配几何等宽字体用于终端和代码元素。布局宽敞居中,依靠充足的垂直节奏分隔章节。关键的设计约束包括:避免浅色模式界面、拒绝俏皮或过度装饰的字体、保持文本与深色背景之间的高对比度。整体美学精致、技术化且专业,强调清晰与效率而非视觉华丽,是现代 SaaS 开发者工具设计的完美范例。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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