mcpField
O
orbit-gmail

orbit-gmail

github.com/nexu-io生産性104.6k89 回インストール今日更新
リポジトリ

orbit-gmail について

orbit-gmailは、Gmailのメール閲覧画面にOrbitの日次ブリーフィングを作成するスキルです。開いた状態のダイジェストだけを表示し、構成とGmail風のデザインを定めています。

主な機能

  1. 01開いたダイジェストメールのみ表示
  2. 02Gmail閲覧画面のレイアウト
  3. 03順序を定めたブリーフィング構成
  4. 04Gmail風ビジュアルの指定

活用シーン

  1. 01日次メールダイジェストの表示
  2. 02Gmailでの優先事項の提示
  3. 03Gmail風ブリーフィング画面の生成

インストール

コマンドをコピーしてターミナルで実行します。

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

インストール後、Claude Code で/orbit-gmailを入力して読み込まれたか確認します。

同梱ファイルexample.html

詳細

Orbit · Gmail ブリーフィング

Gmail にスコープを限定した、コネクター 1 つの Orbit テンプレートです。ブリーフィングは、Gmail の閲覧ビューですでに開かれている Orbit デイリーダイジェストメールとして表示されます。Gmail のトップヘッダーとメールのクローム（ツールバー／件名／送信者／ダイジェスト本文／返信バー）が表示されます。左レール、受信トレイの一覧、3 ペインレイアウトはありません。

⚠️ 正とする情報源に関するプロトコル（最初にお読みください）

ステップ 1. 出力を作成する前に、このフォルダー内の example.html を開いて内容を確認してください。このファイルがデザインの唯一の基準です。あなたの役割は再現することであり、独自に解釈し直すことではありません。

ステップ 2. サンプルの構造を 1:1 で反映してください。

  • DOM 階層とクラス名は同じにします。<header>（Gmail のトップバー）→ <main class="digest-wrap"> → <div class="email-chrome"> → ツールバー／件名／送信者行／ダイジェスト本文／返信バー。
  • Gmail のトップヘッダーには、サンプルにある要素のみを含めます（ハンバーガー／ワードマーク／検索バー／ヘルプ／設定／アプリランチャー／アバター）。左レール（作成ボタン、システムラベル、カテゴリタブ、色付きラベル一覧）は追加しないでください。
  • ほかのメールを含む受信トレイの一覧は表示しないでください。開いているダイジェストメールのみを表示します。
  • ダイジェスト本文のセクションは、同じ順序にします。挨拶 → サマリーストリップ → 対応が必要 → 注目事項 → 参考情報 → ダイジェストフッター。
  • 下部には同じ返信バーを配置します（返信／全員に返信／転送）。
  • 末尾には同じ <script> ブロックを配置します（action-btn／reply-btn のリンク挿入）。

ステップ 3. 「今日」の内容として自然に読めるよう、サンプル文面（送信者名、件名、要約テキスト、時刻）を更新してもかまいません。ただし、UI を独自に追加してはいけません。受信トレイの一覧、左レール、カテゴリタブ列、追加のダイジェストセクション、クロームの装飾要素は禁止です。example.html にない要素は、出力に含めないでください。

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

以下のセクションは、トークンとビジュアル表現の参考情報であり、ページを拡張する許可ではありません。

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

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

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

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

キャンバストークン（以下の値を正確に使用してください）

page bg:           #f6f8fc
surface:           #ffffff
border:            #e0e0e0
text:              #202124
text-secondary:    #5f6368
text-muted:        #80868b
surface-hover:     #f1f3f4

red (Gmail):       #D93025  /* Compose, important markers, accent */
blue:              #1a73e8  /* CTA / link */
yellow:            #f4b400  /* important ★ */
green:             #0f9d58
search bar bg:     #eaf1fb  /* light blue-tinted pill */

書体スタック：

  • 'Google Sans', 'Roboto', -apple-system, system-ui, sans-serif
  • ロゴのワードマーク：Google Sans 22px ミディアム
  • 本文：14px／行の高さ 20px
  • メールプレビュー：13px

ページのセクション（上から下へ — ページは1列で、3ペインのアプリではありません）

  1. Gmail のトップヘッダー（<header>） — 全幅、白色。 左：ハンバーガー（☰）＋ Gmail のワードマーク（Gmail、最初の G は赤）。 中央：角丸の検索バー（背景色 #eaf1fb、左に検索アイコン、右に設定アイコン、プレースホルダー 搜索邮件）。 右：❓ヘルプ、⚙設定、▦ Google アプリランチャー、丸いアバター。

  2. メール表示領域（<main class="digest-wrap"> <div class="email-chrome">） — 開いたメールはヘッダーのすぐ下に表示されます。左側のレールも受信トレイ一覧もありません。サブブロックは次の順序です。

    a. メールツールバー — 戻る／アーカイブ／削除／未読にする／ラベル／スペーサー／前へ／次へ。

    b. メールの件名エリア — ダイジェストの件名（例：☀ 你昨天的 6 封重要邮件 — Open Orbit Daily）を含む <h1 class="email-subject">。その後にインラインの Orbit タグが続きます。

    c. 送信者の行 — 丸いアバター O ＋ Open Orbit <[email protected]> ＋ 宛先 我 ▾ ＋ 右揃えの日付 ＋ 返信アイコン ＋ その他アイコン。

    d. ダイジェスト本文（<div class="digest-body">）：

    • 挨拶の段落
    • サマリー欄 — 3つの数値セル（緊急／注目／参考）
    • セクション 🔴 要対応 — action-btn primary を含むカード
    • セクション 🟡 注目 — action-btn ghost を含むカード
    • セクション ⚪ 参考 — カード
    • digest-footer のマイクロタグ

    e. 返信バー — 下部の行に返信／全員に返信／転送ボタン。

ピル／アイコンのルール

  • アバター：円形。送信者は40px以上、カードは32px、インラインは28px。
  • ラベル／タグ：表示例にある箇所に限り、塗りつぶしなし（ドット＋テキスト）の小さな角丸ピルを使用します。
  • 黄色の重要マークは1つのみ（件名エリアまたはタグ）。Orbit ダイジェストにのみ表示します。

実装上の制約（対になる「禁止」と「推奨」）

禁止推奨
左側のレール（作成／システムラベル／色付きラベル）を表示するレールは完全に省略し、ヘッダーの下に1列のページを配置します
他のメールを含む受信トレイ一覧を表示する開いた Orbit Daily Digest メールのみを表示します
カテゴリのタブバー（主要／ソーシャル／プロモーション）を表示する省略します。ダイジェストをそのまま閲覧画面に表示します
Google 以外のタイポグラフィを使用する'Google Sans', 'Roboto', -apple-system, system-ui, sans-serif を使用します
Gmail の表示領域にドロップシャドウを追加するフラットな面にします。要素にフォーカスがあるときのみ、控えめな Material 1 のエレベーションを適用します
アバターを四角形で表示する必ず円形にします — 送信者は40px、カードは32px、インラインは28px
lorem ipsum を使用するGmail らしい実際の文面を作成します：「Q3 预算确认」、「Login redesign 反馈」、Allen Liu／Marie／Nina Park のような送信者
ダークモードを使用するGmail のデフォルトのライトテーマ（ページは #f6f8fc）を使用します
Gmail の表示領域に Orbit のブランディングを施すOrbit のブランディングはダイジェスト本文内のみに配置します（件名の Orbit タグ＋フッターのマイクロタグ）
複数の受信トレイ行に黄色の重要マークを付ける重要マークを付けられるのは Orbit Daily Digest の行のみです

コメント

Markdown 対応