infocard-main-style

name	infocard-main-style
description	主要主题的信息卡技能。用于把开源项目、Agent 实施手册、工具说明类 infocard 切换为红黑白主骨架、蓝黄绿辅助信号、紧凑小字高密度模块化排版的默认主主题，统一 stats、grid、pill、flow、section 与移动端表现。
version	1.0.0
author	Hermes Agent
license	MIT
metadata	{"hermes":{"tags":["infocard","style","main-theme","compact","small-text","red-black","manual","ui","theming"],"related_skills":["any2card","infocard-black-head-style","infocard-blue-technical-manual-style","infocard-pub-publisher"]}}

infocard-main-style

Overview

这是从 duix-avatar 与 claude-subagents 抽象出的主要主题。

注意：保留 claude-subagents 的骨架，不保留其过小字号。

核心特征：

• 红黑白主骨架
• 蓝黄绿辅助状态色
• stats / grid / pill / flow / section 齐全
• 紧凑小字，但必须可读
• 适合作为 infocard 的默认主主题

When to Use

• 用户说“主要主题”
• 用户说“主主题 / 默认主题”
• 用户参考 duix-avatar / claude-subagents 骨架
• 用户要高密度手册卡 / 开源项目总览卡

Core Design DNA

• 主主题 / 默认主题
• 红黑白主系统
• 蓝黄绿做辅助层级
• 高密度模块化排版
• 看起来像默认骨架，不像特殊海报

Typography

• Hero：24–30px
• Section：20–24px
• Lead：16–18px
• 正文：12.2–13.6px
• Stats/Pill/Meta：11.2–12.4px
• 最低不要低于 11px

Mobile Rules

• 720px 以下优先单列
• 先退化 stats / grid，再考虑缩字
• flow 改为纵向可读
• 小字必须保持可读，而不是极小
• 如果 390px 下页面没有横向溢出但仍显拥挤，优先抬高最小字号层（meta / badge / footer / pill / note），再做结构调整；不要只改正文
• 技术表格 / 密集矩阵在 390px 上必须有明确的横向策略：优先用单独 .table-wrap 或类似滚动容器包裹，给表格设定合理 min-width，避免整页被表格撑宽。
• 保存 PNG / 导出按钮必须在正文之后的正常流里验收，不能遮挡内容；有必要时把按钮当作底部 CTA，而不是浮层。
• 修完后用浏览器 console 复核 scrollWidth 与关键字体尺寸，再用 390px 全页截图确认；若浏览器导航超时，改用 Playwright CLI screenshot 作为移动端验收备用证据。

Color System（配色系统）

配色 token 必须与 theme/main.html 一致，不得自行定义或偏移。

⚠️ 重要区分 — 两个文件的不同角色：

• theme/main.html = 元素演示页（展示各 token 用法，不是完整成品）
• docs/20260530-duix-avatar.html = 落地参考标准（真实有灵性的完整信息卡）

修改或新建信息卡时，必须以 duix-avatar.html 为视觉参考，不得以 theme/main.html 为设计上限。 theme/main.html 的价值是 token 对照表，不是灵性模板。

Token	Hex	用途
--red	#c8102e	主强调色（可选）：数字标记、结论标签、红色按钮
--accent	#222	替代强调色：当红色过于抢眼时，用深灰取代红色的所有位置
--black	#0a0a0a	主边框、header 分割线、pill 描边、按钮底色
--paper	#fffdf9	正文卡片底色、section body 背景
--page-bg	#f5f2ec	页面整体背景色
--blue	#0036a3	辅助强调色（蓝 pill 文字 + 描边）
--blue-bg	#eef4ff	蓝 pill 填充背景
--yellow	#e8c200	状态色（黄 pill 描边）
--yellow-bg	#fff1b0	黄 pill 填充背景
--green	#15803d	确认色（绿 pill 描边）
--green-bg	#dcfce7	绿 pill 填充背景
--text	#111	正文文字
--muted	#555	stat label、meta 等弱信息文字

Red Usage Moderation（红色使用节制）

核心原则：红色越少越好。 红色是高刺激色，在信息卡中只应出现 1-2 处，否则会造成视觉疲劳和层级混乱。390px 窄屏下红色会被进一步放大。

卡片类型	红色建议
调查/事件/社会话题	✅ 正常使用红色（section-no、lead、强调标记）
技术分享/工具分析/代码类	❌ 红色频繁 → 替换为 --accent: #222（深灰）
产品/UI 展示类	⚠️ 仅保留在 section-no，其他用蓝/绿辅助
开源项目总览	✅ 可用红色，但 section-no 已足够

红色节制 checklist（发布前自查）：

• 页面中红色是否只出现在 ≤3 个不同位置？
• 红色是否同时出现在 section-no + 标题 + 按钮 + 边框 + 强调线？→ 太多了，只保留 section-no
• 技术/代码类卡片 → section-no 改为 --accent: #222（深灰）
• 保存按钮改深色渐变 #1a1a1a → #333（而非红色渐变）

快速替换方案：

:root { --accent: #222; --red: var(--accent); }
.section-no { background: var(--accent); }
#save-btn { background: linear-gradient(135deg, #1a1a1a, #333); }

禁止行为：

• 用 #28231d / #1d1b16 等棕色替代 --black
• 用 #f8efd9 等米黄替代 --paper
• 用 --accent1 / --accent2 等多色杂糅替代蓝/黄/绿辅助系统
• 用 background: var(--border) 作为 header 整块填色（main-style 用 bottom border 而非填色）

YAML meta.yaml 编写陷阱（infocard 专用）

症状：python3 -c "import yaml; yaml.safe_load(open('meta.yaml'))" 报 YAMLError: expected <block end>, but found '<block mapping start>'，且错误指向 sources 列表区域。

根因：YAML 中 list item 的子键使用中文标识符（如 可信度、备注）时，中文字符的视觉宽度与 ASCII 不同，写入时容易出现缩进不足（少 1 个空格），导致 YAML 解析器无法识别嵌套 mapping。

错误示例：

sources:
  - title: "GitHub 官方仓库"
    url: https://github.com/opendatalab/MinerU
   可信度: 高        # ← 少了一个空格！应该是 4 个空格缩进
    备注: "Stars 66.9k"

正确写法：

sources:
  - title: "GitHub 官方仓库"
    url: https://github.com/opendatalab/MinerU
    可信度: 高       # ← 4 空格缩进，与 url/title 对齐
    备注: "Stars 66.9k"

防呆 checklist（写入 meta.yaml 后必查）：

• 检查 sources/data_accuracy_notes/list 下的每一行子键缩进是否与上行 key 完全对齐
• 运行 python3 -c "import yaml; yaml.safe_load(open('meta.yaml')); print('YAML OK')" 验证
• 避免在 list item 子键中使用无引号中文字符串（建议加引号或改用英文 key）

正确做法（参考 theme/main.html）：

/* Header：用 bottom border 分割，不用填色 */
header { border-bottom: 2px solid var(--black); padding-bottom: 8px; margin-bottom: 10px; }

/* Stats Bar：用 1.5px 边框包裹，白底 */
.stats { display: flex; flex-wrap: wrap; border: 1.5px solid var(--black); background: #fff; }

/* Section header：黑底白字 */
.sec-head { background: var(--black); color: #fff; padding: 6px 10px; }

/* Section body：白底 */
.sec-body { background: var(--paper); padding: 8px 10px; }

/* Pills：白底黑边，彩色变体填充 */
.pill { padding: 3px 8px; border: 1.5px solid var(--black); font-size: 10px; font-weight: 700; background: #fff; }
.pill.blue { background: var(--blue-bg); : (--blue); : (--blue); }

Section Spacing（间距规范）

各模块之间必须留足呼吸空间，禁止零间距拼接。

模块组合	规则	典型值
Header 深色区 → Stats Bar 浅色区	.header { margin-bottom: ≥ 0.75rem }	12px
Stats Bar → 首个 Section	.stats-bar { border-bottom } 已有分割线，额外间距 margin-bottom: 0.75rem	12px
Section → Section	.section { padding } 内部留白，块间不额外加 margin	—
末节 → Footer	末节 padding-bottom 已含底部缓冲，无需额外 margin	—

常见错误：

• .header { margin-bottom: 0 } → Header 与 Stats Bar 直接贴死，视觉拥挤
• 修复：在 .header 上加 margin-bottom: 0.75rem; 增加缓冲

卡片 padding 一致性（防呆规则）

核心原则：所有卡片类型（文本卡、代码块、grid2 并排卡、closing 总结卡）的内部 padding 必须统一。 视觉上最明显的"拼接感"来源就是不同卡片类型的 padding 不一致。

卡片类型	统一值（桌面）	移动端
纯文本 .block	padding: .84rem .86rem .9rem	.7rem .64rem .76rem
代码块 .code-box	padding: .8rem .84rem	沿用桌面值
并排 .grid2 > .block	同上，grid gap .6rem	单列时同上
关闭框 .closing	padding: .84rem .86rem .9rem	同上
列表 <ul>	margin: .32rem 0 0 1rem	同上

检查方法：在 390px 窄屏下截图，目视检查所有卡片的左右内边距是否视觉一致。代码块和文本卡之间的 padding 差异是最高频的失误点。

Section 分隔线（缓和黑白过渡）

当页面包含多次黑白背景切换（Hero 黑 → 白卡 → 黑代码 → 深色 closing）时，在 section 之间加一条视觉分隔线可以显著软化过渡。

.section { position: relative; }
.section + .section::before {
  content: '';
  display: block;
  height: 1px;
  background: var(--page-bg);
  margin: -.6rem -.92rem .6rem;
}

这条分隔线使用页面背景色（而非黑/白），在黑白之间建立一个中性视觉缓冲。对于不含深色/浅色切换的纯白卡片页面，不需要加分隔线。

重建卡片的灵性原则（防呆规则）

触发条件：对已有信息卡进行重构（rebuild）时触发本节。

常见失误：重建时将 theme/main.html（简化元素演示）当作设计上限，导致新版变成"没有呼吸感的机械骨架"，失去原有灵性。

防呆步骤：

1. 确认参考文件：duix-avatar.html（真实落地卡），不是 theme/main.html（演示页）
2. 灵性要素检查清单：
   • Header 有无红渐变 linear-gradient(180deg, var(--red), #a90f27)
   • Stats 区是否为黑底 #121212 + 红色数字
   • Section 标题是否为红色 label + 编号 · 标题 格式
   • Lead 区是否有红色左边线 border-left: 3px solid var(--red)
   • 双字体系统是否完整（IBM Plex Sans + Mono）
3. 不得跳过第2步直接生成代码 — 灵性验证优先于编码完成

验证方法：重建后用 browser_vision 截图确认，无条件接受视觉反馈；若超时则降级用 browser_navigate + browser_snapshot 确认结构。

检查命令：

grep -n "margin-bottom" <file>.html | grep -E "\.header|\.stats-bar|\.section"

Typography

/* 固定在右下角；底部留白由 .page padding-bottom 保障 */
/* Red variant（默认，适合调查/事件卡）： */
#save-btn {
  position: fixed;
  bottom: 20px;
  right: 14px;
  z-index: 999;
  border: 0;
  border-radius: 10px;
  padding: .56rem .72rem;
  background: linear-gradient(135deg, var(--red), #b3000f);
  color: #fff;
  font-size: .7rem;
  font-weight: 900;
  font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace;
  letter-spacing: .04em;
  cursor: pointer;
  box-shadow: 3px 3px 0 rgba(0,0,0,.2);
}
#save-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Dark variant（技术分享/代码分析卡 — 红色太抢眼时用这个）： */
#save-btn.dark { background: (, , ); }


 (: ) {
   { : ; : ; : .; }
}

页面底部留白（必须）：.page 的 padding-bottom 必须 ≥ 7rem（桌面），移动端 ≥ 8rem。5.5rem 不足以防止固定保存按钮遮挡底部内容。

/* 桌面 — 有固定按钮时用 7rem+ */
.page { max-width: 720px; margin: 0 auto; padding: .75rem .7rem 7rem; }
/* 或更宽松版（推荐） */
.page { padding: .5rem .48rem 9rem; }

/* 移动端 */
@media (max-width: 720px) {
  .page { padding: .4rem .3rem 8rem; }
}

Content Density（信息密度规范）

最低模块数：8 个标准模块

1. Banner（标题 + 日期 + 标签）
2. Stats（4格数字锚点）
3. 引言 Lead（结论先行的一句话）
4. 验证表（交叉验证，多行表格）
5. 时间线（3列节点或多列）
6. 结构分析（2列或4列卡片网格）
7. 流程/传播机制（5步流程图或同色块）
8. 结论框 + 来源 Footer

禁止：模块数少于8个、表格少于8行、时间线少于6节点 实操核查方法：每个调查卡必须有"常见思维误区"和"实操核查步骤"两个子模块

Typography（字号体系）

位置	字号
Hero（banner 标题）	clamp(1.5rem, 5vw, 2.2rem)，weight 900
Section 标题	.82rem，weight 900，letter-spacing .1em
Lead 正文	1.05rem，weight 700
正文	.72rem
Stats 数字	1.3rem，weight 900
Table	.78rem
Meta/Footer	.72rem
最低字号	.58rem（tl-date / flow-num 等装饰性元素）

Showcase Section

For GitHub repo cards with UI screenshots, use the showcase-grid pattern documented in references/showcase-grid-pattern.md: 2-column image grid with hover zoom, name/meta/desc per item, English+Chinese bilingual naming. Mobile collapses to 1 column.

Grid2 Stealth Extension Bug

⚠️ 必读坑点：所有使用 .grid2 网格布局的信息卡（任何主题），在 390px 移动端都会被 stealth 扩展的 cdp_override 注入覆盖 grid-template-columns，导致两列不等宽。详见 references/grid2-stealth-extension-fix.md。

Naming

中文名：主要主题 副标识：小字 别名：主主题、默认主骨架