infocard-green-style

name	infocard-green-style
description	绿色信息卡片的外挂风格技能。用于把 infocard 切换为青绿 / 翡翠 / Swiss editorial 风格，统一配色、组件、按钮、强调条、统计卡、标签和移动端表现。
version	1.0.0
author	Hermes Agent
tags	["infocard","style","green","teal","emerald","swiss","editorial","ui","theming"]

infocard-green-style

触发条件

当用户明确表达以下意图时启用本技能：

• "绿色信息卡片"
• "青绿色 / 翡翠绿 / teal 风格"
• "把这张卡改成绿色系"
• "换成绿色 Swiss 编辑风"
• "用绿色信息卡片的视觉语言重做"

区分"重新着色"和"重建"：

• 重新着色（局部换色）：只改 CSS 变量 --red → --green，适用于用户说"换成绿/换颜色"且页面结构本身没有破坏的情况。
• 重建（完整重写）：从头重写 HTML 结构 + CSS，适用于用户说"重新生成"、"重建"、"regenerate"且伴随布局/可读性/风格系统性问题的场景。重建时必须用新的绿色 token 系统全量重写，而不是在旧版上局部换色。判断方法：用户同时抱怨"布局依然存在问题"或明确说"重新生成"→走重建路径。

目标

把现有 infocard 的视觉系统从红黑系切换为 绿色系高密度编辑风，保持内容结构不变，只改变：

• 配色
• 强调条与分割线
• 标签 / pill / stat / 卡片头部
• 主要按钮与图标
• 引导导航与高亮态
• 视觉层级与留白节奏

风格定义

这不是“全页面染绿”，而是 Swiss editorial + green accent：

• 底色：暖白 / 象牙白 / 雪白
• 主文字：黑色 / 深炭黑
• 强调色：青绿、翡翠绿、深绿（少量高饱和）
• 辅助灰：冷灰、浅灰
• 视觉语气：冷静、专业、克制、技术感

颜色 Token 参考

可按项目微调，但尽量遵循以下层级：

• bg: #f5f5f0 或 #ffffff
• card: #ffffff
• text: #000000
• muted: #6b7280 / #888888
• line: #d9d9d2
• accent: #0d9488（teal）或 #15803d（emerald）
• accent-dark: #115e59 或 #166534
• accent-soft: #dcfce7 / #ccfbf1
• warning: #f59e0b（仅用于必要警示，避免主导画面）

组件规则

1) 顶部主标题

• 保留大标题与章节编号的网格结构。
• 编号 / 章节标识改用绿色系强调。
• 不要让红色继续作为主强调色。

2) 章节导航 / pills

• 当前高亮项使用绿色底或绿色左线。
• 非激活项保持黑字/灰字。
• pill 推荐使用：黑底白字、绿底白字、浅绿底深绿字。

3) 内容卡片

• 每张卡顶部加 2–3px 绿色强调线。
• 卡片边框保持黑/深灰，不要变成整片绿色背景。
• 绿色只负责“识别与层级”，不要把页面涂满。

4) 统计 / ROI / 数据块

• 数据块可用黑底白字，配绿色数值或绿色分隔线。
• 如果需要更强视觉对比，可用深绿底白字，但不要使用红黑冲突风。
• 数据卡底部说明字保持低对比灰色。

5) 按钮

• 绿色信息卡的下载/保存按钮使用绿色系主按钮。
• 推荐样式：
  • 圆角胶囊
  • 左侧带图标（如 💾）
  • 右下角 fixed（桌面）或安全区内显眼位置
  • 移动端不得遮挡正文
• 按钮外观规范：圆角胶囊 + 💾 图标 + 右侧 fixed（桌面）/ 右下角（移动端），不要在按钮前面加 .fab-spacer 占位 div，也不要用 <div class="fab-dock"> 包裹按钮；按钮必须直接放在 .card 闭合标签后，用 position:fixed 定位，fixed 元素不会影响文档流，不需要 spacer。
• FAB Spacer 禁止规则：position:fixed 的按钮相对于视口定位，不会造成页面空白；任何 .fab-spacer 或 .fab-dock 都是冗余结构，会在页面底部产生大量空白；绝对禁止在按钮前插入占位 div。
• 按钮 HTML 完整性验证：生成或 patch HTML 后，用 grep -n "save-btn\|</button>" <file> 确认 id="save-btn"、onclick="saveCard()" 和按钮文本（💾 保存 PNG）均存在。sed 多行块删除会误删按钮，严禁使用 sed -i '/<div class="fab-dock">/,/<\/div>/d' 这类模式。
• 重建时按钮处理：重建时按钮直接写在 .card 闭合标签后，不要包在任何 wrapper div 里。

6) 图标与装饰

• 图标和引导箭头优先使用绿色。
• 分割线、细条、章节条使用绿色。
• 不要用大面积渐变、霓虹或过度玻璃态。

布局原则

• 继续沿用高密度瑞士网格：标题区、导航条、正文卡、数据区、结尾图。
• 780px 左右的最大宽度仍是推荐上限。
• 卡片之间的节奏要紧凑，但不能让绿色把层级淹没。
• 中英混排可保留，但中文主标题与英文副标题必须层次清晰。

移动端规则

• 720px 以下必须做结构重排，不只是缩字号。
• 两列卡片优先折成一列或清晰的纵向堆叠。
• 统计条 / 表格 / 步骤条若在手机上显得挤压，优先转为堆叠式属性块。
• fixed 保存按钮可以保留，但必须给正文与 footer 留足安全区；不得遮挡内容。
• 青绿色按钮、标签、线条在手机上仍要清晰可见，不能因为压缩而变灰。
• position:fixed 的保存按钮不需要 .fab-spacer / .fab-dock；这类占位结构会制造底部空白，应避免。

生成流程

当用户要求“绿色信息卡片”时：

1. 先加载或复用现有 infocard 内容结构。
2. 将红黑主色替换为 green / teal / emerald 系统。
3. 统一按钮、pill、标题条、分割线、统计区强调色。
4. 检查移动端结构是否需要从桌面网格改为单列堆叠。
5. 再执行信息卡发布与验收。

重建（Rebuild）路径决策

当用户说"重新生成"、"重建"、"regenerate"或同时存在多个系统性破坏项（颜色+布局+字号+底部多余区域）时，直接 write_file 从头重写，不要持续 patch：

• patch 适合单点小修补（换色、改几个 CSS 值）
• 重建适合：全局字号放大、背景色变更、阴影系统移除、布局结构调整等需要改动 CSS token 层级的修改
• 重建后用 python3 scripts/rebuild_index.py 重构索引，不要手动编辑 _index.yaml

重建检查清单（交付前必须确认）：

• body background 应设为 var(--card) 而非 var(--bg)，避免页面底部透出深色背景
• .page 不应保留底部填充：padding-bottom 必须为 0，除非有明确的 fixed 控件避让需求；如果出现底部黑/暗色空区，优先检查 .page 的 padding/padding-bottom，不要误判成 body 背景或 .card 阴影
• .card 的 box-shadow 应移除或改为极轻微的 inset/fill，不要用大投射 0 18px 50px rgba(0,0,0,.22) 造成底部边框感
• 字号放大要覆盖全局所有标签层级（kicker/label/small/num/it-desc/badge/foot/pill），不只是正文
• 移动端 breakpoint 统一用 760px 测试（390×844 iPhone 视口）
• 时间线等双列 grid 元素在移动端必须改为纵向堆叠
• 发布前校对 list / 首页索引时间：meta.yaml 的 date / updated / _modified_date 应以 Asia/Shanghai 墙钟时间生成，重建或重发时要重跑 python3 scripts/rebuild_index.py，确保列表页排序和时间展示正确

禁止项

• 不要把红色保留成主强调色。
• 不要只做"颜色换肤"而不重排结构；绿色重建必须连同头部、统计、引用块、表格和按钮一起重新组织。
• 绿色卡片不允许留下硬编码红色 fallback（尤其是 header gradient、warning bar、pill、按钮与强调线）；只要截图里还能看到明显红色，就不算完成。
• 不要只改文字颜色而不改组件层级。
• 不要把绿色做成廉价荧光绿。
• 不要让按钮变成打印按钮。
• 不要在移动端保留会遮挡内容的布局。
• 不要用大 box-shadow 填充页面底部视口——这会产生"底部边框感"，正确做法是让 body 背景色与 .card 同色。
• 不要在 .page 上保留无意义的 padding-bottom；底部暗色空区经常来自 .page 底部 padding，而不是内容区或 body。
• 不要只放大正文字号而遗漏 kicker/label/small/num/it-desc/badge/foot/pill 等辅助层级。

输出检查清单

在交付绿色信息卡前，至少确认：

• 标题与章节编号已切换为绿色系层级
• pills / lines / buttons / stats 已统一风格
• 桌面和移动端都可读
• 没有红色主导视觉
• PNG 导出按钮是实际导出，不是打印
• 页面内容未被按钮遮挡

备注

本技能是“外挂风格层”，适合与现有 infocard 内容生成技能配合使用：

• 内容技能负责写内容与结构
• infocard-green-style 负责切换配色与 UI 元素
• 若用户没有特别说明，不要自动把所有卡片都改成绿色