OpenDesign·你的设计资产库

网页参考

Raycast

深色首屏中红色折叠状图形包围白色标题，底部并列下载入口。

ProductivityDark ModeRefinedDeveloper Tools
Raycast 网站截图

理解与复用

从这份设计中借鉴什么

基于收录时的历史截图解读

设计亮点

  • 红色视觉焦点集中在标题背后
  • 两个平台入口并列展示

适合什么项目

  • 桌面应用
  • 效率工具下载页

如何带进你的设计

  • 围绕自有图形建立首屏焦点
  • 按实际支持的平台提供明确下载入口

使用边界

  • 画面不能证明不同平台版本的功能一致
  • 仅依据已检查的历史预览；未核实现行网站、交互、精确 Tokens 或素材授权。

此解读由 Agent 编写，尚未经过人工终审；不代表原作者规范或使用授权。

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

  • display56px · 500
  • h232px · 500
  • body16px · 400
  • caption13px · 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

包内真实截图

Raycast — 桌面首屏（hero）
桌面首屏（hero）
Raycast — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Raycast — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Raycast — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Raycast — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Raycast — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Raycast — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Raycast — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Raycast — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Raycast — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Raycast — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Raycast — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Raycast — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Raycast — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Raycast — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Raycast — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Raycast — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Raycast — 移动首屏
移动首屏

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

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

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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