Orbit General

Orbit General Briefing

Cross-connector morning briefing that lives at the top of "我的设计". Pulls the past 24 hours of activity from every authenticated connector and lays them out as one editorial bento dashboard.

⚠️ 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 number and order of sections
• Same number of bento modules in the same order
• Same connector list (do not add or drop connectors)
• Same KPI labels, same Top 3 entries, same "people waiting" set
• Same footer string
• Same `` block at the end (link injection)

Step 3. You may freshen mock data values (counts, names, times) so they read as "today" — but you must not invent new UI elements, sections, modules, badges, callouts, ribbons, banners, decorations or chrome that aren't already in example.html. If a detail is not in the example, it does not belong in your output.

The body sections below are a reference for the visual language and tokens — they are not a license to add features the example doesn't already render.

⚠️ Design system policy

This skill ships with its own complete visual language baked into example.html. 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 / chrome defined in

example.html.

This is a hard constraint: an Orbit briefing must read as Open Orbit's own editorial bento language, not as the user's brand.

Canvas tokens (use these exact values)

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

Type stack:

• Display serif: 'Cormorant', Georgia, serif — KPI numerals, Hero h1,

Top 3 serial numbers, italic comment quotes

• Body sans: 'Inter', -apple-system, system-ui, sans-serif
• Numbers: always font-variant-numeric: tabular-nums

No shadows. No gradients. No emoji as primary visuals. Connector icons must be monochrome line SVG (1.5 stroke).

Page sections (top to bottom)

1. Hero — single row, ~80px tall.

Left: ☀ 早安, Eli (Cormorant 38px, with , in --orange). Right of name: · 2026 年 5 月 6 日 · 星期三 (muted, 18px). Far right: round avatar (40px) + small ⚙ + ✕ icons.

1. KPI strip — single row, ~120px tall, 5 columns equal width.

Each cell: serif number (Cormorant 64px, --fg) over a muted uppercase tracking label (Inter 11px, letter-spacing 0.06em). Optional ▲/▼ delta tag in --green/--red next to the number. Suggested labels: 待办 / 待 review / 会议 / @ 我 / agent 跑完.

1. Today's timeline — full width, ~140px tall.

Horizontal time axis from 09:00 → 19:00, hour ticks below. Meeting blocks: filled --orange rounded rectangles spanning their start/end, with the meeting name + attendee count inside. Deep-work suggestions: pale-green translucent bands behind the axis. "Now" indicator: a 1px vertical --red line with a pulsing dot (@keyframes pulse 2s ease-in-out infinite) and a tiny 现在 label.

1. Top 3 — 3 equal cards, ~220px tall.

Each card: huge serif numeral 1 / 2 / 3 (Cormorant 96px, in --fg) left-aligned; one-sentence task headline (Inter 18px medium); a meta row at the bottom with the connector source label + line-icon

• 等待 Xh waiting time. Cards have --border 1px outline only.

1. Connector modules — adaptive bento, the heart of the briefing.

Render 10–16 modules. Sizes vary: data-rich connectors take a 2-column or 2-row span, simple ones stay 1×1. No two modules should look identical. Pick UI per the data family below.

1. People waiting on you — full-width strip ~110px tall.

Title left: 5 人在等你 · 最久 22h (serif 24px). Right: 5 overlapping circular avatars (44px, ~8px overlap), each with the person's name + waiting reason underneath in 12px muted.

1. Footer — single line, ~52px.

Left: Open Orbit · auto-generated 06:42 · N connectors. Right: 由 Nexu Labs 出品. Border-top 1px, all text 12px muted.

Connector → UI mapping (pick the matching family)

| Family | Examples | UI form | |---------------|---------------------------------------|------------------------------------------------------| | Code collab | GitHub, GitLab, Bitbucket | Status-dot list (open/merged/closed/CI fail) + reviewer count, optional 2–3 line diff preview | | Task mgmt | Linear, Jira, Asana, ClickUp | Issue list with colored status dot + priority bars; for cycle, add a small ring or progress strip | | Comms | Gmail, Slack, 飞书 IM, Outlook | Round avatar + one-line quote, accent color for "awaiting reply" | | Knowledge | Notion, Confluence, 飞书 Doc | Doc title + 2-line excerpt block; comment quote in italic serif | | Time | Calendar | Already lives in the global timeline; module form: agenda list with start time gutter | | Alerts | Sentry, Datadog, PagerDuty | Big red Cormorant number (e.g. 4), 7 small squares as 7-day heatmap, plus 1 latest error line | | Status | Vercel, GH Actions, Netlify | Colored status dot per recent build/deploy + branch + duration | | Files | Drive, Dropbox, Box | Filename list with tiny thumbnail squares + "edited by" attribution | | Board | Trello, Miro, FigJam | 3 compact kanban columns with rounded card chips | | Finance | Stripe, PayPal, banking, Brex | Cormorant currency number + 7-day sparkline + last 3 transactions list | | CRM / Sales | Salesforce, HubSpot, Pipedrive | 3-column deal pipeline (Open / Negotiation / Won) + 1–2 priority contact cards | | Support | Zendesk, Intercom, Help Scout | Ticket queue list with SLA timer pill (green / yellow / red) + assignee avatar | | Analytics | Google Analytics, Mixpanel, Amplitude | Mini funnel chart (4 bars descending) + 1-line cohort delta (▲ 12% W/W) | | Infrastructure| AWS, GCP, Kubernetes, Docker | Resource meters (CPU / mem / disk percent bars) + last 2 deployment lines | | Security | 1Password, Auth0, Okta | Event list with red shield for high-severity items + audit timestamp | | Voice/Misc | unknown connector | See Fallback heuristics below |

Fallback heuristics (for unknown connectors)

When a connector doesn't match any family above, infer by the data shape it returns:

• Returns numbers + a time series → treat as Alerts (big number + heatmap)
• Returns rows with status field → treat as Task mgmt (status-dot list)
• Returns rows with from / subject → treat as Comms (avatar + quote)
• Returns documents / file names → treat as Files (list + thumbnails)
• Returns a small set of named "states" (deploy / build / cycle) → treat as Status
• Returns dated events → treat as Time (agenda list)

If still ambiguous, fall back to a status-dot list (the safest default).

Implementation constraints (paired do / don't)

| Don't | Do | |---|---| | Render every module as the same card shape | Vary by family — Alert = big red number + heatmap; Status = status-dot list; Files = thumbnail grid; Comms = avatar + quote | | Render Sentry / PagerDuty as a plain list | Big red Cormorant number + 7-day heatmap + latest error line (TypeError: …) | | Render Calendar as a plain text agenda | Visualize on the horizontal timeline at the top; module form is an agenda list with start-time gutter | | Use placeholder names like "Service A / Project X" | Infer plausible real names from the connector type — GitHub → nexu-io/open-design, Sentry → frontend-prod, Linear → ENG / DES cycle 24, Stripe → Pro plan / Acme Co. | | Use lorem ipsum filler | Write specific mock copy that reads as a real workday — names, numbers, errors, paths, percentages | | Mix emoji and SVG icons in the same module set | Use monochrome line SVGs (1.5 stroke) consistently for all connector icons; emoji are reserved for hero greeting and section anchors only | | Square or rounded-square avatars | Always circles; sizes 28 / 32 / 40 / 44 px depending on context | | Drop shadows / gradients / glows on cards | Flat surfaces only; differentiate cards with the 1px #EAE5DD hairline border | | Use brand colors from the user's design system | Use exclusively the canvas tokens above (#FAF7F2, #1A1816, #D86A47 …) — Orbit's own editorial language |

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: nexu-io
• Source: nexu-io/open-design
• License: Apache-2.0
• Homepage: https://open-design.ai

Install and usage instructions live in the source repository linked above.