orbit-notion

Orbit · Notion ブリーフィング

Notion に特化した単一コネクターの Orbit テンプレートです。ブリーフィングは 本物の Notion ページとして表示されます。同じページの外観、同じブロックの基本要素、 同じタイポグラフィです。

⚠️ 信頼できる唯一の情報源に関するプロトコル（最初にお読みください）

ステップ 1. 出力を作成する前に、このフォルダーに含まれる example.html を開いて読みます。 このファイルが正規のデザインです。あなたの役割は、そのデザインを再現することであり、独自に解釈することではありません。

ステップ 2. example.html の構成を 1:1 で再現します。

• 同じ DOM 階層とクラス名
• 同じ H2 セクションを同じ順序で（文档变更 → 评论 / @ 提及 → 数据库变更）
• 同じ箇条書き行／コメントカード／データベースのテーブル列と行
• 同じ文言のコールアウトとトグルブロック
• 上部に同じプロパティチップ（Type / Owner / Created）
• 末尾に同じ <script> ブロック（page-link → notion.so の挿入）

ステップ 3. モック値（ドキュメントのタイトル、メンションされた人、編集日時）は「今日」の内容になるよう更新してもかまいませんが、ブロックを追加してはいけません。H2 セクション、コールアウト、データベース列、絵文字による装飾を追加してはいけません。example.html にない要素は、出力に含めてはいけません。

アイデンティティ保護のルール。 example.html にあるすべての人名やハンドル名は、モックコンテンツとしてのみ扱います。リクエストまたはコネクターデータで明示的に許可されたユーザーが特定されていない限り、例の内容、コネクターのアカウントラベル、オーナー、担当者、送信者、メンションから現在のユーザーの表示名を推測してはいけません。現在のユーザー名が明示されていない場合は、you、your、current user、我、你 などの中立的な表現を使います。

以下のセクションは、トークンとビジュアル言語の参考情報であり、ページを拡張してよいという意味ではありません。

⚠️ デザインシステムのポリシー

このスキルには、example.html に組み込まれた独自の完全なビジュアル言語（Notion 標準のページ外観とブロックシステム）が含まれています。ユーザーにデザインシステムの選択や添付を求めてはいけません。また、外部の DESIGN.md トークンを出力に注入してはいけません。

• アクティブなプロジェクトにデザインシステムが設定されている場合は、無視します。
• ユーザーがブランドトークンや Figma ファイルを提供した場合は、無視します。
• example.html で定義されている色、フォント、角丸のみを使用します。

これは必須の制約です。ブリーフィングはユーザーのブランドではなく、本物の Notion ページのように見える必要があります。

キャンバストークン（次の値をそのまま使用）

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

フォントスタック：

• -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Helvetica, 'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol'
• ページタイトル：40px、太字
• H2：24px、セミボールド、上部マージン 1.6em
• 本文：16px／行の高さ 1.5
• キャプション／パンくずリスト：14px

Notion では左右に十分な余白が常に設けられます。コンテンツ列を最大幅約 720px で中央に配置し、残りの領域には --gray-light のレールを使います。

ページセクション（上から下）

1. トップアプリバー — 全幅、白、幅45px。 左側：Notion風のサイドバー切り替え（«）、続いてパンくずリスト Open Orbit › Daily Briefing › May 6。 パンくずの区切り文字は text-secondary。右端：🔍 検索、⏱ 更新、⚙ 共有、⋯。

2. 薄く表示する左サイドバー（任意。幅1pxの細いレールとして表示してもかまいません） Notionのワークスペースサイドバーを全体表示せずに示します。

3. カバー画像 — 全幅の帯状、約200pxの高さ、カバー色はグレー #E9E5E0。任意で、小さな「カバーを追加」のヒントを隅に隠して表示します。

4. コンテンツ列内のページヘッダー — 上部に絵文字アイコン（60px）、 続いてページタイトル 每日简报 · 2026 年 5 月 6 日 (Wed) を40pxの太字で表示し、 その下にプロパティチップの行（グレー）を表示します。 🗂 Type: Daily Briefing · 👤 Owner: Current user · 📅 Created: 06:42。

5. 概要の段落 — 1文、イタリック体で控えめに表示します。 "Open Orbit が昨日の Notion アクティビティから自動生成しました。 8件のドキュメントと2つのデータベースで、12件のイベントがありました。"

6. H2 セクション：📝 文档变更 — 箇条書きの行。 各項目： 📄 [doc title]（太字、ホバー時はリンク色の青）、続いて薄い背景のブロックで [author avatar] [author] が「[変更されたテキストの抜粋]」を編集 と表示し、右側に控えめな色で · 8h ago を表示します。

7. H2 セクション：💬 评论 & @ 提及 — コメントカードのリスト。 各カード：#F1F1EF のグレー背景、角丸6px、パディング12px。 [avatar] [author] · in [doc title]、続いて15pxの標準ウェイトでコメント本文、 その下に小さな「返信」リンクを表示します。 @メンションは、下線付きの青色テキスト #24548A で強調します。

8. コールアウトブロック — 必須。gray bg、パディング16px、角丸6px。 左側に24pxの絵文字（例：🌟 または 💡）を配置します。本文： "昨日はまだ返信していないコメントが3件あります — 水曜日の定例会前に確認しますか？"

9. H2 セクション：🗄 数据库变更 — Notionデータベースの テーブルビューをインラインで表示します。 列：Name | Status | Updated by | Updated。 各セルに1pxのgray borderを設定し、左右にわずかなパディングを付けます。 行の高さは約38px。ヘッダー行は12pxの大文字で text-secondary を使用します。 Status列には、上記の緑／青／オレンジの背景色とテキスト色を使った色付きタグピルを使用します （Done は緑、In Progress は青、Triage はオレンジ、 Backlog はグレー）。

10. トグルブロック — 必須。折りたたまれた状態で ▶ 変更をさらに4件表示 を表示し、展開すると追加の行が表示されるようにします。 折りたたまれた状態で表示します（シェブロンとラベルのみ）。

11. 締めのコールアウト — 下部にCTAとして2つ目のコールアウトを配置します： 🚀 Open Design で作業を続ける → を OD プロジェクトへのリンクにします。

ブロックの書式ルール

• 見出しブロックのホバーアイコン（+ ⋮⋮）を控えめに示してもかまいません。
• Notionと同じ箇条書き記号（•）とインデント（24px）を使用します。
• データベースタグはNotion標準のピル形状にします：半径2em、 パディング6×4、12px、中程度のウェイト。
• アバターは18pxの円形で、文字とNotion風の淡いパステル背景を使用します。

実装上の制約（対応する禁止事項／推奨事項）

禁止事項	推奨事項
別のコネクターのUI要素を流用する（Material／Linearの行／GitHubのピル）	Notionのブロック要素のみを100%使用します — H1／H2／箇条書き／コールアウト／トグル／データベーステーブル
lorem ipsumを使う	実際のNotionらしいコピーを作成します。ドキュメントのタイトルは Q3 OKR、Onboarding 文档、团队周报 など、人物名は Marie／Bob／Lily など、コメントは「この箇所を確認してください」などにします
本文にセリフ体を混在させる	Notionはサンセリフのみです — 絵文字のフォールバックを含むシステムフォントスタックを使用します
アバターを四角形で表示する	常に18pxの円形にし、文字とNotion風の淡いパステル背景を使用します
影やグラデーションを追加する	フラットな面のみを使用します。#E3E2E0 の1px境界線または #F1F1EF のブロック背景でブロックを区別します
Notionのパレット以外の派手なアクセントカラーを使用する	ドキュメントに記載されたNotionの青／緑／オレンジ／黄色のタグ色のみを使用します
Notionのグレーのコールアウト背景を単色に置き換える	コールアウトには必ず #F1F1EF のグレー背景と、左側の24pxの絵文字を使用します
「Document 1」のような仮のドキュメント名を使う	実際のワークスペースにありそうな、中国語・日本語・韓国語（CJK）または英語のNotionらしいタイトルを使用します