orbit-github

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Orbit · GitHub Briefing

Orbit · GitHub 简报

Single-connector Orbit template scoped to GitHub.

面向GitHub的单连接器Orbit模板。

⚠️ 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 nav-bar items (and only those)
Same left-rail filter list (and only those)
Same event groups in the same order, with the same row count
Same diff-preview placement, same CI-fail block, same attention block
Same
```
<script>
```
block at the end (filter / hover / link injection)

Step 3. You may refresh mock values (PR numbers, titles, times, CI commit messages) so they read as "today", but you must not invent extra UI: no extra rail entries, no extra notifications, no extra event types, no extra badges, no extra chrome ornaments. If something is not already present in

example.html

, it does not belong in your output.

The sections below are a reference for tokens and visual language — not a license to extend the page.

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

example.html

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

步骤2. 1:1复刻示例的结构：

相同的DOM层级和类名
相同的导航栏项目（且仅限这些）
相同的左侧栏筛选列表（且仅限这些）
相同顺序的事件组，行数一致
相同的差异预览位置、相同的CI失败块、相同的提醒块
末尾相同的
```
<script>
```
块（筛选/悬停/链接注入）

步骤3. 你可以更新模拟值（PR编号、标题、时间、CI提交信息）使其看起来是“今日”的内容，但绝对不能新增UI元素：不能添加额外的侧边栏条目、额外的通知、额外的事件类型、额外的徽章、额外的装饰元素。如果

example.html

中没有的内容，就不应出现在你的输出中。

以下章节是令牌和视觉语言的参考——而非扩展页面的许可。

⚠️ Design system policy

⚠️ 设计系统规则

This skill ships with its own complete visual language baked into

example.html

(GitHub's Primer chrome). 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 defined in
```
example.html
```
.

This is a hard constraint: the briefing must read as a real GitHub page, not as the user's brand.

此技能在

example.html

中内置了一套完整的专属视觉语言（GitHub的Primer框架）。不得要求用户选择或附加设计系统，也不得将任何外部DESIGN.md令牌注入输出。

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

这是硬性约束：简报必须看起来像真实的GitHub页面，而非用户的品牌页面。

Canvas tokens (use these exact values)

画布令牌（使用以下精确值）

page bg:           #f6f8fa
card bg:           #ffffff
nav bar:           #24292f  /* GitHub black header */
nav text:          #ffffff
ink:               #1f2328
muted:             #59636e
border:            #d0d7de
hairline:          rgba(208,215,222,0.32)

state · open:      #1a7f37
state · merged:    #8250df
state · closed:    #cf222e
state · draft:     #6e7781

attention bg:      #fff8c5  /* yellow review-request block */
attention border:  #d4a72c
ci-fail bg:        #ffebe9
ci-fail border:    #cf222e

Type stack:

-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif

Sizes: nav 14px, headings 16/20px, body 14px, meta 12px

page bg:           #f6f8fa
card bg:           #ffffff
nav bar:           #24292f  /* GitHub黑色头部 */
nav text:          #ffffff
ink:               #1f2328
muted:             #59636e
border:            #d0d7de
hairline:          rgba(208,215,222,0.32)

state · open:      #1a7f37
state · merged:    #8250df
state · closed:    #cf222e
state · draft:     #6e7781

attention bg:      #fff8c5  /* 黄色评审请求块 */
attention border:  #d4a72c
ci-fail bg:        #ffebe9
ci-fail border:    #cf222e

字体栈：

-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif

字号：导航栏14px，标题16/20px，正文14px，元数据12px

Page sections

页面章节

Top nav bar — full-width, dark (
```
#24292f
```
), 60px tall. Left: octocat SVG logo (white, 32px) + search input (
```
rgba(255,255,255,0.08)
```
background, white placeholder ghosted). Right:
```
+
```
plus dropdown, notifications bell with red dot if unread > 0, round avatar.
Header row — light bar under the nav, 56px. Left: page breadcrumb
```
Inbox · Daily Digest · May 6
```
. Right: filter dropdown chips (
```
Type ▾  Date ▾  Status ▾
```
).
Two-pane main:
- Left rail (240px): vertical filter list. Items:
```
Inbox · Saved · Done · All
```
  then divider then
```
Participating · Mentions · Review requests · Assigned · Comments
```
  . Active item: light gray pill background.
- Main pane (flex 1): event stream grouped by category.
Category groups in main pane (in this order):
- Review requests waiting on you — yellow attention block (bg
```
#fff8c5
```
  , 1px border
```
#d4a72c
```
  ). Each row: avatar + repo path + PR title + reviewer-state row of small dots (✓ green / ⏳ yellow / ○ gray) + "X of Y reviewers" + age.
- CI / Checks — each failed run is a red-bordered card (border-color
```
#cf222e
```
  , bg
```
#ffebe9
```
  ) with a
```
✗
```
  red glyph, run name, branch name (mono), commit message, age.
- Issues assigned to you — plain rows, status circle (open green / closed red), title, repo path, age, label pills.
- Activity — quieter rows for merges/closes; muted text, small
```
merged
```
  purple pill or
```
closed
```
  red pill.
Optional PR-diff preview — inline under one PR row, show 2–3 lines of mock code in a 12px monospace block with red
```
−
```
/ green
```
+
```
prefixed lines and
```
#ffebe9
```
/
```
#dafbe1
```
row tints.

Footer — single line, 12px muted:

Open Orbit · auto-generated 06:42 · GitHub only

顶部导航栏——全宽、深色（
```
#24292f
```
）、高60px。左侧：章鱼猫SVG图标（白色，32px）+ 搜索输入框（背景
```
rgba(255,255,255,0.08)
```
，白色占位符半透明）。右侧：
```
+
```
下拉菜单、未读数量>0时带红点的通知铃铛、圆形头像。
标题行——导航栏下方的浅色栏，高56px。左侧：页面面包屑
```
Inbox · Daily Digest · May 6
```
。右侧：筛选下拉芯片（
```
Type ▾  Date ▾  Status ▾
```
）。
双面板主体：
- 左侧栏（240px）：垂直筛选列表。条目：
```
Inbox · Saved · Done · All
```
  然后是分隔线，接着
```
Participating · Mentions · Review requests · Assigned · Comments
```
  。激活项：浅灰色胶囊背景。
- 主面板（flex 1）：按类别分组的事件流。
主面板中的类别组（按以下顺序）：
- 等待你评审的请求——黄色提醒块（背景
```
#fff8c5
```
  ，1px边框
```
#d4a72c
```
  ）。每行：头像 + 仓库路径 + PR标题 + 评审者状态行的小点（✓绿色 / ⏳黄色 / ○灰色） + “X/Y位评审者” + 时长。
- CI / 检查——每个失败的运行记录是带红色边框的卡片（边框颜色
```
#cf222e
```
  ，背景
```
#ffebe9
```
  ），带有红色
```
✗
```
  符号、运行名称、分支名称（等宽字体）、提交信息、时长。
- 分配给你的Issue——普通行，状态圆圈（打开为绿色 / 关闭为红色）、标题、仓库路径、时长、标签胶囊。
- 活动——合并/关闭操作的浅色行；文本低饱和度，小的
```
merged
```
  紫色胶囊或
```
closed
```
  红色胶囊。
可选PR差异预览——内嵌在某一行PR下方，展示 2-3行模拟代码的12px等宽块，行首带有红色
```
−
```
/ 绿色
```
+
```
前缀，行背景色为
```
#ffebe9
```
/
```
#dafbe1
```
。

页脚——单行，12px低饱和度文本：

Open Orbit · auto-generated 06:42 · GitHub only

。

Pill / chip rules

胶囊/芯片规则

State pills: pill shape (border-radius 2em), 12px medium, 4×8 padding. Foreground white, background by state color above.
Labels (
```
bug
```
,
```
p1
```
,
```
frontend
```
…): GitHub label rounded pill, each with its own arbitrary color. Use varied real-world label hues.
Reviewer dots: 8px filled circles, 2px gap, with
```
✓ ⏳ ○
```
glyphs only if you can keep them visually subtle.

状态胶囊：胶囊形状（圆角2em），12px中等字重，内边距4×8。前景色白色，背景色使用上述状态颜色。
标签（
```
bug
```
,
```
p1
```
,
```
frontend
```
…）：GitHub风格的圆角胶囊，每个标签有自定义颜色。使用真实场景中的多样色调。
评审者点：8px实心圆，间距2px，仅在能保持视觉低调的情况下使用
```
✓ ⏳ ○
```
符号。

Implementation constraints (paired do / don't)

实现约束（禁止/允许对比）

Don't	Do
Mix light and dark themes	Stay on the light Primer theme ( `#f6f8fa` page bg, `#ffffff` cards)
Use non-GitHub typography	Use `-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif` exclusively
Render avatars as squares or rounded squares	Always circles, with overlap `≤ 6px` for reviewer stacks
Use shadows / gradients / glows on chrome	Flat surfaces; differentiate with `#d0d7de` 1px borders
Use lorem ipsum	Write real-shaped GitHub copy: PR titles like `feat: orbit briefing card` , branches like `chore/upgrade-deps` , commit subjects under 72 chars
Render a CI failure as a normal row	Wrap in a red-bordered card ( `#cf222e` border, `#ffebe9` bg) with a red `✗` glyph and run name
Render a review request as a normal row	Sit it in the yellow attention block ( `#fff8c5` bg, `#d4a72c` border) with reviewer status dots row
Use placeholder repo names like `org/repo`	Use `nexu-io/open-design` (this org's actual primary repo)
Pluck arbitrary label colors	Use realistic dev-team hues — `bug` red, `enhancement` blue, `documentation` light blue, `frontend` purple

禁止	允许
混合明暗主题	保持浅色Primer主题（页面背景 `#f6f8fa` ，卡片 `#ffffff` ）
使用非GitHub字体	仅使用 `-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif`
将头像渲染为方形或圆角方形	始终使用圆形，评审者堆叠时重叠 `≤ 6px`
在框架上使用阴影/渐变/发光效果	平面效果；使用 `#d0d7de` 1px边框区分元素
使用占位文本	编写符合GitHub风格的真实内容：PR标题如 `feat: orbit briefing card` ，分支如 `chore/upgrade-deps` ，提交主题不超过72字符
将CI失败渲染为普通行	包裹在红色边框卡片中（边框 `#cf222e` ，背景 `#ffebe9` ），带有红色 `✗` 符号和运行名称
将评审请求渲染为普通行	放在黄色提醒块中（背景 `#fff8c5` ，边框 `#d4a72c` ），带有评审者状态点行
使用 `org/repo` 这类占位仓库名	使用 `nexu-io/open-design` （此组织的实际主仓库）
使用任意标签颜色	使用符合开发团队实际的色调—— `bug` 红色、 `enhancement` 蓝色、 `documentation` 浅蓝色、 `frontend` 紫色