orbit-general

Orbit 全般ブリーフィング

「我的设计」の最上部に表示される、コネクター横断型の朝のブリーフィングです。 認証済みのすべてのコネクターから過去24時間のアクティビティを取得し、 編集者がまとめた1つのベントーダッシュボードとして表示します。

⚠️ 真実の基準となるプロトコル（最初にお読みください）

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

ステップ2. example の構造を1対1で踏襲します。

• DOM の階層とクラス名を同じにする
• セクションの数と順序を同じにする
• ベントーモジュールの数と順序を同じにする
• コネクターのリストを同じにする（コネクターを追加・削除しない）
• KPI ラベル、Top 3 の項目、「people waiting」の対象を同じにする
• フッター文字列を同じにする
• 末尾の <script> ブロック（リンクの挿入）を同じにする

ステップ3. モックデータの値（件数、名前、時刻）は「今日」の情報に見えるよう更新できますが、 example.html にない UI 要素、セクション、モジュール、バッジ、コールアウト、リボン、バナー、装飾、 またはクロームを新たに作成してはいけません。example にない詳細は、 出力に含めてはいけません。

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

以下の本文セクションは、ビジュアル言語とトークンの参考です。example に すでに描画されている内容を超えて機能を追加する許可ではありません。

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

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

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

これは厳守事項です。Orbit のブリーフィングは、ユーザーのブランドではなく、 Open Orbit 独自の編集者風ベントー言語として表現されなければなりません。

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

--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 */

書体スタック：

• ディスプレイセリフ：'Cormorant', Georgia, serif — KPI の数値、Hero h1、 Top 3 の通し番号、コメントの引用（イタリック）
• 本文サンセリフ：'Inter', -apple-system, system-ui, sans-serif
• 数字：常に font-variant-numeric: tabular-nums

シャドウなし。グラデーションなし。主要なビジュアルとして絵文字を使用しないでください。 コネクターアイコンはモノクロの線画 SVG（ストローク幅1.5）にしてください。

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

1. ヒーロー — 1行、約80pxの高さ。 左：☀ 你好（Cormorant 38px）。 挨拶の右：· 2026 年 5 月 6 日 · 星期三（控えめな色、18px）。 右端：丸いアバター（40px）＋小さな⚙＋✕アイコン。

2. KPI ストリップ — 1行、約120pxの高さ、幅が均等な5列。 各セル：セリフ体の数値（Cormorant 64px、--fg）の下に、控えめな色の大文字ラベル（Inter 11px、letter-spacing 0.06em）。 任意で、数値の横に--green／--redの差分タグ▲／▼を配置します。 ラベル案：待办 / 待 review / 会议 / @ 我 / agent 跑完。

3. 今日のタイムライン — 全幅、約140pxの高さ。 09:00 → 19:00の横向きの時間軸と、下部の時間目盛り。 ミーティングブロック：開始から終了までの時間に合わせた、塗りつぶしの--orangeの角丸長方形。ブロック内にミーティング名と参加者数を表示します。 集中作業の提案：時間軸の背面に淡い緑色の半透明の帯を配置します。 「現在」インジケーター：1pxの縦向きの--redの線と、点滅するドット（@keyframes pulse 2s ease-in-out infinite）、小さな现在ラベル。

4. トップ3 — 高さ約220pxの均等なカード3枚。 各カード：左揃えの大きなセリフ体の数字1／2／3（Cormorant 96px、--fg）、1文のタスク見出し（Inter 18px medium）、下部にコネクターのソースラベル＋線画アイコン＋等待 Xhの待ち時間を配置したメタ情報の行。 カードは--borderの1pxアウトラインのみとします。

5. コネクターモジュール — 適応型のベントーグリッド。ブリーフィングの中心です。 10～16個のモジュールを表示します。データ量の多いコネクターは2列または2行分のサイズにし、シンプルなものは1×1にします。**見た目が同じモジュールを2つ作らないでください。**データの種類に応じて、以下からUIを選んでください。

6. あなたの対応を待っている人 — 全幅のストリップ、約110pxの高さ。 左のタイトル：5 人在等你 · 最久 22h（セリフ体24px）。 右：一部が重なる丸いアバター5つ（44px、約8px重ねる）。それぞれの下に、人物名と待っている理由を控えめな色の12pxで表示します。

7. フッター — 1行、約52px。 左：Open Orbit · auto-generated 06:42 · N connectors。 右：由 Nexu Labs 出品。 上部に1pxのボーダーを付け、すべてのテキストを控えめな色の12pxにします。

コネクター → UI マッピング（該当するファミリーを選択）

ファミリー	例	UI 形式
コードコラボレーション	GitHub, GitLab, Bitbucket	ステータスドット付きリスト（オープン／マージ済み／クローズ済み／CI 失敗）＋レビュアー数。任意で差分のプレビューを 2～3 行表示
タスク管理	Linear, Jira, Asana, ClickUp	色付きステータスドット＋優先度バー付きの課題リスト。サイクルの場合は、小さなリングまたは進捗ストリップを追加
コミュニケーション	Gmail, Slack, 飞书 IM, Outlook	丸いアバター＋1 行の引用。「返信待ち」にはアクセントカラーを使用
ナレッジ	Notion, Confluence, 飞书 Doc	ドキュメントのタイトル＋2 行の抜粋ブロック。コメントの引用はイタリック体のセリフ書体で表示
時間	Calendar	すでに全体タイムラインに表示されています。モジュール形式では、開始時刻を左側に表示した予定リストを使用
アラート	Sentry, Datadog, PagerDuty	大きな赤いCormorantの数値（例：4）、7 日間のヒートマップを示す小さな四角形 7 個、最新のエラー 1 行
ステータス	Vercel, GH Actions, Netlify	最近のビルド／デプロイごとの色付きステータスドット＋ブランチ＋所要時間
ファイル	Drive, Dropbox, Box	小さなサムネイル付きのファイル名リスト＋「編集者」の表示
ボード	Trello, Miro, FigJam	角丸のカードチップを配置した、コンパクトなカンバン列 3 つ
ファイナンス	Stripe, PayPal, banking, Brex	Cormorantの通貨額＋7 日間のスパークライン＋直近 3 件の取引リスト
CRM ／営業	Salesforce, HubSpot, Pipedrive	3 列の案件パイプライン（オープン／交渉中／成約）＋優先連絡先カード 1～2 枚
サポート	Zendesk, Intercom, Help Scout	SLA タイマーピル（緑／黄／赤）＋担当者アバター付きのチケットキューリスト
アナリティクス	Google Analytics, Mixpanel, Amplitude	小さなファネルチャート（右肩下がりのバー 4 本）＋コホートの差分を 1 行表示（▲ 12% W/W）
インフラストラクチャー	AWS, GCP, Kubernetes, Docker	リソースメーター（CPU ／メモリー／ディスクの割合バー）＋直近 2 件のデプロイ行
セキュリティ	1Password, Auth0, Okta	重大度の高い項目に赤い盾を表示したイベントリスト＋監査タイムスタンプ
音声／その他	不明なコネクター	以下のフォールバックのヒューリスティクスを参照

フォールバックのヒューリスティクス（不明なコネクターの場合）

コネクターが上記のどのファミリーにも当てはまらない場合は、返されるデータの形状から推測します。

• 数値と時系列が返される → アラートとして扱います（大きな数値＋ヒートマップ）
• status フィールドを含む行が返される → タスク管理として扱います（ステータスドット付きリスト）
• from ／ subject を含む行が返される → コミュニケーションとして扱います（アバター＋引用）
• ドキュメント／ファイル名が返される → ファイルとして扱います（リスト＋サムネイル）
• 名前付きの「状態」（デプロイ／ビルド／サイクル）が少数返される → ステータスとして扱います
• 日付付きのイベントが返される → 時間として扱います（予定リスト）

それでも判断できない場合は、ステータスドット付きリストにフォールバックします（最も安全な既定値です）。

実装上の制約（すべきこと／すべきでないこと）

すべきでないこと	すべきこと
すべてのモジュールを同じ形のカードとして表示する	ファミリーごとに変える — Alert は大きな赤い数字＋ヒートマップ、Status はステータスドットのリスト、Files はサムネイルのグリッド、Comms はアバター＋引用
Sentry ／ PagerDuty を単なるリストとして表示する	大きな赤い Cormorant の数字＋7 日間のヒートマップ＋最新のエラー行（TypeError: …）
Calendar をプレーンテキストの予定表として表示する	上部の横方向のタイムラインに視覚化する。モジュール形式では、開始時刻のガター付きの予定リストにする
「Service A ／ Project X」のような仮の名前を使う	コネクターの種類から、もっともらしい実在風の名前を推測する — GitHub → nexu-io/open-design、Sentry → frontend-prod、Linear → ENG / DES サイクル 24、Stripe → Pro plan / Acme Co.
Lorem ipsum のような埋め草を使う	名前、数値、エラー、パス、割合を含む、実際の業務日にありそうな具体的なモックテキストを書く
同じモジュールセット内で絵文字と SVG アイコンを混在させる	すべてのコネクターアイコンで、単色の線画 SVG（ストローク幅 1.5）を一貫して使用する。絵文字はヒーローの挨拶とセクションの目印にのみ使う
正方形または角丸の正方形アバターを使う	常に円形にする。サイズは用途に応じて 28 ／ 32 ／ 40 ／ 44 px
カードにドロップシャドウ／グラデーション／グローを付ける	フラットな面のみを使う。1px の #EAE5DD の極細ボーダーでカードを区別する
ユーザーのデザインシステムのブランドカラーを使う	上記のキャンバストークン（#FAF7F2、#1A1816、#D86A47 …）のみを使用する — Orbit 独自のエディトリアル表現