精选 · 开放 · 免费
Raycast
一款强大的、原生支持AI的命令面板与效率启动器。
ProductivityDark ModeRefinedDeveloper Tools
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
- display
56px · 500 - h2
32px · 500 - body
16px · 400 - caption
13px · 500
使用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
组件
- button 主按钮为白色底、黑色字,且圆角较大(胶囊形);次级按钮为描边或幽灵样式。
- card 深色、带有微妙边框的容器,通常使用内阴影,用于承载扩展或功能预览。
- chip 小型、胶囊形的标签,采用深色背景和微妙边框,用于功能标记。
- input 在截图中不可见,但可推断为深色、内凹的输入框,并带有内阴影。
- hero 全屏视口的核心视觉区,具有引人注目的对角线光束效果和居中的大号排版。
09
文案语气与禁用清单
- 语气 自信、简洁、略带技术感。
- 标题风格 简短、有力、以利益为导向(例如,'通往一切的捷径。')。
- 按钮文案 直接且以行动为导向(例如,'为Mac下载','试用新版Raycast')。
- 不要使用浅色主题——截图显示的是深邃的、近乎纯黑(#0D0D0D)的背景。
- 不要使用圆润、气泡状的UI——截图显示的是更方正、精致的圆角(6-12px)。
- 不要使用多种明亮的强调色——截图仅在核心视觉图形中使用单一的红色强调色。
- 不要使用俏皮的、手写或花哨的字体——截图使用的是简洁的humanist-sans和geometric-mono字体。
- 不要使用厚重的投影——截图依靠微妙的内阴影和细边框来营造层次感。
- 不要将所有正文都居中对齐——截图显示的是左对齐的功能文本块。
- 避免: 避免过于随意或俏皮的语言。
- 避免: 避免拥挤或嘈杂的布局。
- 避免: 避免在核心视觉区之外使用明亮、饱和的颜色。
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
Raycast是一款面向开发者和生产力场景的高级工具,定位为快速、原生支持AI的命令启动器。其视觉识别建立在一个以近乎纯黑(#0D0D0D)和纯白为中心的超深、高对比度色板上,并使用微妙的灰色调来区分层级。排版上,UI使用简洁的humanist-sans字体(Inter),技术细节则使用geometric-mono字体。关键设计准则:在色彩使用上保持极度克制,避免多种强调色;使用微妙的内阴影和细边框代替厚重的立体效果;确保充足的留白以平衡密集的深色界面。整体感觉应精致、有力,并专注于性能。
en · zh-CN · zh-TW · ja · ko