Lectern Design — 会议室 / 商务简报 HTML 风格
生成商务汇报质感的 HTML:浅底纸白上,衬线大标题给出一句结论;议程条编号、KPI 卡给大数字、低饱和深蓝图表讲趋势、决议表把"谁、何时、什么状态"摊开。对内、可信、数据前置 —— 一份尊重读者时间的董事会评审,不是营销页。
Generates business-briefing HTML: a serif headline states the conclusion; a numbered agenda, KPI cards, low-saturation navy charts and a decisions table lay out who/when/what-status. Internal, credible, data-forward — a board review that respects the reader's time.
§1 使用方式
- 引入
assets/fonts.css + assets/lectern.css(lectern 走系统衬线 Georgia/宋体 + 系统 sans,不打包 webfont)。
- 页面骨架:
<body class="lectern-body"> → .lectern-topbar(品牌 + 元信息 + Confidential 标 + lang-toggle)→ .lectern-title(标题页:kicker + 衬线 h1 + lede + 议程)→ 内容 section(.lectern-wrap 约束 1080)→ .lectern-footer。
- 组件用
lectern- 前缀 class,单连字符(lectern-kpi-val,不是 BEM __;修饰符用 --,如 lectern-pill--done);页面局部样式用无前缀 class 写在页内 <style>(verify.py 只校验 lectern-* 是否定义于 CSS)。
- 不用
.lectern-hero:lectern 是汇报不是揭示,标题用 .lectern-title(不会触发满屏 hero 检查)。
- 双语:每段
<span class="lang-en">…</span><span class="lang-zh">…</span>;topbar 放 .lang-toggle 按钮 + 页尾 IIFE 脚本(从 canonical 复制)。
- 先读
references/dos-and-donts.md(品位边界),再复制 references/canonical/<页型>.html 起步。
§2 触发关键词
会议室 / 开会用 / 商务汇报 / 董事会 / 董事会评审 / 业务评审 / 季度汇报 / KPI 汇报 / 周报月报 / 决议文档 / 行动项 / board review / boardroom / briefing deck / quarterly business review / QBR / internal review / lectern 风格
§3 不要用于
- 产品发布会 / keynote / 新品揭示 → 用 eclat(lectern 是对内汇报,不是对外戏剧)
- 浅白消费极简营销官网(apple.com 那种)→ 用 apple(lectern 更结构化、数据/决议前置,有衬线 gravity)
- 玻璃拟态 / aurora / 炫酷暗色 → 用 glass
- 长文档 / 知识库阅读站 → 用 sage / anthropic
§4 阅读顺序
references/dos-and-donts.md — 品位边界(可信而不营销 · 低饱和图表配色法 · 状态药丸非 RAG 点 · 可导出数字要重算)- 对应页型的 canonical(每个都配
.md 速读 + 页内 self-diff 决策块):
references/canonical/review.html — 评审:季度/董事会评审,KPI + 趋势图 + 决议表(数据前置的回顾)references/canonical/agenda.html — 议程:会前工作会议程,目标 + 时间块排期 + 参会 + 预读(向前看,分类药丸非 RAG,故意不放图表)references/canonical/minutes.html — 纪要:会后记录,出席含缺席 + 决定记录(带票数/异议)+ 行动项表(RAG 药丸取字面义,带 status-as-of 日期)
§5 发布前检查(MUST)
~/.claude/skills/design-review/dr-cli --skill=lectern <your-page.html> # 四道机械检查(结构/渲染/可达性/截图)
~/.claude/skills/design-review/dr-cli --skill=lectern --critic <your-page.html> # 再加 LLM critic · 口味评审(四道之外)
任一 error = 任务没完成。canonical 自回归:verify + visual-audit 必须 0 error。页内 </body> 前 embed design-review:self-diff v1 注释块(canonical 必须)。
§6 lectern 专属要点(机器检查 + critic 会抓)
- 衬线标题 + sans 正文:大标题用
--lectern-font-serif(Georgia / 宋体)—— 衬线给"经过斟酌的文件"的可信感;全 sans 标题会读成消费营销页(apple 的地盘)。正文 sans 保密集可读。
- 图表低饱和、按数据类型选配色:有序/连续数据(分层、时间)用单色相明度梯(深蓝
#1d3a6e → #2f5bb0 → #7d9bd0);无关分类才用多色相但锁同一明度带。彩虹色 = 文档失信。线图实线为实际、灰虚线为计划。
- 状态用带标签药丸,不用裸 RAG 色点:
Needs board / In review / Approved(青/琥珀/玫红)—— 状态是读者要据以行动的词,不是要解码的颜色;药丸灰度打印也读得出(董事会 deck 会被打印)。
- 数据密是对的:lectern 一屏可以塞 KPI + 两图 + 表 —— 读者(扫数字的董事)要密度,这正是和 eclat"一屏一个气口"相反的地方。别学 eclat 把它拉稀。
- KPI 大数字 ≥36px:统计卡的数值字号要 ≥36px(既是设计也避 hollow-card 误判);横排 strip(议程)用
flex 不用 grid。
- 可导出数字必须从页内重算:中位数 / 计数 / 占比 / 日期跨度 / 版本号发布前用页内数据核一遍 —— 汇报页是读者会随手验算的地方,一处失实全页失信。known-bugs 1.35
- Confidential 标第一等公民:内部文件就把 Confidential 标在 topbar,设定语域、也诚实(deck 会被截图转发)。
- 双语全角标点:zh span 内
,;: 一律全角 ，；：(verify §1.22 抓)。BEM 单连字符不用 __。
1---2name: lectern-design3description: 会议室 / 商务汇报 deck 风格的 HTML 页面生成 —— 浅底纸白画布 + 衬线标题 + 结构化议程/章节 + KPI 卡 + 低饱和深蓝图表 + 决议·行动项表 + 状态药丸。对内、商务、数据前置,可信而不喧哗,像一份尊重读者时间的董事会评审。TRIGGER 当用户提到 会议室 / 开会用 / 商务汇报 / 董事会评审 / 业务评审 / 季度汇报 / KPI 汇报 / 决议文档 / board review / boardroom deck / briefing / quarterly review / 内部评审 deck 时使用。DO NOT TRIGGER:产品发布会(用 eclat)、消费极简营销官网(用 apple)、玻璃拟态(用 glass)、长文阅读站(用 sage / anthropic)。4---56# Lectern Design — 会议室 / 商务简报 HTML 风格78生成商务汇报质感的 HTML:浅底纸白上,衬线大标题给出一句结论;议程条编号、KPI 卡给大数字、低饱和深蓝图表讲趋势、决议表把"谁、何时、什么状态"摊开。对内、可信、数据前置 —— 一份尊重读者时间的董事会评审,不是营销页。9Generates business-briefing HTML: a serif headline states the conclusion; a numbered agenda, KPI cards, low-saturation navy charts and a decisions table lay out who/when/what-status. Internal, credible, data-forward — a board review that respects the reader's time.1011## §1 使用方式12131. 引入 `assets/fonts.css` + `assets/lectern.css`(lectern 走系统衬线 Georgia/宋体 + 系统 sans,不打包 webfont)。142. 页面骨架:`<body class="lectern-body">` → `.lectern-topbar`(品牌 + 元信息 + Confidential 标 + lang-toggle)→ `.lectern-title`(标题页:kicker + 衬线 h1 + lede + 议程)→ 内容 section(`.lectern-wrap` 约束 1080)→ `.lectern-footer`。153. 组件用 `lectern-` 前缀 class,**单连字符**(`lectern-kpi-val`,不是 BEM `__`;修饰符用 `--`,如 `lectern-pill--done`);页面局部样式用**无前缀** class 写在页内 `<style>`(verify.py 只校验 `lectern-*` 是否定义于 CSS)。164. **不用 `.lectern-hero`**:lectern 是汇报不是揭示,标题用 `.lectern-title`(不会触发满屏 hero 检查)。175. 双语:每段 `<span class="lang-en">…</span><span class="lang-zh">…</span>`;topbar 放 `.lang-toggle` 按钮 + 页尾 IIFE 脚本(从 canonical 复制)。186. 先读 `references/dos-and-donts.md`(品位边界),再复制 `references/canonical/<页型>.html` 起步。1920## §2 触发关键词2122会议室 / 开会用 / 商务汇报 / 董事会 / 董事会评审 / 业务评审 / 季度汇报 / KPI 汇报 / 周报月报 / 决议文档 / 行动项 / board review / boardroom / briefing deck / quarterly business review / QBR / internal review / lectern 风格2324## §3 不要用于2526- 产品发布会 / keynote / 新品揭示 → 用 **eclat**(lectern 是对内汇报,不是对外戏剧)27- 浅白消费极简营销官网(apple.com 那种)→ 用 **apple**(lectern 更结构化、数据/决议前置,有衬线 gravity)28- 玻璃拟态 / aurora / 炫酷暗色 → 用 **glass**29- 长文档 / 知识库阅读站 → 用 sage / anthropic3031## §4 阅读顺序32331. `references/dos-and-donts.md` — 品位边界(可信而不营销 · 低饱和图表配色法 · 状态药丸非 RAG 点 · 可导出数字要重算)342. 对应页型的 canonical(每个都配 `.md` 速读 + 页内 self-diff 决策块):35 - `references/canonical/review.html` — **评审**:季度/董事会评审,KPI + 趋势图 + 决议表(数据前置的回顾)36 - `references/canonical/agenda.html` — **议程**:会前工作会议程,目标 + 时间块排期 + 参会 + 预读(向前看,分类药丸非 RAG,故意不放图表)37 - `references/canonical/minutes.html` — **纪要**:会后记录,出席含缺席 + 决定记录(带票数/异议)+ 行动项表(RAG 药丸取字面义,带 status-as-of 日期)3839## §5 发布前检查(MUST)4041```bash42~/.claude/skills/design-review/dr-cli --skill=lectern <your-page.html> # 四道机械检查(结构/渲染/可达性/截图)43~/.claude/skills/design-review/dr-cli --skill=lectern --critic <your-page.html> # 再加 LLM critic · 口味评审(四道之外)44```4546任一 error = 任务没完成。canonical 自回归:verify + visual-audit 必须 0 error。页内 `</body>` 前 embed `design-review:self-diff v1` 注释块(canonical 必须)。4748## §6 lectern 专属要点(机器检查 + critic 会抓)4950- **衬线标题 + sans 正文**:大标题用 `--lectern-font-serif`(Georgia / 宋体)—— 衬线给"经过斟酌的文件"的可信感;全 sans 标题会读成消费营销页(apple 的地盘)。正文 sans 保密集可读。51- **图表低饱和、按数据类型选配色**:有序/连续数据(分层、时间)用**单色相明度梯**(深蓝 `#1d3a6e → #2f5bb0 → #7d9bd0`);无关分类才用多色相但**锁同一明度带**。彩虹色 = 文档失信。线图实线为实际、灰虚线为计划。52- **状态用带标签药丸,不用裸 RAG 色点**:`Needs board / In review / Approved`(青/琥珀/玫红)—— 状态是读者要据以行动的词,不是要解码的颜色;药丸灰度打印也读得出(董事会 deck 会被打印)。53- **数据密是对的**:lectern 一屏可以塞 KPI + 两图 + 表 —— 读者(扫数字的董事)**要**密度,这正是和 eclat"一屏一个气口"相反的地方。别学 eclat 把它拉稀。54- **KPI 大数字 ≥36px**:统计卡的数值字号要 ≥36px(既是设计也避 hollow-card 误判);横排 strip(议程)用 `flex` 不用 `grid`。55- **可导出数字必须从页内重算**:中位数 / 计数 / 占比 / 日期跨度 / 版本号发布前用页内数据核一遍 —— 汇报页是读者会随手验算的地方,一处失实全页失信。**known-bugs 1.35**56- **Confidential 标第一等公民**:内部文件就把 Confidential 标在 topbar,设定语域、也诚实(deck 会被截图转发)。57- **双语全角标点**:zh span 内 `,;:` 一律全角 `，；：`(verify §1.22 抓)。BEM 单连字符不用 `__`。
TbusOS