精选 · 开放 · 免费

Temporal

一个用于构建和运行可靠分布式应用及 AI 智能体的开源平台。

devinfra

Temporal 网站截图

↓ 下载设计系统包 (41 MB)在 OpenDesign 中打开

原站: https://temporal.io

📦 浏览包内文件 →

01

设计气质 DNA

TemporalAIWorkflows开发者平台

AI 智能体与复杂分布式系统的操作系统

02

色彩

#7F86F1Accent

#F8FAFCInk

#CACBF9Ink soft

#141414BG

#1E1E1EBG soft

#92A4C3Muted

rgba(36, 51, 73, 1)Line

深色模式优先，搭配高对比度白色文字和鲜明的紫/蓝色点缀

03

字体

geometric-sans · monospace

display68px · 300
h148px · 300
body16px · 400

04

间距

4px

8px

12px

16px

24px

32px

48px

64px

96px

主要区块间采用充足的垂直内边距（96px）

05

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

sm · 4px

md · 8px

lg · 12px

pill · 9999px

1px solid rgb(36, 51, 73)

rgba(0, 0, 0, 0.25) 0px 25px 50px -12px · rgb(0, 0, 0) 8px 8px 0px 0px

06

布局

1280container

12columns

24pxgutter

768 / 1024breakpoints

全宽深色首屏，采用分屏布局，文字居左，代码块居右；下方为卡片网格。

07

动效与交互

150msmicro

300mssmall

800msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

悬停时平滑的颜色和背景色过渡 · 页面加载动画的不透明度淡入 · 交互元素的变换位移

文字颜色过渡为更亮的白色或强调色，按钮增加亮度 · 微妙的不透明度或缩放减小

08

组件

button 主按钮采用紫蓝渐变（#7F86F1 至 #B664FF），胶囊形状，白色文字；次级按钮为轮廓/幽灵样式，白色文字
card 深色半透明卡片，带有细微的1px边框，无明显的背景色区分
chip 语言标签页（PYTHON、GO 等）作为带下划线指示器的纯文本标签
input 页眉中的搜索图标，样式极简
hero 大型分屏首屏，左侧为主标题、正文和CTA按钮，右侧为深色代码编辑器窗口

09

文案语气与禁用清单

语气权威、技术性、自信
标题风格 简短、有力、陈述性，使用细字体字重
按钮文案 直接且面向行动（例如“免费开始使用”、“本地运行”）

不要使用白色背景——截图显示的是非常深、近乎纯黑（#141414）的背景
不要对标题使用粗重字体——截图显示大型展示文本使用细（300）字重
不要使用 Inter 等标准网页字体——截图对 UI 使用 Aeonik（几何无衬线体），对代码使用 Noto Sans Mono
不要到处使用尖锐的直角——截图显示胶囊形状的按钮（9999px 圆角）和圆角卡片（12px）
不要使用单一的平面强调色——截图显示按钮（紫到蓝渐变）和背景元素中的渐变色
不要使用小而拥挤的间距——截图显示主要区块间有充足的96px垂直内边距
避免: 无上下文的行话
避免: 俏皮或异想天开的语言
避免: 过于复杂的句子结构

10

包内真实截图

Temporal — 桌面首屏（hero） — 桌面首屏（hero）

Temporal — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Temporal — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Temporal — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Temporal — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Temporal — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Temporal — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Temporal — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Temporal — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Temporal — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Temporal — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Temporal — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Temporal — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Temporal — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Temporal — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Temporal — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Temporal — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Temporal — 移动首屏 — 移动首屏

抓自真实页面 · 真 computed styles

11

System Prompt

Temporal.io 是一个深色模式开发者平台，用于构建可靠的分布式系统和 AI 智能体。设计依赖于近乎纯黑的背景（#141414）、清晰的白色文字（#F8FAFC）和鲜明的紫/蓝色点缀（#7F86F1、#B664FF），后者通常以渐变形式应用。排版以几何无衬线体类别（Aeonik）为主，在大型、有冲击力的标题中使用细字重（300）并设置紧凑字距，代码示例则搭配专用的等宽字体。关键禁忌：不要使用浅色背景或深色文字。不要对标题使用粗重字重。不要对主按钮使用单一平面色——优先使用渐变。不要对关键标题使用过小的字号。不要在按钮等主要交互元素上使用尖锐的直角。不要使用杂乱的布局；保持充足的留白和内边距。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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