mcpField
O
orbit-github

orbit-github

github.com/nexu-io开发104.6k87 次安装今天更新
代码仓库

关于 orbit-github

orbit-github 是用于生成 GitHub 专属简报页的 Orbit 技能，要求依据指定模板复现结构与视觉样式，并遵守模拟内容和身份规则。

主要功能

  1. 01GitHub 专属简报模板
  2. 02规定页面与事件布局
  3. 03GitHub Primer 视觉规则
  4. 04模拟内容与身份保护

适用场景

  1. 01生成 GitHub 活动简报
  2. 02让页面遵循指定示例
  3. 03避免添加未规定的界面元素

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/nexu-io/open-design --skill orbit-github

安装后在 Claude Code 中输入/orbit-github确认已加载。

附带文件example.html

详细介绍

Orbit · GitHub 简报

仅针对 GitHub 的单连接器 Orbit 模板。

⚠️ 事实来源规范（请先阅读）

步骤 1。 在编写任何输出之前，打开并阅读此文件夹中的 example.html。 该文件是设计的唯一规范——你的工作是复现它，而不是重新诠释。

步骤 2。 严格按照 1:1 还原示例结构：

  • DOM 层级和类名保持一致
  • 导航栏项目保持一致（且只能有这些）
  • 左侧栏筛选列表保持一致（且只能有这些）
  • 事件分组及其顺序、每组的行数都保持一致
  • diff 预览的位置、CI 失败区块、提醒区块都保持一致
  • 末尾的 <script> 区块保持一致（筛选／悬停／链接注入）

步骤 3。 可以更新模拟内容（PR 编号、标题、时间、CI 提交消息），使其看起来像“今天”的内容，但不得 虚构额外的 UI：不得增加侧栏条目、通知、事件类型、徽章或界面装饰。如果某项内容未出现在 example.html 中，就不能放进输出。

身份保护。 将 example.html 中的所有人名或用户名都视为模拟内容。除非请求或连接器数据明确指出 已获授权的用户，否则不得根据示例、连接器账号标签、所有者、受指派人、发件人或提及内容推断当前用户的显示名称。 如果没有明确的当前用户姓名，请使用中性措辞，例如 you、your、current user、me 或 my。

下方各节是令牌和视觉语言的参考， 并非扩展页面的许可。

⚠️ 设计系统政策

此技能自带完整的视觉语言，已融入 example.html（GitHub 的 Primer 界面）。不得要求用户选择或附加设计系统，也不得将 任何外部 DESIGN.md 令牌注入输出。

  • 如果当前项目附有设计系统，请忽略。
  • 如果用户提供品牌令牌或 Figma 文件，请忽略。
  • 只能使用 example.html 中定义的颜色／字体／圆角。

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

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

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

字体栈：

  • -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif
  • 字号：导航栏 14px，标题 16/20px，正文 14px，元信息 12px

页面分区

  1. 顶部导航栏 — 全宽，深色（#24292f），高 60px。 左侧：章鱼猫 SVG 徽标（白色，32px）+ 搜索输入框 （背景为 rgba(255,255,255,0.08)，白色占位符文字呈淡化效果）。 右侧：+ 下拉菜单、未读通知数 > 0 时带红点的通知铃铛、圆形头像。

  2. 页头行 — 导航栏下方的浅色栏，高 56px。 左侧：页面面包屑 收件箱 · 每日摘要 · 5 月 6 日。 右侧：筛选下拉选项（类型 ▾ 日期 ▾ 状态 ▾）。

  3. 双栏主区域：

    • 左侧栏（240px）：垂直筛选列表。项目： 收件箱 · 已保存 · 已完成 · 全部，然后是分隔线，再接 参与中 · 提及 · 审查请求 · 已分配 · 评论。 当前选中项：浅灰色胶囊背景。
    • 主面板（flex 1）：按类别分组的事件流。

  4. 主面板中的类别分组（顺序如下）：

    • 等待你处理的审查请求 — 黄色提醒块 （背景 #fff8c5，1px 边框 #d4a72c）。每行：头像 + 仓库 路径 + PR 标题 + 审查者状态行（小圆点 （✓ 绿色 / ⏳ 黄色 / ○ 灰色））+“X / Y 位审查者”+ 时间。
    • CI / 检查 — 每次失败的运行显示为红色边框卡片 （边框颜色 #cf222e，背景 #ffebe9），包含红色 ✗ 符号、 运行名称、分支名称（等宽字体）、提交说明、时间。
    • 分配给你的议题 — 普通行，包含状态圆点（开放为 绿色 / 已关闭为红色）、标题、仓库路径、时间、标签胶囊。
    • 动态 — 用于合并/关闭操作的低调行；文字淡化， 带紫色 已合并 胶囊或红色 已关闭 胶囊。

  5. 可选 PR 差异预览 — 内嵌在某条 PR 行下方，显示 2–3 行模拟代码，使用 12px 等宽字体块，行首带红色 − / 绿色 +，行背景色为 #ffebe9 / #dafbe1。

  6. 页脚 — 单行，12px，颜色淡化： 打开 Orbit · 自动生成于 06:42 · 仅限 GitHub。

胶囊 / 筛选项规则

  • 状态胶囊：胶囊形状（border-radius 2em），12px 中等字重，内边距 4×8。 白色前景，背景颜色按上方状态颜色设置。
  • 标签（bug、p1、frontend 等）：GitHub 标签圆角胶囊，每个标签 使用各自任意的颜色。使用多样且符合实际场景的标签颜色。
  • 审查者圆点：8px 实心圆，间距 2px；仅在能保持视觉低调时使用 ✓ ⏳ ○ 符号。

实现约束（成对的禁止 / 应该）

禁止应该
混用浅色和深色主题使用浅色 Primer 主题（页面背景 #f6f8fa，卡片背景 #ffffff）
使用非 GitHub 字体仅使用 -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif
将头像渲染为正方形或圆角正方形始终使用圆形，审查者头像堆叠时重叠 ≤ 6px
在界面元素上使用阴影 / 渐变 / 光晕使用扁平表面；通过 #d0d7de 1px 边框进行区分
使用 lorem ipsum编写符合 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 为紫色

评论

支持 Markdown