infocard-bigwhite-style

name	infocard-bigwhite-style
description	大白商务风信息卡主题。用于技术报告、产品发布、商业分析、数据简报、项目复盘等需要纯白背景、大留白、深蓝单强调、细灰线、英雄数字和商务报告感的信息卡。
version	1.0.0
author	Hermes Agent
license	MIT
metadata	{"hermes":{"tags":["infocard","style","bigwhite","business-report","data-brief","product-release"],"related_skills":["any2card","infocard-style-man-skill","infocard-pub-publisher","infocard-mobile-verifier"]}}

infocard-bigwhite-style · 大白商务风信息卡主题

Overview

infocard-bigwhite-style 是一种通用大白商务风信息卡主题：纯白背景、大面积留白、深蓝单强调、黑色标题、细灰分割线、大数字英雄化，以及统一页脚元信息。它适合把技术报告、产品发布、数据简报、商业分析、项目复盘做成克制、干净、可信的报告型页面。

这个主题的核心不是“白底模板”，而是 报告秩序：靠留白、对齐、细线和数据层级建立专业感，不靠厚边框、复杂纹理、重阴影或高饱和装饰。

Language Policy

• 面向中文读者时，默认用中文做主叙述、主标题、标签和面板说明。
• 英文只在以下情况保留：专名、仓库名、命令名、接口名、必须引用的原始术语，或为了 source fidelity 不可避免的对照。
• 在内容搜集与草稿阶段，也按中文优先处理：先把信息组织成中文，再决定哪些英文必须留下。
• 避免让 hero、stats、section label 这类首屏视觉元素被英文主导；英文只能作为点缀，不作为主表达。

Use Cases

适合：

• AI / 技术产品发布页：模型 release、能力更新、benchmark 概览。
• 商业分析 / 投资简报：关键指标、趋势图、排名、对比结论。
• 项目复盘 / 工作汇报：目标、数据、行动入口、结论分区。
• 多面板报告：2×3、2×4 或长页模块矩阵。
• 需要“干净、专业、可信、可投屏”的白底信息卡。

不适合：

• 手绘草图、白板便签、rough 边框 → 用 infocard-handline-style。
• 深色工作台、Agent IDE、并行任务面板 → 用 infocard-darkblue-style。
• 终端状态、监控仪表盘、本地运行安全 → 用 infocard-darkgreen-style。
• 暖纸编辑、方法论长文、木感引用 → 用 infocard-wood-style。
• 高压调查、黑头结论、责任链拆解 → 用 infocard-black-head-style 或 hardblue。

触发词 / 用户说法：

• “大白风”
• “白底商务风”
• “像 GLM-5.2 那组白底报告图”
• “干净一点，像发布会 / 白皮书 / 商务报告”
• “大数字、蓝色强调、细灰线”
• “多面板数据简报”

Design DNA

• White-first：页面第一眼必须是纯白和留白，不是彩色装饰。
• One strong accent：整页只允许一种强强调色，默认深蓝。
• Data as hero：关键数字可以成为最大视觉元素，占据卡片 1/4 甚至更多面积。
• Report grid：使用严格左对齐、细灰线和模块化网格组织信息。
• Subtle grouping：用极浅灰块承载次级内容，尽量不用粗边框。
• Footer metadata：每个面板或大段落可带 page/source/date/type 元信息，强化报告感。
• No decoration first：图标、线条、色块都服务信息，不做纯装饰。

读者第一眼应感受到：干净、可信、数据明确、商务报告级别的秩序感。

Color Tokens

标准 token（已按 GLM-5.2 参考图校准，2026-06-17）：

:root{
  --bg:#f7f8fa;          /* 页面外层浅冷灰（接近 #F7F8FA），衬托白色 sheet */
  --paper:#ffffff;        /* 主画布 / panel 纯白卡 */
  --ink:#0b0d12;          /* 主标题和核心文本 */
  --muted:#68717d;        /* 正文说明、次级标签 */
  --faint:#aeb6c2;        /* 页脚、页码、弱元信息 */
  --line:#e3e7ed;         /* 细灰分割线（panel 间无线条，靠灰底留白分隔） */
  --line-strong:#cdd5df;  /* 稍强边界，少量使用 */
  --blue:#001a72;         /* 唯一强强调色：深邃藏青，对应参考图 #001A72 */
  --gray:#f6f8fb;         /* 浅灰容器 / ghost card 底 */
  --gray-2:#f1f3f6;       /* 图表轨道 / 分区背景 */
  --black:#05070a;        /* 少量反差结论块 */
}

与初版的偏差修正（2026-06-17）：

Token	初版（错）	校准后（对）	原因
--bg	#f4f6f8	#f7f8fa	参考图背景偏白，不是深灰
--blue	#003399（品蓝）	#001a72（深藏青）	参考图是深邃藏青 #001A72
--blue-2	#0b57d0	已删除	参考图只有一种蓝，多余
--blue-soft	#eef4ff	已删除	参考图不用浅蓝铺垫
--green	#0f8a5f	已删除	参考图无绿色
--orange	#e58a20	已删除	参考图无橙色

Panel 骨架说明：panel 卡为纯白 background:#fff，靠浅灰 --bg 背景的 gutter 留白自然分隔，panel 间不使用 border 分隔。.sheet 主画布也无 border。参考图的分隔语言是"纯留白"，不是"细灰线框"。

使用规则：

• 深蓝 --blue 是唯一强强调色。
• 黑色块允许，但必须少量，用于强结论、警示、CTA 或反差段落。
• 图表需要多序列时，优先用蓝色不同明度，不要直接引入橙 / 绿 / 紫破坏主题。
• 禁止渐变背景、厚重投影、高饱和多色点缀。

Typography

建议层级：

• Hero title：clamp(42px, 7.8vw, 92px)，超紧凑字距，强标题感。
• Hero metric：76px–150px，数字可以压倒文字，作为视觉主锚。
• Section title：21px–34px，粗体，负字距。
• Body：13.5px–16px，行高 1.62–1.72。
• Caption / metadata：10.5px–12px，全大写英文或中英混合，浅灰但必须可读。
• 最小字号底线：移动端正文不低于 12px，元信息不低于 10.5px；正文主阅读区域优先 13px+。

字体：

font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont,
  "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;

Layout Skeleton

标准结构：

.page
  .sheet                     /* 白色主画布 */
    .topline                 /* brand / date / source */
    .hero                    /* 左标题 + 右 hero metric */
      .hero-copy
        .kicker
        h1
        .lead
        .hero-pills
      .blue-block            /* 大数字深蓝块 */
    .panel-grid              /* 2/3 列报告卡片 */
      .panel                 /* metric grid / rank / ghost cards */
    .panel-grid              /* upgrade / dark block / get started */
    .wide                    /* chart + rule / note */
    .footer                  /* source / style / timestamp */

多面板海报结构：

.board
  .panel.cover
  .panel.metrics
  .panel.ranking
  .panel.architecture
  .panel.upgrade
  .panel.get-started

长信息卡结构：

hero → metrics → ranking → architecture / method → chart → actions → source footer

Component Rules

Kicker / Label

• 用小号全大写英文 + 中文短语，例如 DATA · 四个数字。
• 默认深蓝，字距拉开。
• 放在面板顶部，不做大面积色底。

Hero Metric / Big Number

• 数字必须足够大，作为视觉主锚。
• 可放在深蓝块、白底 metric card 或列表左侧。
• 数字旁只配一个简短 label，不要堆长解释。

Step Grid

3 列步骤卡片，适合"三步上手 / 操作流程"类信息卡：

<section class="step-grid">
  <div class="step-card">
    <div class="num">01</div>
    <h3>标题</h3>
    <p>说明文字。</p>
    <code>/command</code>
  </div>
  ...
</section>

.step-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:14px}
.step-card{background:var(--paper);border:1px solid var(--line);padding:18px}
.step-card .num{font-size:48px;line-height:1;letter-spacing:-.06em;font-weight:900;color:var(--blue);margin-bottom:12px}
.step-card h3{font-size:18px;font-weight:850;margin:0 0 8px;letter-spacing:-.03em}
.step-card p{margin:0;color:var(--muted);font-size:13px;line-height:}
 {:inline-block;:(--soft);: ;:;:;:(--blue);:;:}

移动端 @media(max-width:720px){.step-grid{grid-template-columns:1fr}} 单列堆叠。

Compare Table

三列对比表（模式 / 特点 / 问题），适合技术选型、工作流对比、方案对比：

<table class="compare-table">
  <thead><tr><th>模式</th><th>特点</th><th>问题</th></tr></thead>
  <tbody>
    <tr><td class="mode-col">传统 Subagent</td><td class="feature-col">...</td><td class="issue-col">...</td></tr>
    <tr class="highlight"><td class="mode-col">动态工作流 ✓</td><td class="feature-col">...</td><td class=>—
  

.compare-table{width:100%;border-collapse:collapse;font-size:12.5px}
.compare-table th{background:var(--soft);padding:10px 12px;text-align:left;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);font-weight:900;border-bottom:1px solid var(--line)}
.compare-table td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.compare-table tr:last-child td{border-bottom:0}
.compare-table .mode-col{font-weight:750;color:var(--ink);white-space:nowrap}
.compare-table .feature-col{color:var(--muted);:}
 {:;:}
 {:(--soft-blue);: solid (--blue)}
  {:(--blue)}

外套 div 必须加 overflow-x:auto 防止 390px 下截断：

<div style="overflow-x:auto"><table class="compare-table">...</table></div>

Metric Grid

• 2×2 或 4 宫格。
• 每格：大数字 + 小标签 + 极简蓝色进度条。
• 分割靠浅灰线或浅灰背景，不用厚边框。

Ranking Bar

• 横向排名用于模型、工具、方案对比。
• 左名称、中间 track、右分数。
• 条形默认深蓝；非重点项用浅蓝 / 灰蓝明度变化。

Ghost Card

• 浅灰底 --gray，承载次级解释。
• 无阴影或极轻阴影。
• 适合架构说明、步骤解释、成本/收益对照。

Black Block

• 只用于少量强结论或反差模块。
• 面积过大时会破坏 Big White 的轻盈感。
• 一页通常不超过 1 个主要黑块。

Chart

• 少网格、少颜色、强对齐。
• 图表网格线用 --line 半透明，不用重坐标轴。
• 多序列图表优先使用蓝色明度差，而不是新增强强调色。

Footer / Metadata

• 细灰线上方或下方放 SOURCE / PAGE / DATE / STYLE。
• 字号小、字距开、颜色浅，但不能不可读。
• 用它增强报告感，不要塞正文信息。

Mobile Rules

720px 以下：

• .hero 单列；深蓝 hero metric 降低高度。
• .panel-grid 全部单列。
• .metric-grid 单列，避免 2×2 在窄屏挤压。
• .hero-pills 单列，每项用细灰线分隔。
• h1 不低于 42px，但要避免横向溢出。
• ranking row 可压缩名称列，但分数保留右对齐。
• 禁止 fixed / sticky 下载按钮遮挡底部内容；若有保存按钮，放正常文档流底部。
• 390px 视口必须检查 scrollWidth <= innerWidth。

Anti-patterns

• 把“大白风”做成普通白底模板，缺少大数字和报告级结构。
• 引入多个强强调色：橙、绿、紫、红同时出现会破坏主题。
• 用厚黑边框、粗阴影、纸感纹理、手绘线条。
• 黑色块面积过大，压过白底主视觉。
• 细灰小字过浅，导致元信息不可读。 | 面板太密，留白不足，变成 dashboard 噪音。 | | 把 chart 做成彩色 BI 仪表盘，而不是克制商务报告图。 |

内容密度原则（来源：gsap-skills graph-paper 版重建，2026-06-20）

graph-paper 初版（183行，12KB）被用户要求"内容进行完善补充"。原因：骨架完整但内容太稀疏。

graph-paper / bigwhite 类信息卡的内容充实度基线：

区域	最低要求	充实版示例
技能/模块网格	8项展开（4×2），不只写3项	8项 + 每项 tags + 描述
代码模式	≥3 个完整可运行的代码块	4个（Timeline/ScrollTrigger/React/Performance）
对照表	≥5 行	8行（Agent安装表）
速查参考栏	≥3 列	Easing 10项 + Plugins 10项 + Triggers 10项
hero 指标	≥3 组	8 modules / 40+ agents / 100% FREE

判断标准：如果内容在视觉上感觉"空"，问题通常是结构不够（需要更多行/更多块），而不是润色标题或改字号。初版草稿阶段就应按充实版基线规划，写完再评估是否需要压缩，不要从稀疏版开始再扩充。

大文件写入策略：graph-paper 充实版约 23KB，pixelstack 重建版约 18KB。若 write_file 超时，分 header <style> / body <main> / footer </main></body></html> 三段写入。

Implementation Notes

当前主题预览文件：

• theme/bigwhite.html
• docs/20260617-bigwhite-style-demo.html：真实内容 demo，用 GLM-5.2 技术发布简报验证该风格在实际信息卡中的可用性。
• _themes.yaml 注册项：bigwhite-style
• themes.html 由 python3 scripts/rebuild_themes.py 从 _themes.yaml 重建。

创建或修改该主题时：

1. 先参考现有 theme/*.html 的结构，不要做孤立 demo。
2. 更新 _themes.yaml 时只追加 / 修改目标主题，禁止误替换相邻主题。
3. 运行 python3 scripts/rebuild_themes.py。
4. 用局域网预览 http://<LAN_IP>:5588/theme/bigwhite.html 与 http://<LAN_IP>:5588/themes.html。
5. 浏览器确认 themes.html 中出现 infocard-bigwhite-style 且 iframe 指向 ./theme/bigwhite.html。

详见：references/bigwhite-theme-creation-note.md。

大白风 → 公众号正文迁移流程（2026-08-04 验证）

当需要将大白风信息卡或预览 HTML 迁移为微信可粘贴的正文 HTML 时，执行以下步骤：

Step 1：提取内容清单

从源 HTML 中提取并核对：

• 标题 / 副标题 / 引言文本
• 章节数量与标题
• 核心数字与数据带内容
• 决策框 / 两栏 / 风险提示的文本
• BOTTOM LINE 结论
• 图片数量与 src（若有）

Step 2：逐组件转换规则

源组件（class/CSS）	目标组件（内联 section/span）	关键转换
.hero	<section style="padding:40px 0 24px;border-bottom:1px solid #E8E8E8">	纯白底无色块
.title-hero → h1	<h3 style="font-size:26px;color:#1A3A5C;font-weight:900">	不允许 h1/h2，只能用 h3
.kicker	<p style="font-size:12px;color:#2D5F8A;text-transform:uppercase"> + <span leaf="">	全大写英文标签
.data-strip	<section style="background:#F4F4F4;border-top:1px solid #E8E8E8">	灰底数据带
.data-cell .data-num	独立 <p> 字体 28px;font-weight:900;color:#1A3A5C	大数字深蓝
.decision-box	<section style="border:1.5px solid #1A3A5C;border-top:3px solid #1A3A5C">	深蓝边框+顶框
.two-col	display:flex;gap:0;flex-wrap:wrap;border:1px solid #E8E8E8	两栏灰线分隔
.col	flex:1;min-width:200px	两栏独立 padding
.risk	border-left:3px solid #2D5F8A;background:#F4F4F4	左侧蓝线+灰底
.bottom-line	background:#1A3A5C	深蓝底白字
.section-head	<section style="border-top:1px solid #E8E8E8;padding-top:14px"><h3>	章节分隔线
strong	<strong style="color:#1A3A5C;font-weight:700">	深蓝强调

Step 3：标签集合规检查

公众号 body 内只允许：section / span / strong / img / h3 / h4 / ul / li

常见错误：

• ❌ <h1> → ✅ <h3>
• ❌ <h2> → ✅ <h3>（首次迁移时 hero 标题最易踩坑）
• ❌ <p>（在 body 内）→ ✅ <section> 或直接 <span leaf=""> 文本节点
• ❌ <b> → ✅ <strong> 或 <span style="font-weight:700">
• ❌ <code> → ✅ <span style="font-family:'SF Mono',monospace;font-size:13px">
• ❌ class= / id= → ✅ 全部内联 style
• ❌ <div> / <main> → ✅ <section>
• ❌ display:grid → ✅ display:flex;flex-wrap:wrap
• ❌ ::before / ::after 伪元素 → 删除，用实际 DOM 节点替代

Step 4：validate + audit 双验

1. python3 scripts/validate_gzh_html.py <file> — 必须 0 ERROR / 0 WARNING
2. 结构性审计（python script）：

disallowed = ['class=', 'id=', '<div', '<main', '<h1', '<h2', '<p>', '<b>', '<code', '<pre']
# 全部应为 0 occurrences
# span leaf 计数应 ≥ 内容节点数
# 组件数量应与源一致（decision-box、bottom-line、data-strip 各 1 个等）

Step 5：移动端风险评估

模式	风险	缓解
min-width:130px × 3（数据格）	390px 视口下总宽 ~396px 超限	flex-wrap:wrap 自动换行，无需额外处理
min-width:200px × 2（两栏）	390px 强制换单列	行为符合设计预期
固定 font-size:26px hero 标题	极窄屏可能溢出	依赖自然折行，纯内联无法用 @media

注意：纯内联 CSS 无法使用 @media 查询；若有响应式需求，必须在转换前在源 HTML 中完成 @media 到容器宽度约束的替换。

参考文件

• 转换后样稿：references/bigwhite-wechat-migration-sample.html
• 颜色 Token 表：见 SKILL.md 头部 Color Tokens 节
• 组件库原文（gzh-design 格式）：gzh-design/references/theme-bigwhite.md

充实版内容结构（2026-07-03 验证）

适用场景：五框架全景对比卡（ai-agent-memory-frameworks.html，38KB，12 个内容模块）。

已验证的模块组合（按顺序）：

模块	用途	对应 CSS class
能力对比矩阵	多框架 10+ 维度横评	.compare-table + 响应式 .overflow-x:auto
独立框架卡片	每框架定位/核心/标签/元信息	.fw-grid（5列）→ mobile 2列
性能指标格	hero 数据突出	.metric-grid（2×2）
架构解析	技术路线说明	.feat（编号+内容）
场景矩阵	选型对照表	.compare-table（推荐框架+原因）
综合判断黑块	三条路线哲学总结	.panel.black（深色反差）
SOP 步骤流	操作流程	.sop-flow（5列）→ mobile 单列
集成代码	可运行代码片段	pre{overflow-x:auto;word-break:break-all}
优劣势对照	两个方案快速对比	.pros/.cons 配色双栏
场景卡	四象限应用推荐	.scene（4列）→ mobile 2列
核心判断	三条洞察结论	三栏左侧色条分隔

关键 CSS 经验：

• .compare-table 必须外套 div{overflow-x:auto}，防止表格在 390px 下整体溢出
• pre{overflow-x:auto;white-space:pre-wrap;word-break:break-all} 三件套防止代码块截断
• .fw-grid 在 720px 下自动切 3 列，390px 下 2 列；配合 .scene 4→2→1 列节奏感好
• .panel.black 用于综合判断区，制造视觉反差；每卡不超过 1 个
• SOP 步骤流 .sop-flow 必须在 @media 中强制 grid-template-columns:1fr，不能用默认 desktop 的多列

判断标准：本卡 38KB、12 模块，在大白风下仍保持干净报告感——骨架是 .panel + .head + .compare-table + .fw-grid，装饰极简，节奏靠内容本身建立。

---

Acceptance Checklist

• 白色主画布占主导，没有渐变 / 纹理 / 重阴影。
• 深蓝是唯一强强调色。
• 至少有一个 hero metric / 大数字模块。
• 使用细灰线与浅灰 ghost card 建立分区。
• 有报告式 top line 或 footer metadata。
• 图表颜色克制，优先蓝色明度变化。
• 720px 以下网格单列。
• 390px 无横向溢出。
• 长信息卡的移动端验收必须覆盖完整高度：如果首屏截图看不到 footer / 来源区，继续拉高窗口或按 scrollHeight 重截，而不是把截断图当成通过。
• theme/bigwhite.html 可通过局域网服务预览。
• themes.html 已重建并能看到该主题。

Naming / Aliases

• Skill name：infocard-bigwhite-style
• 中文名：大白商务风 / 大白报告风
• 常用别名：bigwhite、白底商务风、白皮书风、报告页风、大数字白底风
• 触发词：大白风、白底报告、商务简报、大数字、深蓝强调、细灰线、GLM-5.2 参考图
• Theme slug：bigwhite-style
• CSS class：bigwhite
• Theme file：theme/bigwhite.html