本稿对应的 Figma 可编辑 UI 设计稿：小猪盖被 · Raycast 官网首页设计稿。打开即可对照版面结构与组件层级。
Raycast 首页没有先摆出软件窗口，而是让几束红色光带从右上方斜切下来。光带带着蓝色边缘和粗粝颗粒，既像高速移动留下的残影，也像品牌标志被放大、折叠后铺满屏幕。白色标题「Your shortcut to everything」压在视觉中心，下方仅保留一句产品定义与下载按钮。首屏故意延后功能说明，先把按下快捷键之后“立刻发生”的感觉交给访客。
Raycast 首页首屏，黑底上的红色斜向光束与居中标题
页面像一条不断展开的快捷键
顶部导航被装进一条圆角深色长框，品牌、产品入口、登录与下载保持在同一水平线上。这里没有依赖高透明度或复杂玻璃效果，细边框与轻微亮面只负责把导航从背景中托起。首屏的内容轴收得很窄，四周则留出大面积黑色。红色光束即使占据较大尺度也不显拥挤，下载按钮顺势成为视线终点。
向下滚动，页面忽然把一整块键盘搬进版面。「Fast」「Ergonomic」「Personal」「Reliable」分散在键位之间，99.8% crash-free rate 也被处理成一枚键帽信息。四项卖点没有排成惯常的图标四宫格，而是附着在真实的使用对象上。键盘既是产品入口，也是这一段的隐形网格，功能属性、手部动作与快捷键习惯因此落在同一张图里。
以整块键盘为版式骨架的 Fast、Ergonomic、Personal、Reliable 段落
扩展区随后切换成横向卡片阵列。Linear、Google Translate、Spotify、Arc、TinyPNG 等图标和彩色界面缩略图密集排布，类别标签负责切换语境。前面的黑红画面几乎只使用品牌色，这里却有意放开色彩限制，让第三方产品保留各自的识别。品牌在这一段退后，杂色没有造成失控，反而把“扩展很多”变成可直接感知的视觉事实。
字体与颜色都在模拟软件界面
正文使用中性的无衬线体，标题字面较宽、粗度较高，却没有额外的装饰造型，更接近系统级工具的界面字体，而不是强调姿态的广告字体。真正改变阅读节奏的是小号等宽字：系统要求、安装方式、键名与状态信息都由它承载，带出终端和快捷键的语气。大标题负责建立距离感更近的品牌表达，等宽小字则把场景拉回高频电脑操作。
颜色骨架相当克制：近黑背景、白色正文、灰色次级信息，再加接近珊瑚红的品牌色。蓝色只藏在光束暗部，为红色补出冷暖层次。直到扩展、用户头像和视频封面出现，紫、绿、黄才陆续进入版面。这样的顺序先以单一主色建立 Raycast 的识别，再用多种颜色说明平台可以容纳不同工具。
扩展商店卡片阵列，品牌图标与产品界面缩略图并置
动效不表演转场，而是演示速度
从静态结构也能读出明确的动效线索：首屏光束像持续扫过的轨迹，扩展卡片沿横向队列滑行，AI Agent 区把“读取 Linear 任务—获取详情—创建 Things 任务”拆成连续状态；Quick AI、Snippets、Quicklinks 则借输入、响应和结果替换表现操作。动画尺度始终接近一次命令执行，而非一段独立的品牌片头。等待被压缩，状态迅速落位，速度感由界面反馈而不是装饰转场产生。
AI 区的组件尤其接近产品本身：搜索框、聊天列表、模型名、进度行与结果提示保留了桌面应用的紧凑密度。首页没有使用抽象的 AI 星球或发光符号，而是给出“同步 Linear 任务”这样的具体请求。这里有意选择略显琐碎的工作流，因为重复、细碎的任务正是效率工具需要接住的部分。
随后，证言墙、Snippets、Quicklinks、Hotkeys、Notes、社区与开发者 API 依次接上。信息量很大，但每一段都换用不同的证据：头像与引语提供社会确认，输入演示说明自动化方式，组件卡展示开发能力，末尾再用一整块键盘把内容收束到下载。长页面没有强行套用统一卡片模板，而是保留局部不同的尺寸与密度。这是一项清晰的取舍：牺牲少量整齐感，换取“工具箱逐步展开”的丰富程度。
AI Agent 工作流界面，Linear 任务被读取并创建到 Things
页面没有把“快”处理成满屏速度线。真正的速度感来自短句、收窄的操作路径、明确按钮，以及一组组已经完成的状态。Raycast 官网并非只在外部描述产品，而是用网页结构复刻其使用逻辑：召唤、输入、执行、消失。页面很长，交互手感却始终保持短促。