orbit-general

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Orbit General Briefing

Orbit 通用简报

Cross-connector morning briefing that lives at the top of "我的设计". Pulls the past 24 hours of activity from every authenticated connector and lays them out as one editorial bento dashboard.

跨连接器晨间简报，展示在「我的设计」顶部。从所有已认证的连接器中提取过去24小时的活动数据，并将其布局为一个编辑风格的便当格（bento）仪表盘。

⚠️ Source-of-truth protocol (read this first)

⚠️ 唯一可信来源协议（请先阅读）

Step 1. Open and read the shipped

example.html

in this folder before writing any output. That file is the canonical design — your job is to reproduce it, not reinterpret it.

Step 2. Mirror the example's structure 1:1:

Same DOM hierarchy and class names
Same number and order of sections
Same number of bento modules in the same order
Same connector list (do not add or drop connectors)
Same KPI labels, same Top 3 entries, same "people waiting" set
Same footer string
Same
```
<script>
```
block at the end (link injection)

Step 3. You may freshen mock data values (counts, names, times) so they read as "today" — but you must not invent new UI elements, sections, modules, badges, callouts, ribbons, banners, decorations or chrome that aren't already in

example.html

. If a detail is not in the example, it does not belong in your output.

The body sections below are a reference for the visual language and tokens — they are not a license to add features the example doesn't already render.

步骤1. 在编写任何输出前，打开并阅读此文件夹中的

example.html

文件。该文件是标准设计——你的任务是复刻它，而非重新解读。

步骤2. 1:1镜像示例的结构：

相同的DOM层级和类名
相同数量和顺序的章节
相同数量和顺序的便当格模块
相同的连接器列表（禁止添加或移除连接器）
相同的KPI标签、相同的TOP3条目、相同的「等待人员」集合
相同的页脚文字
末尾相同的
```
<script>
```
块（链接注入）

步骤3. 你可以更新模拟数据的值（数量、名称、时间）使其看起来是「今天」的内容——但不得发明

example.html

中未有的新UI元素、章节、模块、徽章、提示框、丝带、横幅、装饰或边框。如果某个细节不在示例中，则不应出现在你的输出里。

以下正文章节是视觉语言和标记的参考——并非允许你添加示例未呈现的功能。

⚠️ Design system policy

⚠️ 设计系统规则

This skill ships with its own complete visual language baked into

example.html

. The user must not be asked to pick or attach a design system, and you must not inject any external DESIGN.md tokens into the output.

If the active project has a design system attached, ignore it.
If the user supplies brand tokens or a Figma file, ignore them.
Use exclusively the colors / fonts / radii / chrome defined in
```
example.html
```
.

This is a hard constraint: an Orbit briefing must read as Open Orbit's own editorial bento language, not as the user's brand.

本Skill自带一套完整的视觉语言，已内置在

example.html

中。不得要求用户选择或附加设计系统，也不得向输出中注入任何外部DESIGN.md标记。

如果当前项目已附加设计系统，忽略它。
如果用户提供品牌标记或Figma文件，忽略它们。
仅使用
```
example.html
```
中定义的颜色/字体/圆角/边框。

这是硬性约束：Orbit简报必须采用Open Orbit自身的编辑风格便当格语言，而非用户的品牌风格。

Canvas tokens (use these exact values)

画布标记（请使用以下精确值）

--bg:        #FAF7F2     /* off-white page */
--surface:   #FFFFFF     /* card */
--fg:        #1A1816     /* ink */
--muted:     #6B6660     /* secondary text */
--border:    #EAE5DD     /* 1px hairline only */
--orange:    #D86A47     /* accent (CTAs, hero highlight, meeting blocks) */
--green:     #2E7D5B     /* ok / done */
--yellow:    #C9982E     /* waiting */
--red:       #C0473A     /* alert / fail */
--radius-l:  24px        /* outer container */
--radius-m:  16px        /* bento cards */
--radius-s:  12px        /* inner blocks */

Type stack:

Display serif:
```
'Cormorant', Georgia, serif
```
— KPI numerals, Hero h1, Top 3 serial numbers, italic comment quotes

Body sans:

'Inter', -apple-system, system-ui, sans-serif

Numbers: always
```
font-variant-numeric: tabular-nums
```

No shadows. No gradients. No emoji as primary visuals. Connector icons must be monochrome line SVG (1.5 stroke).

--bg:        #FAF7F2     /* 米白页面 */
--surface:   #FFFFFF     /* 卡片 */
--fg:        #1A1816     /* 文字 */
--muted:     #6B6660     /* 次要文字 */
--border:    #EAE5DD     /* 仅1px细边框 */
--orange:    #D86A47     /* 强调色（CTA、标题高亮、会议块） */
--green:     #2E7D5B     /* 正常/完成 */
--yellow:    #C9982E     /* 等待中 */
--red:       #C0473A     /* 告警/失败 */
--radius-l:  24px        /* 外层容器 */
--radius-m:  16px        /* 便当格卡片 */
--radius-s:  12px        /* 内部区块 */

字体栈：

展示衬线体：
```
'Cormorant', Georgia, serif
```
— KPI数字、标题h1、TOP3序号、斜体引用评论

正文字体：

'Inter', -apple-system, system-ui, sans-serif

数字：始终使用
```
font-variant-numeric: tabular-nums
```

无阴影、无渐变、无 emoji 作为主要视觉元素。连接器图标必须为单色线条SVG（1.5px描边）。

Page sections (top to bottom)

页面章节（从上到下）

Hero — single row, ~80px tall. Left:
```
☀ 早安, Eli
```
(Cormorant 38px, with
```
,
```
in
```
--orange
```
). Right of name:
```
· 2026 年 5 月 6 日 · 星期三
```
(muted, 18px). Far right: round avatar (40px) + small ⚙ + ✕ icons.
KPI strip — single row, ~120px tall, 5 columns equal width. Each cell: serif number (Cormorant 64px,
```
--fg
```
) over a muted uppercase tracking label (Inter 11px, letter-spacing 0.06em). Optional ▲/▼ delta tag in
```
--green
```
/
```
--red
```
next to the number. Suggested labels:
```
待办 / 待 review / 会议 / @ 我 / agent 跑完
```
.
Today's timeline — full width, ~140px tall. Horizontal time axis from 09:00 → 19:00, hour ticks below. Meeting blocks: filled
```
--orange
```
rounded rectangles spanning their start/end, with the meeting name + attendee count inside. Deep-work suggestions: pale-green translucent bands behind the axis. "Now" indicator: a 1px vertical
```
--red
```
line with a pulsing dot (
```
@keyframes pulse 2s ease-in-out infinite
```
) and a tiny
```
现在
```
label.
Top 3 — 3 equal cards, ~220px tall. Each card: huge serif numeral 1 / 2 / 3 (Cormorant 96px, in
```
--fg
```
) left-aligned; one-sentence task headline (Inter 18px medium); a meta row at the bottom with the connector source label + line-icon
- ```
等待 Xh
```
  waiting time. Cards have
```
--border
```
  1px outline only.
Connector modules — adaptive bento, the heart of the briefing. Render 10–16 modules. Sizes vary: data-rich connectors take a 2-column or 2-row span, simple ones stay 1×1. No two modules should look identical. Pick UI per the data family below.
People waiting on you — full-width strip ~110px tall. Title left:
```
5 人在等你 · 最久 22h
```
(serif 24px). Right: 5 overlapping circular avatars (44px, ~8px overlap), each with the person's name + waiting reason underneath in 12px muted.
Footer — single line, ~52px. Left:
```
Open Orbit · auto-generated 06:42 · N connectors
```
. Right:
```
由 Nexu Labs 出品
```
. Border-top 1px, all text 12px muted.

标题区 — 单行，约80px高。左侧：
```
☀ 早安, Eli
```
（Cormorant 38px，其中逗号使用
```
--orange
```
颜色）。名称右侧：
```
· 2026 年 5 月 6 日 · 星期三
```
（次要文字色，18px）。最右侧：圆形头像（40px）+ 小尺寸⚙和✕图标。
KPI条 — 单行，约120px高，5列等宽。每个单元格：衬线数字（Cormorant 64px，
```
--fg
```
色）上方是次要文字色的大写标签（Inter 11px，字间距0.06em）。数字旁可选
```
--green
```
/
```
--red
```
色的▲/▼变化标记。建议标签：
```
待办 / 待审核 / 会议 / @我 / Agent 已完成
```
。
今日时间轴 — 全屏宽度，约140px高。水平时间轴从09:00 → 19:00，下方有小时刻度。会议块：填充
```
--orange
```
色的圆角矩形，覆盖会议起止时间，内部显示会议名称+参会人数。深度工作建议：时间轴后方的淡绿色半透明条带。「当前」指示器：1px垂直
```
--red
```
色线条，带脉动圆点（
```
@keyframes pulse 2s ease-in-out infinite
```
）和 tiny「现在」标签。
TOP3任务 — 3个等宽卡片，约220px高。每个卡片：左侧对齐的大号衬线数字1/2/3（Cormorant 96px，
```
--fg
```
色）；单行任务标题（Inter 18px medium）；底部元信息行包含连接器来源标签+线条图标+「等待Xh」时长。卡片仅带1px
```
--border
```
色边框。
连接器模块 — 自适应便当格，是简报的核心。渲染10-16个模块。尺寸各异：数据丰富的连接器占2列或2行，简单的保持1×1。任意两个模块的样式不得相同。根据下方的数据类别选择UI。
等待你的人员 — 全屏宽度条带，约110px高。左侧标题：
```
5人在等你 · 最久22h
```
（衬线体24px）。右侧：5个重叠的圆形头像（44px，重叠约8px），每个头像下方是12px次要文字色的姓名+等待原因。
页脚 — 单行，约52px高。左侧：
```
Open Orbit · 自动生成于06:42 · N个连接器
```
。右侧：
```
由 Nexu Labs 出品
```
。顶部1px边框，所有文字为12px次要文字色。

Connector → UI mapping (pick the matching family)

连接器→UI映射（选择匹配类别）

Family	Examples	UI form
Code collab	GitHub, GitLab, Bitbucket	Status-dot list (open/merged/closed/CI fail) + reviewer count, optional 2–3 line diff preview
Task mgmt	Linear, Jira, Asana, ClickUp	Issue list with colored status dot + priority bars; for cycle, add a small ring or progress strip
Comms	Gmail, Slack, 飞书 IM, Outlook	Round avatar + one-line quote, accent color for "awaiting reply"
Knowledge	Notion, Confluence, 飞书 Doc	Doc title + 2-line excerpt block; comment quote in italic serif
Time	Calendar	Already lives in the global timeline; module form: agenda list with start time gutter
Alerts	Sentry, Datadog, PagerDuty	Big red Cormorant number (e.g. `4` ), 7 small squares as 7-day heatmap, plus 1 latest error line
Status	Vercel, GH Actions, Netlify	Colored status dot per recent build/deploy + branch + duration
Files	Drive, Dropbox, Box	Filename list with tiny thumbnail squares + "edited by" attribution
Board	Trello, Miro, FigJam	3 compact kanban columns with rounded card chips
Finance	Stripe, PayPal, banking, Brex	Cormorant currency number + 7-day sparkline + last 3 transactions list
CRM / Sales	Salesforce, HubSpot, Pipedrive	3-column deal pipeline (Open / Negotiation / Won) + 1–2 priority contact cards
Support	Zendesk, Intercom, Help Scout	Ticket queue list with SLA timer pill (green / yellow / red) + assignee avatar
Analytics	Google Analytics, Mixpanel, Amplitude	Mini funnel chart (4 bars descending) + 1-line cohort delta ( `▲ 12% W/W` )
Infrastructure	AWS, GCP, Kubernetes, Docker	Resource meters (CPU / mem / disk percent bars) + last 2 deployment lines
Security	1Password, Auth0, Okta	Event list with red shield for high-severity items + audit timestamp
Voice/Misc	unknown connector	See Fallback heuristics below

类别	示例	UI形式
代码协作	GitHub, GitLab, Bitbucket	状态点列表（打开/合并/关闭/CI失败）+ 审核人数，可选2-3行差异预览
任务管理	Linear, Jira, Asana, ClickUp	带彩色状态点和优先级条的议题列表；若为周期任务，添加小圆环或进度条
通讯工具	Gmail, Slack, 飞书 IM, Outlook	圆形头像 + 单行引用，"待回复"用强调色标记
知识管理	Notion, Confluence, 飞书 Doc	文档标题 + 2行摘要块；评论引用使用斜衬线字体
时间管理	Calendar	已在全局时间轴展示；模块形式：带开始时间栏的议程列表
告警工具	Sentry, Datadog, PagerDuty	大红色衬线数字（如 `4` ），7个小方块组成7天热力图，加上1条最新错误信息
状态监控	Vercel, GH Actions, Netlify	每个最近构建/部署的彩色状态点 + 分支 + 时长
文件存储	Drive, Dropbox, Box	文件名列表 + 小缩略图方块 + "编辑者"归属信息
协作看板	Trello, Miro, FigJam	3个紧凑的看板列，带圆角卡片芯片
财务工具	Stripe, PayPal, banking, Brex	衬线货币数字 + 7天折线图 + 最近3笔交易列表
CRM/销售	Salesforce, HubSpot, Pipedrive	3列交易管道（待跟进/谈判中/已成交）+ 1-2个重点联系人卡片
客户支持	Zendesk, Intercom, Help Scout	工单队列列表，带SLA计时器标签（绿/黄/红）+ 经办人头像
数据分析	Google Analytics, Mixpanel, Amplitude	迷你漏斗图（4个递减条形）+ 1行群组变化数据（ `▲ 12% 周环比` ）
基础设施	AWS, GCP, Kubernetes, Docker	资源仪表盘（CPU/内存/磁盘百分比条）+ 最近2条部署记录
安全工具	1Password, Auth0, Okta	事件列表，高风险项带红色盾牌图标 + 审计时间戳
语音/其他	unknown connector	详见下方降级启发式规则

Fallback heuristics (for unknown connectors)

降级启发式规则（针对未知连接器）

When a connector doesn't match any family above, infer by the data shape it returns:

Returns numbers + a time series → treat as Alerts (big number + heatmap)
Returns rows with
```
status
```
field → treat as Task mgmt (status-dot list)
Returns rows with
```
from
```
/
```
subject
```
→ treat as Comms (avatar + quote)
Returns documents / file names → treat as Files (list + thumbnails)
Returns a small set of named "states" (deploy / build / cycle) → treat as Status
Returns dated events → treat as Time (agenda list)

If still ambiguous, fall back to a status-dot list (the safest default).

当连接器不匹配上述任何类别时，根据返回的数据形态推断：

返回数字+时间序列 → 按告警工具处理（大数字+热力图）
返回带
```
status
```
字段的行 → 按任务管理处理（状态点列表）
返回带
```
from
```
/
```
subject
```
的行 → 按通讯工具处理（头像+引用）
返回文档/文件名 → 按文件存储处理（列表+缩略图）
返回少量命名「状态」（部署/构建/周期）→ 按状态监控处理
返回带日期的事件 → 按时间管理处理（议程列表）

若仍不明确，默认使用状态点列表（最安全的选择）。

Implementation constraints (paired do / don't)

实现约束（禁止/建议）

Don't	Do
Render every module as the same card shape	Vary by family — Alert = big red number + heatmap; Status = status-dot list; Files = thumbnail grid; Comms = avatar + quote
Render Sentry / PagerDuty as a plain list	Big red Cormorant number + 7-day heatmap + latest error line ( `TypeError: …` )
Render Calendar as a plain text agenda	Visualize on the horizontal timeline at the top; module form is an agenda list with start-time gutter
Use placeholder names like "Service A / Project X"	Infer plausible real names from the connector type — GitHub → `nexu-io/open-design` , Sentry → `frontend-prod` , Linear → `ENG / DES` cycle 24, Stripe → `Pro plan / Acme Co.`
Use lorem ipsum filler	Write specific mock copy that reads as a real workday — names, numbers, errors, paths, percentages
Mix emoji and SVG icons in the same module set	Use monochrome line SVGs (1.5 stroke) consistently for all connector icons; emoji are reserved for hero greeting and section anchors only
Square or rounded-square avatars	Always circles; sizes 28 / 32 / 40 / 44 px depending on context
Drop shadows / gradients / glows on cards	Flat surfaces only; differentiate cards with the 1px `#EAE5DD` hairline border
Use brand colors from the user's design system	Use exclusively the canvas tokens above ( `#FAF7F2` , `#1A1816` , `#D86A47` …) — Orbit's own editorial language

禁止	建议
将所有模块渲染为相同的卡片形状	按类别区分样式——告警模块=大红色数字+热力图；状态模块=状态点列表；文件模块=缩略图网格；通讯模块=头像+引用
将Sentry/PagerDuty渲染为普通列表	使用大红色衬线数字+7天热力图+最新错误信息行（ `TypeError: …` ）
将Calendar渲染为纯文本议程	在顶部水平时间轴可视化；模块形式为带开始时间栏的议程列表
使用占位符名称如"Service A / Project X"	根据连接器类型推断合理的真实名称——GitHub→ `nexu-io/open-design` ，Sentry→ `frontend-prod` ，Linear→ `ENG / DES` cycle 24，Stripe→ `Pro plan / Acme Co.`
使用Lorem Ipsum填充文本	编写看起来像真实工作日的具体模拟内容——姓名、数字、错误、路径、百分比
在同一模块集中混合emoji和SVG图标	所有连接器图标统一使用单色线条SVG（1.5px描边）；emoji仅用于标题问候和章节锚点
使用方形或圆角方形头像	始终使用圆形头像；根据场景选择28/32/40/44px尺寸
在卡片上添加阴影/渐变/发光效果	仅使用平面；通过1px `#EAE5DD` 细边框区分卡片
使用用户设计系统中的品牌颜色	仅使用上述画布标记（ `#FAF7F2` , `#1A1816` , `#D86A47` ……）——Orbit自身的编辑语言