infocard-q-style

name	infocard-q-style
description	Q 版主题的信息卡技能。用于把 infocard 切换为纸感、手作感、彩色卡片对比风格：暖米纸背景、厚黑边框、圆角卡片、彩色 accent、emoji/pill 标签、高密度网格，适合框架对比、方法论总览、"25+种"型知识卡与轻编辑风。 触发条件：用户提到"Q风"、"手作"、"贴纸"、"框架对比"、"方法论总览"、"25+种"、"方法全景图"。 重要教训（2026-06-05）：生成时必须先读 `any2card/references/q-style-html-generation-guide.md`，不要假设本技能目录里自带同名副本；不得使用简化卡片结构。每个方法卡必须有"理论介绍"+"常见用途"两层，不能只有标题。GitHub 仓库主页型 Q-style 卡的会话笔记见 `references/github-repo-q-style-card-note.md`。
version	1.0.0
author	Hermes Agent
license	MIT
metadata	{"hermes":{"tags":["infocard","style","q","paper","scrapbook","editorial","hand-drawn","comparison","ui","theming"],"related_skills":["any2card","infocard-green-style","infocard-main-style","infocard-pub-publisher","infocard-wood-style"]}}

infocard-q-style

Overview

Q 版主题是 infocard 体系中的纸感 / 手作感 / 彩色卡片风主题。

布局优先级：先卡片化，再填内容。 如果用户要的是“信息卡”，不要先铺长文档结构；先做主卡摘要、少量子卡和关键证据，再决定是否展开细节。代码块和表格只保留最少必要量。

它适合：

• 框架对比
• 方法论总览
• 多选项并列
• 教程型知识卡
• 轻编辑、看板式、贴纸式信息组织
• 提示词卡 / 代码模板卡 / 命令模板卡（这类卡应默认使用 .prompt-card + 复制按钮）

它不是瑞士黑头调查风，也不是默认主手册风。

When to Use

• 用户说“Q 版主题”
• 用户说“纸感 / 手作感 / 彩色卡片风”
• 用户要“更像看板 / 拼贴 / 贴纸卡”
• 用户要“框架对比图、方法论总览卡”
• 用户要把 GitHub 仓库主页 / README 做成 Q-style 信息卡时
• 用户要把 百科条目 / 科普条目 / 维基页面 做成知识分享型信息卡时：优先走“概念 → 关键数据 → 学习应用 → 误区 → 适用边界 → 来源”六段式，而不是把条目压成一页摘要。

百科 / 科普条目型 Q-style 卡

• 首屏结论先行：标题写成“这个概念到底说明什么”，不要只复读词条名。
• 数据点单独成块：把条目中的时间点、比例、公式、实验结果拆成独立视觉单元（如 interval-grid / formula box），让读者一眼看到规律。
• 图像优先用条目自带图：词条若有 Wikimedia / 维基自带示意图，优先本地化后作为 hero 视觉锚点；SVG 可直接保留为原始向量。
• 误区必须独立成章：科普卡最容易只剩“定义”，但真正有价值的是“它不是什麼 / 不能怎么用 / 边界在哪里”。
• 应用落到学习行动：对于学习科学、心理学、方法论类条目，必须补“怎么用在复习 / 训练 / 设计排程里”。
• 来源区分原文与再加工：正文可做提炼，但 source note 要明确来自百科条目，避免把解释写成原文事实。
• 这类卡片的会话笔记见 references/wiki-knowledge-sharing-card-note.md。

插件 / 工具合集卡模式（2026-07-24 新增）

当内容是多工具横向合集（每个工具有独立安装命令，需批量展示并支持一键复制），使用 references/plugin-collection-card-pattern.md 中的标准骨架。与 GitHub 仓库主页型（单仓深度分析）完全不同。

结构：

• .plugin-card：顶部 7px 彩色 accent 条（::before）+ 插件名 + 版本 badge + 描述 + 标签 + 深色终端风格 .install-block（背景 #1d1b16，文字 #a8e6a3）+ 复制按钮
• .copy-btn：点击后 navigator.clipboard.writeText(btn.dataset.cmd)，显示"已复制"1.8s 后回滚
• 移动端：body max-width: 420px，hero-stats 在 400px 退化为 2 列，.install-cmd 用 text-overflow: ellipsis 截断长命令

GitHub 仓库主页型 Q-style 卡

• README 是主事实源：先读仓库 README / README assets，再下结论；不要只看仓库名、star 数或简介标签。
• hero 图优先取仓库自己的 banner / logo / intro 图：如果仓库已经提供官方横幅或介绍图，优先本地化后嵌入，避免外链失效。
• 标题写“结论”不是“对象名”：Q-style 的标题应抽成一句判断（它解决什么、核心机制是什么、价值在哪里），不要把仓库名原样塞进标题。
• 章节结构按“核心结构 → 安装/入口 → 能力栈 → 证据与判断 → 风险边界”组织，比纯 README 镜像更适合网页阅读。
• 移动端验收要做 390px / 窄屏检查：重点看横向溢出、表格/卡片是否可读、右下角保存按钮是否压正文。若用户反馈“像桌面缩小”，不要只看页面内容有没有断行，必须比较 .page 的 computed width、scrollWidth/clientWidth，并在公开 Pages URL 上复核。
• Q-style 评审流程：当用户要求“重新走一遍评审流程”时，按 公开详情页 → 390px 视口 → browser_console 度量宽度 → browser_vision 判断桌面缩小感 → 再修 CSS 的顺序走，不要先在本地自我判断。fixed 保存按钮优先保留，防遮挡靠正文底部 safe-area padding 解决，不要轻易把按钮改成 static。
• 详情和会话笔记见 references/github-repo-q-style-card-note.md。
• 本次技术分析卡的 Q-style 评审坑点见 references/tech-analysis-q-style-pitfall.md。
• 风格优先级必须服从用户明确指令：如果用户点名 infocard-q-style，不要因为内容偏技术就临时切到 infocard-blue-technical-manual-style 或 infocard-main-style；技术分析类内容也可以用 Q-style 承载，但不能替换主题。
• 本次纠偏笔记见 references/tech-analysis-q-style-pitfall.md。

Core Design DNA

• 暖米纸背景
• 黑色厚边框
• 圆角卡片
• 彩色 accent
• pill / chip / emoji 引导
• 看板感、贴纸感、轻编辑感

Color Tokens

• paper: #f8efd9
• paper-2: #fffaf0
• ink: #1d1b16
• muted: #6b6254
• line: #28231d
• green: #9bdc77
• blue: #7cc8ff
• purple: #c7a2ff
• orange: #ffc45c
• yellow: #ffe36e
• red: #ff9a89
• teal: #7de3d6

Layout Skeleton

Q-style 有两种复杂度，必须按内容深度选对：

① 简化版（轻量知识卡）

适用：单主题、快速科普、< 5 个方法点。

hero（kicker + title + subtitle + pills + stats）
intro-grid（2×2 或 4 列，每格一句话）
footer-block 或 callout

② 完整版（rich knowledge card，必须参考 harness-q-style 模板）

适用：多方法体系（10+ 方法）、需要逐条展开理论/用途、四大维度分类。 本 session 翻车教训：简化版做 rich 内容 = "内容太空洞"投诉。

完整结构（直接复制 harness-q-style 的 HTML 结构）:

hero（kicker + title + subtitle + pills + hero-stats 4格 + hero-visual）
section × N（每个维度一章）:
  section-head（section-no 编号 + section-title）
  method-grid（3列 method-card，每卡含 theory + use 双区块）
section（五类露馅规律）:
  case-grid（2列 case-card）
section（经典案例）:
  case-grid（2×2）
section（应用场景）:
  scene-grid（4列 scene-card）
footer-block + callout + source-note
save-btn（右下角固定）

关键教训（2026-06-05）：

• 用户说"内容太空洞"、"风格不对" → 用了简化版做 rich 内容
• 方法数 > 10 个时必须用完整版，每种方法独立 card，含 theory/用途 双区块
• 完整版参考：docs/20260604-revfactory-harness-q-style.html（相对于当前 active repository root） （直接读取该文件获取精确的 class/结构，不要自己凭感觉写）
• 触发词："harness那个风格"、"框架对比"、"方法论总览" → 走完整版

Typography

• Hero：32–72px
• Section：22–38px
• Card title：20–30px
• 正文：13–16px（高密度知识卡建议 ≥13px；视觉分析反馈正文 11px 会导致移动端阅读压力）
• 标签：11.5–12.5px（移动端底线 ≥11.2px）

高密度知识卡字号优先级：

1. 若内容密度高（25+ 方法、五栏对比等），优先改 portrait 比例 + 适当放大正文字号
2. 不要用更小的字硬塞内容——宁可增加滚动屏数
3. 移动端验收时用 vision 检查最小字号层级是否 ≥11.2px

Mobile Rules

• 720px 以下统一单列
• chips / pills 必须换行
• 场景矩阵必须改单列
• 保留卡片实体感，但不要压缩到难读

Anti-Patterns

• 不要做成企业表格
• 不要做成纯瑞士冷静风
• 不要做成赛博黑红档案风
• 不要用极小字硬塞内容

Image Sourcing Protocol (Wikimedia)

图片优先原则： 信息卡（尤其是数学 / 科学 / 技术类）必须使用从 Wikipedia / Wikimedia Commons 抓取的真实图片。自绘 SVG 不可替代真实照片作为「严谨科普」的信号。

标准流程（已知 File:xxx 时，跳过浏览器）：

1. 用 Wikimedia API 直接查 URL：

   import urllib.request, urllib.parse, json
   title = 'File:ForgettingCurve.svg'
   url = (f'https://commons.wikimedia.org/w/api.php?action=query'
          f'&titles={urllib.parse.quote(title)}'
          f'&prop=imageinfo&iiprop=url|size|mime&format=json')
   req = urllib.request.Request(url, headers={'User-Agent': 'Mozilla/5.0'})
   d = json.loads(urllib.request.urlopen(req, timeout=20).read())
   print(next(iter(d['query']['pages'].values()))['imageinfo'][0]['url'])
   

   → 直接拿到 https://upload.wikimedia.org/wikipedia/commons/.../xxx.svg 直链，无需 Referer。
2. curl -L 直链下载：

   curl -L --fail --silent --show-error '直链URL' -o "$DEST/xxx.svg"
   

   SVG 文件通常 < 50KB，file 命令验证 MIME type 确认成功。
3. 只有当 API 查不到 File:xxx 时，才走浏览器路径：CDP 导航到词条 → Runtime.evaluate 提取 upload.wikimedia.org 图片 URL → curl 下载（此时 Referer 头才真正必要）。
4. Wikimedia 确实没有对应图片时，才用手绘 SVG 兜底。

常见 Wikimedia 缩略图规格： 500px-xxx.png（推荐，~50–200 KB）、960px-xxx.svg.png（高分辨率 SVG 渲染）、250px-xxx.png（小图，无更大图时最后选用）

Wikimedia API 反查（如已知 File:xxx 可直接拿 URL）：

python3 -c "
import urllib.request, json, os
UA = 'Mozilla/5.0'
title = 'File:Mandelbrot_set.jpg'
url = f'https://commons.wikimedia.org/w/api.php?action=query&format=json&titles={urllib.parse.quote(title)}&prop=imageinfo&iiprop=url&iilimit=1'
req = urllib.request.Request(url, headers={'User-Agent': UA})
with urllib.request.urlopen(req, timeout=8) as r:
    d = json.loads(r.read())
print(list(d['query']['pages'].values())[0]['imageinfo'][0]['url'])
"

图片 caption 规范

每张信息卡图片的 alt 和 caption 应包含英文名 + 中文名对照：

▲ Dragon Curve / 龙曲线 12 阶迭代（Wikimedia Commons: Dragon_curve_iterations_(2).svg）
▲ Sierpiński Curve / 西尔平斯基曲线（Wikimedia Commons: Arrowhead_curve_1_through_6.png）

格式：▲ 英文名 / 中文名 说明文字（来源: 文件名）