精选 · 开放 · 免费

Raycast

一款强大的、原生支持AI的命令面板与效率启动器。

ProductivityDark ModeRefinedDeveloper Tools
Raycast 网站截图
↓ 下载设计系统包 (34 MB)在 OpenDesign 中打开

原站: https://raycast.com

📦 浏览包内文件 →

01

设计气质 DNA

效率启动器速度AI开发者工具

为你的操作系统打造的高性能指挥中心。

02

色彩

#FFFFFFInk
#E6E6E6Ink soft
#0D0D0DBG
#111214BG soft
#1B1C1EBG quiet
#9C9C9DMuted
rgba(255, 255, 255, 0.1)Line

极致高对比度的深色模式,采用深邃的黑色背景、清晰的白色文字,并在核心视觉区使用一抹醒目的红色作为强调色。

03

字体

humanist-sans · geometric-mono

使用GeistMono显示技术规格和版本号。 · 大型展示文字采用紧凑的字间距(-1px)。 · 正文使用常规字重(400),以确保在深色背景上的可读性。 · 字体类别保持英文:humanist-sans, geometric-mono等。

04

间距

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

采用一致的4px网格系统,并优先使用充足的留白来平衡密集的深色界面。

05

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

sm · 6px
md · 8px
lg · 12px
pill · 999px

使用微妙的1px实线边框,颜色为rgba(255, 255, 255, 0.1)或深灰色。

rgba(0, 0, 0, 0.4) 0px 1.5px 0.5px 2.5px · rgb(27, 28, 30) 0px 0px 0px 1px · rgb(7, 8, 10) 0px 0px 0px 1px inset · rgba(255, 255, 255, 0.2) 0px 1px 1px 1px inset · rgba(215, 201, 175, 0.05) 0px 0px 20px 5px

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

采用居中的核心视觉区搭配全宽氛围背景,其下是结构化的内容区块。

07

动效与交互

200msmicro
300mssmall
800msmedium
cubic-bezier(0.23, 1, 0.32, 1)easing

hover状态使用平滑的过渡动画(opacity, box-shadow, transform)。 · 内容出现时使用微妙的淡入(opacity fade)效果。

按钮和交互元素的opacity或box-shadow会发生变化,过渡时间为0.2秒。 · 施加微妙的transform或scale效果。

08

组件

09

文案语气与禁用清单

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

Raycast是一款面向开发者和生产力场景的高级工具,定位为快速、原生支持AI的命令启动器。其视觉识别建立在一个以近乎纯黑(#0D0D0D)和纯白为中心的超深、高对比度色板上,并使用微妙的灰色调来区分层级。排版上,UI使用简洁的humanist-sans字体(Inter),技术细节则使用geometric-mono字体。关键设计准则:在色彩使用上保持极度克制,避免多种强调色;使用微妙的内阴影和细边框代替厚重的立体效果;确保充足的留白以平衡密集的深色界面。整体感觉应精致、有力,并专注于性能。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

en · zh-CN · zh-TW · ja · ko