OpenDesign·你的设计资产库

网页参考

Temporal

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

Developer ToolsInfra
Temporal 网站截图

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 — 移动首屏
移动首屏

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

11

System Prompt

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

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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