精選 · 開放 · 免費

Temporal

一個用於建構與執行可靠分散式應用程式及 AI 代理的開源平台。

devinfra

Temporal 網站截圖

↓ 下載設計系統包 (41 MB)在 OpenDesign 中開啟

原站: https://temporal.io

📦 瀏覽包內檔案 →

01

設計氣質 DNA

TemporalAIWorkflowsDeveloper Platform

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 大型分屏主視覺，左側包含標題、內文與行動呼籲按鈕，右側為深色程式碼編輯器視窗

09

文案語氣與禁用清單

語氣權威、技術性且自信
標題風格 簡短、有力、具宣言性，搭配輕字重
按鈕文案 直接且以行動為導向（例如：'免費開始使用'、'在本機執行'）

請勿使用白色背景——截圖顯示的是非常深、接近黑色（#141414）的背景
請勿使用粗體字重作為標題——截圖顯示大型展示文字使用輕字重（300）
請勿使用 Inter 等標準網路字型——截圖使用 Aeonik（geometric-sans）作為介面字型，並使用 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