Orbit Notion

Name: Orbit Notion
Author: nexu-io

nexu-io/open-design

91 installs
83.7k repo stars
Updated August 5, 2026
nexu-io/open-design

Helps with ai & agent building tasks during AI-assisted development.

About

orbit-notion is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.

orbit-notion
AI & Agent Building
AI-coding skill

Orbit Notion by the numbers

91 all-time installs (skills.sh)
+1 installs in the week ending Aug 4, 2026 (Skillselion tracking)
Ranked #4,788 of 16,546 AI & Agent Building skills by installs in the Skillselion catalog
Data as of Aug 5, 2026 (Skillselion catalog sync)

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

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/nexu-io/open-design/orbit-notion.svg)](https://skillselion.com/skills/nexu-io/open-design/orbit-notion)

Installs	91
repo stars	★ 83.7k
Last updated	August 5, 2026
Repository	nexu-io/open-design ↗

What it does

Helps with ai & agent building tasks during AI-assisted development.

Files

SKILL.mdMarkdownGitHub ↗

Orbit · Notion Briefing

Single-connector Orbit template scoped to Notion. The briefing renders as a real Notion page — same chrome, same block primitives, same typography.

⚠️ 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 H2 sections in the same order (文档变更 → 评论 / @ 提及 → 数据库变更)
Same bullet rows / comment cards / database table columns and rows
Same callout(s) and toggle block with the same copy
Same property chips at the top (Type / Owner / Created)
Same <script> block at the end (page-link → notion.so injection)

Step 3. You may refresh mock values (doc titles, mentioned people, edit timestamps) so they read as "today", but you must not invent extra blocks: no extra H2 sections, no extra callouts, no extra database columns, no extra emoji decorations. If a detail is not in example.html, it does not belong in your output.

Identity guard. Treat every person name or handle in example.html as mock content only. Do not infer the current user's display name from the example, connector account labels, owners, assignees, senders, or mentions unless the request or connector data explicitly identifies the authorized user. If no explicit current-user name is available, use neutral wording such as you, your, current user, 我, or 你.

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

⚠️ Design system policy

This skill ships with its own complete visual language baked into example.html (Notion's native page chrome and block system). 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 Notion page, not as the user's brand.

Canvas tokens (use these exact values)

ink (Notion black):  #37352F
text-secondary:      #787774
gray bg (block):     #F1F1EF
gray border:         #E3E2E0
gray light:          #F7F6F3
gray cover:          #E9E5E0
white surface:       #FFFFFF

blue:                #2383E2
blue bg:             #D3E5EF
blue text:           #24548A
green:               #4DAB60
green bg:            #DBEDDB
green text:          #1D6B2D
orange bg:           #FADEC9
orange text:         #93531D
yellow bg:           #FDE68A
callout bg:          #F1F1EF

Type stack:

-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Helvetica, 'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol'
Page title: 40px bold
H2: 24px semibold with 1.6em top margin
Body: 16px / line-height 1.5
Captions / breadcrumbs: 14px

Notion always uses generous left/right margins; center the content column at ~720px max width with the rest as --gray-light rails.

Page sections (top to bottom)

1. Top app bar — full-width, white, 45px tall. Left: Notion-style sidebar toggle («), then breadcrumb path Open Orbit › Daily Briefing › May 6. Breadcrumb separators in text-secondary. Far right: 🔍 search, ⏱ updates, ⚙ share, ⋯.

2. Faint left sidebar (optional, may render as a 1px hairline rail) to imply Notion's workspace sidebar without rendering it in full.

3. Cover image — full-width strip ~200px tall, gray cover color #E9E5E0, optional small "Add cover" hint hidden in the corner.

4. Page header inside content column — emoji icon (60px) at top, then page title 每日简报 · 2026 年 5 月 6 日 (Wed) in 40px bold, then a row of property chips (gray): 🗂 Type: Daily Briefing · 👤 Owner: Current user · 📅 Created: 06:42.

5. Synopsis paragraph — one sentence, italic muted: "Auto-generated by Open Orbit from yesterday's Notion activity. 12 events across 8 docs and 2 databases."

6. H2 section: 📝 文档变更 — list of bullet rows. Each bullet: 📄 [doc title] (bold, hover-link blue), then a soft-block child showing [author avatar] [author] edited "[snippet of changed text]" with · 8h ago muted on the right.

7. H2 section: 💬 评论 & @ 提及 — list of comment cards. Each card: gray bg #F1F1EF rounded 6px, 12px padding; [avatar] [author] · in [doc title], then comment body in 15px regular, then a tiny "Reply" link. Highlight @-mentions with blue text #24548A underlined.

8. Callout block — required. gray bg, 16px padding, rounded 6px, left side has a 24px emoji (e.g. 🌟 or 💡). Body: "你昨天还有 3 条评论没回 — 周三例会前看一下?"

9. H2 section: 🗄 数据库变更 — render as a Notion database table view inline. Columns: Name | Status | Updated by | Updated. Each cell has gray border 1px, slight left/right padding, row height ~38px. Header row uses 12px caps text-secondary. Status column uses colored tag pills with the green/blue/orange bg + text colors above (Done green, In Progress blue, Triage orange, Backlog gray).

10. Toggle block — required. Show a ▶ See 4 more changes collapsed toggle that, when expanded, would reveal additional rows. Render it collapsed (just the chevron + label).

11. Closing callout — second callout at the bottom acting as a CTA: 🚀 在 Open Design 里继续处理 → linked back to the OD project.

Block formatting rules

Heading-block hover icon (+ ⋮⋮) can be hinted but kept subtle.
Use the exact Notion bullet glyph (•) and indentation (24px).
Database tags must be Notion's native pill shape: 2-em radius,

6×4 padding, 12px medium weight.

Avatars: 18px circles with letter + Notion-style soft pastel bg.

Implementation constraints (paired do / don't)

Don't	Do
Borrow chrome from another connector (Material / Linear rows / GitHub pills)	Stay 100% in Notion's block primitives — H1 / H2 / bullet / callout / toggle / database table
Use lorem ipsum	Write real-shaped Notion copy: doc titles like `Q3 OKR`, `Onboarding 文档`, `团队周报`; people like Marie / Bob / Lily; comments like "这一段需要你确认"
Mix serif typography in body	Notion is sans only — use the system stack with emoji fallbacks
Render avatars as squares	Always circles, 18px with letter + Notion-style soft pastel bg
Add shadows or gradients	Flat surfaces only; differentiate blocks with `#E3E2E0` 1px borders or `#F1F1EF` block backgrounds
Use loud accent colors outside the Notion palette	Use only the documented Notion blue / green / orange / yellow tag hues
Replace Notion's gray callout bg with a solid color	Callouts must use `#F1F1EF` gray bg + 24px emoji on the left
Use placeholder doc names like "Document 1"	Use real-shaped Notion titles in CJK or English that read like a real workspace


<!doctype html>
<html lang="zh-CN">
<head><script>(function(){
  function makeStore(){
    var data = {};
    var api = {
      getItem: function(k){ return Object.prototype.hasOwnProperty.call(data, k) ? data[k] : null; },
      setItem: function(k, v){ data[k] = String(v); },
      removeItem: function(k){ delete data[k]; },
      clear: function(){ data = {}; },
      key: function(i){ return Object.keys(data)[i] || null; }
    };
    Object.defineProperty(api, 'length', { get: function(){ return Object.keys(data).length; } });
    return api;
  }
  function tryShim(name){
    var works = false;
    try { works = !!window[name] && typeof window[name].getItem === 'function'; void window[name].length; }
    catch (_) { works = false; }
    if (works) return;
    try { Object.defineProperty(window, name, { configurable: true, value: makeStore() }); }
    catch (_) { try { window[name] = makeStore(); } catch (__) {} }
  }
  tryShim('localStorage');
  tryShim('sessionStorage');
})();</script>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>📒 Notion · 昨日 3 条与你相关</title>
  <style>
    :root {
      --notion-black: #37352F;
      --notion-gray-text: #787774;
      --notion-gray-bg: #F1F1EF;
      --notion-gray-border: #E3E2E0;
      --notion-gray-light: #F7F6F3;
      --notion-gray-cover: #E9E5E0;
      --notion-white: #FFFFFF;
      --notion-blue: #2383E2;
      --notion-blue-bg: #D3E5EF;
      --notion-blue-text: #24548A;
      --notion-green: #4DAB60;
      --notion-green-bg: #DBEDDB;
      --notion-green-text: #1D6B2D;
      --notion-orange-bg: #FADEC9;
      --notion-orange-text: #93531D;
      --notion-yellow-bg: #FDE68A;
      --notion-callout-bg: #F1F1EF;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Helvetica, 'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol';
      font-size: 16px;
      line-height: 1.5;
      color: var(--notion-black);
      background: var(--notion-white);
      -webkit-font-smoothing: antialiased;
    }

    /* — pseudo sidebar — */
    .page-wrapper {
      display: flex;
      min-height: 100vh;
    }
    .sidebar-hint {
      width: 4px;
      background: var(--notion-gray-border);
      flex-shrink: 0;
      position: sticky;
      top: 0;
      height: 100vh;
    }
    .main-area {
      flex: 1;
      min-width: 0;
    }

    /* — breadcrumb — */
    .breadcrumb {
      padding: 10px 96px;
      font-size: 14px;
      color: var(--notion-gray-text);
      display: flex;
      align-items: center;
      gap: 4px;
      border-bottom: 1px solid var(--notion-gray-border);
      background: var(--notion-white);
      position: sticky;
      top: 0;
      z-index: 10;
    }
    .breadcrumb span { opacity: 0.5; }
    .breadcrumb a {
      color: var(--notion-gray-text);
      text-decoration: none;
    }
    .breadcrumb a:hover { color: var(--notion-black); }

    /* — cover — */
    .cover {
      height: 220px;
      position: relative;
      background:
        /* vignette */
        radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(15,10,5,0.45) 100%),
        /* warm golden light from upper-left */
        radial-gradient(ellipse at 25% 20%, rgba(180,140,70,0.35) 0%, transparent 60%),
        /* deep shadow pocket lower-right */
        radial-gradient(ellipse at 80% 85%, rgba(30,15,10,0.5) 0%, transparent 50%),
        /* subtle warm highlight center */
        radial-gradient(ellipse at 55% 40%, rgba(160,110,60,0.25) 0%, transparent 45%),
        /* base: deep Renaissance brown-black */
        linear-gradient(160deg, #3a2a1a 0%, #2a1c10 30%, #1e140c 55%, #2c1e14 80%, #3a2818 100%);
      background-size: 100% 100%;
      overflow: hidden;
    }
    .cover::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        /* craquelure-like texture */
        repeating-linear-gradient(
          135deg,
          transparent 0px, transparent 18px,
          rgba(120,90,50,0.04) 18px, rgba(120,90,50,0.04) 19px
        ),
        repeating-linear-gradient(
          45deg,
          transparent 0px, transparent 24px,
          rgba(80,55,30,0.03) 24px, rgba(80,55,30,0.03) 25px
        );
      pointer-events: none;
    }
    .cover::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        /* gold-leaf accent streak */
        linear-gradient(100deg,
          transparent 20%,
          rgba(195,160,80,0.08) 35%,
          rgba(210,175,90,0.12) 42%,
          rgba(195,160,80,0.06) 50%,
          transparent 65%
        );
      pointer-events: none;
    }

    /* — page body — */
    .page-content {
      max-width: 900px;
      padding: 60px 96px 80px;
    }

    /* — title — */
    .page-title {
      font-size: 40px;
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: -0.02em;
      margin-bottom: 4px;
      color: var(--notion-black);
    }
    .page-subtitle {
      font-size: 14px;
      color: var(--notion-gray-text);
      margin-bottom: 32px;
    }

    /* — divider — */
    .notion-divider {
      border: none;
      border-top: 1px solid var(--notion-gray-border);
      margin: 24px 0;
    }

    /* — headings — */
    .notion-h2 {
      font-size: 24px;
      font-weight: 600;
      line-height: 1.3;
      margin: 32px 0 8px;
      color: var(--notion-black);
    }
    .notion-h2 .emoji-anchor {
      margin-right: 6px;
    }

    /* — bullet list — */
    .notion-bullet-list {
      list-style: none;
      padding-left: 2px;
    }
    .notion-bullet-list li {
      position: relative;
      padding: 3px 0 3px 24px;
      font-size: 16px;
      line-height: 1.65;
    }
    .notion-bullet-list li::before {
      content: "•";
      position: absolute;
      left: 6px;
      color: var(--notion-black);
    }
    .notion-bullet-list .page-link {
      text-decoration: underline;
      text-decoration-color: var(--notion-gray-border);
      text-underline-offset: 2px;
      cursor: pointer;
    }
    .notion-bullet-list .page-link:hover {
      background: var(--notion-gray-bg);
      border-radius: 3px;
    }
    .notion-bullet-list .meta {
      color: var(--notion-gray-text);
      font-size: 14px;
      margin-left: 4px;
    }
    .notion-bullet-list .person {
      color: var(--notion-black);
      font-weight: 500;
    }

    /* — callout — */
    .notion-callout {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 16px 16px 16px 12px;
      background: var(--notion-callout-bg);
      border-radius: 4px;
      margin: 16px 0;
      font-size: 16px;
      line-height: 1.6;
    }
    .notion-callout .callout-icon {
      font-size: 20px;
      flex-shrink: 0;
      line-height: 1.4;
    }

    /* — toggle — */
    .notion-toggle {
      margin: 12px 0;
    }
    .notion-toggle summary {
      cursor: pointer;
      font-size: 16px;
      line-height: 1.65;
      padding: 3px 0 3px 4px;
      list-style: none;
      display: flex;
      align-items: center;
      gap: 4px;
      user-select: none;
      border-radius: 3px;
    }
    .notion-toggle summary:hover {
      background: var(--notion-gray-bg);
    }
    .notion-toggle summary::-webkit-details-marker { display: none; }
    .notion-toggle summary::before {
      content: "▶";
      font-size: 10px;
      color: var(--notion-gray-text);
      transition: transform 0.15s;
      flex-shrink: 0;
      width: 20px;
      text-align: center;
    }
    .notion-toggle[open] summary::before {
      transform: rotate(90deg);
    }
    .notion-toggle .toggle-content {
      padding: 4px 0 4px 26px;
      color: var(--notion-gray-text);
      font-size: 15px;
    }

    /* — table (database view) — */
    .notion-table-wrap {
      margin: 12px 0 24px;
      border: 1px solid var(--notion-gray-border);
      border-radius: 4px;
      overflow: hidden;
    }
    .notion-table-header {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 12px;
      font-size: 14px;
      font-weight: 500;
      color: var(--notion-black);
      border-bottom: 1px solid var(--notion-gray-border);
      background: var(--notion-white);
    }
    .notion-table-header .db-icon { font-size: 14px; }
    .notion-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
    }
    .notion-table th {
      text-align: left;
      padding: 6px 12px;
      font-weight: 400;
      color: var(--notion-gray-text);
      border-bottom: 1px solid var(--notion-gray-border);
      background: var(--notion-gray-light);
      font-size: 12px;
    }
    .notion-table td {
      padding: 8px 12px;
      border-bottom: 1px solid var(--notion-gray-border);
      vertical-align: middle;
    }
    .notion-table tr:last-child td {
      border-bottom: none;
    }
    .notion-table .cell-title {
      font-weight: 500;
      color: var(--notion-black);
    }
    .notion-table .cell-title .open-icon {
      font-size: 12px;
      color: var(--notion-gray-text);
      margin-left: 4px;
      opacity: 0;
      transition: opacity 0.15s;
    }
    .notion-table tr:hover .cell-title .open-icon {
      opacity: 1;
    }

    /* — tags — */
    .tag {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 3px;
      font-size: 12px;
      font-weight: 500;
      line-height: 1.4;
      white-space: nowrap;
    }
    .tag-blue {
      background: var(--notion-blue-bg);
      color: var(--notion-blue-text);
    }
    .tag-green {
      background: var(--notion-green-bg);
      color: var(--notion-green-text);
    }

    /* — at mention inline — */
    .mention {
      background: rgba(35, 131, 226, 0.1);
      color: var(--notion-blue);
      padding: 1px 4px;
      border-radius: 3px;
      font-weight: 500;
      cursor: pointer;
    }

    /* — responsive — */
    @media (max-width: 768px) {
      .breadcrumb, .page-content { padding-left: 24px; padding-right: 24px; }

      .page-title { font-size: 30px; }
      .notion-table-wrap { overflow-x: auto; }
    }
  </style>
</head>
<body>
  <div class="page-wrapper">
    <!-- pseudo sidebar -->
    <div class="sidebar-hint"></div>

    <div class="main-area">
      <!-- breadcrumb -->
      <div class="breadcrumb">
        <a href="#">Open Orbit</a>
        <span>/</span>
        <a href="#">每日简报</a>
        <span>/</span>
        <span style="color: var(--notion-black);">5 月 6 日</span>
      </div>

      <!-- cover -->
      <div class="cover">

      </div>

      <!-- page content -->
      <div class="page-content" data-od-id="page-body">
        <h1 class="page-title" data-od-id="headline">📒 Notion · 昨日 3 条与你相关</h1>
        <p class="page-subtitle">2026-05-06 你好 · 由 Open Orbit 自动生成</p>

        <hr class="notion-divider" />

        <!-- callout -->
        <div class="notion-callout" data-od-id="callout">
          <span class="callout-icon">💡</span>
          <div>今日简报仅包含 <strong>Notion</strong> 连接器的变更。共 3 条通知，其中 1 条 @ 提到了你。</div>
        </div>

        <!-- 文档变更 -->
        <h2 class="notion-h2"><span class="emoji-anchor">📝</span>文档变更</h2>
        <ul class="notion-bullet-list" data-od-id="doc-changes">
          <li>
            <span class="page-link">《Q3 OKR》</span>
            <span class="person">Marie</span> 编辑了 2 段
            <span class="meta">· 22:14</span>
          </li>
          <li>
            <span class="page-link">《Onboarding 文档》</span>
            <span class="person">Bob</span> 新建
            <span class="meta">· 19:08</span>
          </li>
        </ul>

        <hr class="notion-divider" />

        <!-- 评论 / @ 提及 -->
        <h2 class="notion-h2"><span class="emoji-anchor">💬</span>评论 / @ 提及</h2>
        <ul class="notion-bullet-list" data-od-id="mentions">
          <li>
            <span class="page-link">团队周报</span>
            <span class="person">Lily</span> 在「设计进度」段落 <span class="mention">@你</span>
            <span class="meta">· 16:30</span>
          </li>
          <li>
            <span class="page-link">Q3 OKR</span>
            <span class="person">Bob</span> 留言「这一段需要你确认」
            <span class="meta">· 22:18</span>
          </li>
        </ul>

        <hr class="notion-divider" />

        <!-- 数据库变更 -->
        <h2 class="notion-h2"><span class="emoji-anchor">🗄️</span>数据库变更</h2>

        <div class="notion-table-wrap" data-od-id="db-table">
          <div class="notion-table-header">
            <span class="db-icon">📊</span> 项目追踪
          </div>
          <table class="notion-table">
            <thead>
              <tr>
                <th style="width: 40%;">名称</th>
                <th style="width: 20%;">状态</th>
                <th style="width: 20%;">更新人</th>
                <th style="width: 20%;">时间</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <span class="cell-title">Login v2 设计追踪<span class="open-icon">↗</span></span>
                </td>
                <td><span class="tag tag-blue">In Progress</span></td>
                <td>Marie</td>
                <td style="color: var(--notion-gray-text);">21:00</td>
              </tr>
              <tr>
                <td>
                  <span class="cell-title">API 文档 v2<span class="open-icon">↗</span></span>
                </td>
                <td><span class="tag tag-green">Done</span></td>
                <td>Bob</td>
                <td style="color: var(--notion-gray-text);">17:45</td>
              </tr>
            </tbody>
          </table>
        </div>

        <!-- toggle -->
        <details class="notion-toggle">
          <summary>📎 查看原始变更记录</summary>
          <div class="toggle-content">
            共 5 条 Notion API 事件，已折叠。点击上方展开查看完整日志。
          </div>
        </details>

      </div>
    </div>
  </div>

<script>
  // Make every Notion page-link / database row open the matching page on
  // notion.so. Uses a slug derived from the visible title.
  function slugify(s) {
    return (s || '').replace(/《|》/g, '').trim().replace(/\s+/g, '-').replace(/[^\p{L}\p{N}-]/gu, '');
  }
  function notionUrl(title) {
    return 'https://www.notion.so/nexu/' + slugify(title);
  }
  document.querySelectorAll('.page-link').forEach(span => {
    const url = notionUrl(span.textContent);
    const a = document.createElement('a');
    a.href = url;
    a.target = '_blank';
    a.rel = 'noopener noreferrer';
    a.style.cssText = 'color:inherit;text-decoration:none;border-bottom:1px solid var(--notion-gray-border);';
    a.addEventListener('mouseenter', () => a.style.borderBottomColor = 'var(--notion-blue)');
    a.addEventListener('mouseleave', () => a.style.borderBottomColor = 'var(--notion-gray-border)');
    while (span.firstChild) a.appendChild(span.firstChild);
    span.appendChild(a);
  });
  document.querySelectorAll('.notion-table tbody tr').forEach(row => {
    const title = row.querySelector('.cell-title')?.childNodes[0]?.textContent;
    if (!title) return;
    const url = notionUrl(title);
    row.style.cursor = 'pointer';
    row.addEventListener('click', () => window.open(url, '_blank', 'noopener,noreferrer'));
    row.addEventListener('mouseenter', () => row.style.background = 'var(--notion-gray-light)');
    row.addEventListener('mouseleave', () => row.style.background = '');
  });
</script>
</body>
</html>