| 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（发布前自查）：
快速替换方案：
: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
可信度: 高
备注: "Stars 66.9k"
正确写法：
sources:
- title: "GitHub 官方仓库"
url: https://github.com/opendatalab/MinerU
可信度: 高
备注: "Stars 66.9k"
防呆 checklist（写入 meta.yaml 后必查）：
正确做法（参考 theme/main.html）：
header { border-bottom: 2px solid var(--black); padding-bottom: 8px; margin-bottom: 10px; }
.stats { display: flex; flex-wrap: wrap; border: 1.5px solid var(--black); background: #fff; }
.sec-head { background: var(--black); color: #fff; padding: 6px 10px; }
.sec-body { background: var(--paper); padding: 8px 10px; }
.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（简化元素演示）当作设计上限，导致新版变成"没有呼吸感的机械骨架"，失去原有灵性。
防呆步骤：
- 确认参考文件：
duix-avatar.html（真实落地卡），不是 theme/main.html（演示页）
- 灵性要素检查清单：
- 不得跳过第2步直接生成代码 — 灵性验证优先于编码完成
验证方法：重建后用 browser_vision 截图确认，无条件接受视觉反馈；若超时则降级用 browser_navigate + browser_snapshot 确认结构。
检查命令：
grep -n "margin-bottom" <file>.html | grep -E "\.header|\.stats-bar|\.section"
Typography
#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; }
#save-btn.dark { background: (, , ); }
(: ) {
{ : ; : ; : .; }
}
页面底部留白（必须）：.page 的 padding-bottom 必须 ≥ 7rem（桌面），移动端 ≥ 8rem。5.5rem 不足以防止固定保存按钮遮挡底部内容。
.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 个标准模块
- Banner（标题 + 日期 + 标签）
- Stats（4格数字锚点）
- 引言 Lead（结论先行的一句话）
- 验证表（交叉验证，多行表格）
- 时间线（3列节点或多列）
- 结构分析（2列或4列卡片网格）
- 流程/传播机制（5步流程图或同色块）
- 结论框 + 来源 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
中文名：主要主题
副标识：小字
别名：主主题、默认主骨架
