orbit-notion

Orbit · Notion 简报

适用于 Notion 的单连接器 Orbit 模板。简报呈现 为真实的 Notion 页面——相同的界面框架、相同的区块原语、相同的 排版。

⚠️ 事实来源协议（请先阅读）

步骤 1。 在编写任何输出之前，打开并阅读此文件夹中的 example.html。 该文件是设计的权威版本——你的 工作是复现它，而非重新诠释。

步骤 2。 严格按照 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）， 然后是 40px 粗体页面标题 每日简报 · 2026 年 5 月 6 日 (Wed)， 接着是一行属性标签（灰色）： 🗂 Type: Daily Briefing · 👤 Owner: Current user · 📅 Created: 06:42。

5. 摘要段落 — 一句话，使用斜体和柔和的灰色： "Open Orbit 根据昨天的 Notion 活动自动生成。 8 个文档和 2 个数据库中共有 12 条事件。"

6. H2 分区：📝 文档变更 — 项目符号列表。每个项目： 📄 [文档标题]（粗体，悬停链接为蓝色），下方是柔和底色的子块， 显示 [作者头像] [作者] 编辑了“[更改文本片段]” 右侧以柔和灰色显示 · 8 小时前。

7. H2 分区：💬 评论 & @ 提及 — 评论卡片列表。 每张卡片：#F1F1EF 灰色背景，圆角 6px，内边距 12px； [头像] [作者] · 在 [文档标题] 中，然后是 15px 常规字体的评论正文， 最后是一个小型“回复”链接。 用 #24548A 蓝色文字并加下划线突出显示 @ 提及。

8. 提示块 — 必须包含。gray bg，内边距 16px，圆角 6px， 左侧放置一个 24px 表情符号（例如 🌟 或 💡）。正文： "你昨天还有 3 条评论没回 — 周三例会前看一下?"

9. H2 分区：🗄 数据库变更 — 在页面中内嵌渲染为 Notion 数据库 表格视图。 列：Name | Status | Updated by | Updated。 每个单元格使用 1px gray border，左右留少量内边距， 行高约 38px。表头使用 12px 大写字母和 text-secondary。 状态列使用彩色标签胶囊，采用上述绿色／蓝色／橙色 背景和文字颜色（Done 为绿色，In Progress 为蓝色， Triage 为橙色，Backlog 为灰色）。

10. 折叠块 — 必须包含。显示一个折叠的 ▶ 再看 4 项变更 切换项，展开后可显示其他行。保持折叠状态（仅显示箭头和标签）。

11. 结尾提示块 — 底部的第二个提示块，用作 CTA： 🚀 在 Open Design 里继续处理 → 链接回 OD 项目。

块格式规则

• 可提示标题块悬停图标（+ ⋮⋮），但应保持低调。
• 使用准确的 Notion 项目符号（•）和缩进（24px）。
• 数据库标签必须采用 Notion 原生胶囊形状：2-em 圆角、 6×4 内边距、12px 中等字重。
• 头像：18px 圆形，包含字母，并使用 Notion 风格的柔和浅色背景。

实现约束（成对的禁止／要求）

禁止	要求
借用其他连接器的界面元素（Material / Linear 行 / GitHub 胶囊）	完全采用 Notion 的块元素 — H1 / H2 / 项目符号 / 提示块 / 折叠块 / 数据库表格
使用 lorem ipsum	撰写符合真实场景的 Notion 文案：文档标题如 Q3 OKR、Onboarding 文档、团队周报；人物如 Marie / Bob / Lily；评论如“这一段需要你确认”
在正文中混用衬线字体	Notion 仅使用无衬线字体 — 使用系统字体栈并回退到表情符号字体
将头像渲染为方形	始终使用圆形头像，18px，包含字母并采用 Notion 风格的柔和浅色背景
添加阴影或渐变	仅使用平面表面；用 #E3E2E0 1px 边框或 #F1F1EF 块背景区分区块
使用 Notion 调色板以外的醒目强调色	仅使用文档中指定的 Notion 蓝色／绿色／橙色／黄色标签色调
将 Notion 灰色提示块背景替换为纯色	提示块必须使用 #F1F1EF 灰色背景，并在左侧放置 24px 表情符号
使用“Document 1”之类的占位文档名	使用中文或英文的真实风格 Notion 标题，让它们看起来像真实工作区中的内容