name: Science-Card description: 科学知识卡片生成器。将科学主题/概念制作成精美的 JPG 科普卡片，含手绘风格背景、认知引子、知识来源、日期和配乐推荐。触发场景：用户提到"知识卡片"、"科普卡片"、"做成卡片"、"生成知识卡"或希望将知识点可视化封装。不适用于：长文报告生成、数据图表制作、纯文本笔记整理。

Science-Card v7 — 科学知识卡片生成器（JPG + HTML 双格式版）

架构概览

JPG渲染流水线：JSON 卡片数据 → card_builder.py → WeasyPrint PDF → pdftoppm JPG
HTML渲染流水线：JSON 卡片数据 → html_card_builder.py → self-contained HTML

核心模块：
  ├── 🧠 design_thinker.py — 设计思维链引擎（内容分析→色彩心理学→美学规则→随机采样）
  ├── 🖼️ 插图提取与嵌入（从PDF/图片提取代表性插图嵌入封面与内容页）
  ├── 🎯 显式暗色头部背景（保障 WCAG AA ≥4.5:1 对比度）
  ├── 📐 统一卡片高度
  ├── 🎨 内容设计官（生成前数据审查）、排版设计官、质量检查官
  ├── 🌐 html_card_builder.py — HTML 生成引擎（v7 新增，零依赖）
  └── 🔗 提供下载链接（HTML文件可通过 ima_cos_util 上传获得下载链接）

依赖（JPG模式）：Python 3.12, WeasyPrint, Pillow, pdftoppm (poppler-utils)
依赖（HTML模式）：Python 3.12，无额外依赖

输出：
  - JPG 模式：2160×N px 高分辨率 JPG（Retina 2x），每套2张（封面+内容卡）
  - HTML 模式：self-contained HTML 文件，含内联CSS+JS，每套1个文件

文件结构

Science-Card/
├── SKILL.md                      ← 本文档
├── references/aesthetics-reference.md  (配色/排版/设计原则参考)
├── assets/
│   ├── card-template.html         ← WeasyPrint JPG 用模板
│   └── card-html-template.html    ← HTML 卡片参考模板（v7 新增）
└── scripts/
    ├── card_builder.py            ← 主程序（v7 - 新增 --html/--web-images 参数）
    ├── html_card_builder.py       ← HTML卡片生成引擎（v7 - 集成网络图片搜索）
    ├── web_image_searcher.py      ← 网络图片搜索与下载模块（v7 - 新增）
    ├── design_thinker.py          ← 设计思维链引擎
    ├── background_illustrator.py  ← SVG背景插画/装饰/图标生成
    ├── quality_guardians.py       ← 三位一体质量审查体系
    └── quality_controller.py      ← 旧版QC（自动修复保留）

三大核心改进

1️⃣ 统一卡片尺寸

所有卡片（封面/内容/方卡）统一使用内容页智慧高度标准，不再使用固定尺寸：

• 封面：1080 × 智慧高度（原为固定 1080×1920）
• 内容卡：1080 × 智慧高度（不变）
• 方卡：1080 × 智慧高度（原为固定 1080×1080），使用紧凑排版变体（缩小字体/间距）
• 智慧高度由 estimate_content_height() 动态计算（700~1920px）

2️⃣ 设计思维链引擎 (design_thinker.py)

四阶段设计推理管线，无需手动指定配色：

内容分析 → 色彩心理学映射 → 美学规则约束 → 随机数采样

第一阶段：内容分析 - 6个预设类别+3个扩展类别的关键词匹配引擎 - 输出：类别、基础主题、情感效价(0~1)、形式性(0~1)、复杂度(0~1) - 文本语料：标题+标签+引子+原理+要点+关联的综合分析

第二阶段：色彩心理学 - 6大主题色系的HSL色彩心理学映射表（含色相/饱和度/明度基准） - 情感效价→明度调节：积极+6%，严肃-6% - 形式性→饱和度调节：正式-8%，轻松+8% - 复杂度→色相偏移：高复杂度+3°色相偏移 - 每项输出附带人类可读的设计理由

第三阶段：美学规则约束 - 60-30-10 黄金配色比例 - 渐变角度 145°～165° 对角线 - 高亮色为暖色调（R > B）验证 - 可读性最低对比度 4.5:1 - 光晕位置基于黄金分割预置 - 点阵间距60~100px随机化 - 字体大小根据复杂度微调

第四阶段：随机数采样 - 内容Hash → 稳定种子（同内容每次生成相同结果） - 每项参数在安全范围内随机扰动（色相±2° 饱和度±2% 明度±1%） - 光晕位置随机微调 ±3%

无需手动指定 cover_colors，系统自动生成完整设计方案，并打印设计决策报告。

3️⃣ 插图提取与嵌入

当知识来源有图片/PDF插图时，自动提取并嵌入卡片：

提取逻辑 (extract_illustration_from_source())： - PDF：pdftoppm 提取前3页，取最佳页面 - 图片(PNG/JPG)：智能中心裁剪→缩放至400×400 - 过滤：小于5KB的视为无效

嵌入位置： - 封面页：替换中央图标区，140×140圆角，半透明毛玻璃背景 - 内容卡：头部右侧，80×80圆角小插图 - 方卡：头部右侧，80×80圆角小插图

使用方式：JSON数据中增加 "_extracted_illustration" 字段，或CLI参数 --illustration-source <path>

主题系统

6 个预设配色主题（同上版），新增设计思维链动态微调：

设计思维链自动选择：JSON中未指定 theme 和 cover_colors 时，系统自动分析内容类别并匹配最合适的主题。

卡片数据 JSON schema

{
  "title": "必填。卡片标题",
  "subtitle": "选填。副标题",
  "tag": "选填。分类标签，如\"🧬 进化生物学\"",
  "theme": "选填。默认自动检测。可选值: default/nature/science/warm/elegant/ocean",

  "tagline": "选填。封面中间的高亮短文案",
  "title_highlight": "选填。标题中需要金色高亮的词",
  "hook": "选填。认知引子",
  "key_insight": "选填。核心洞见",
  "key_points": "选填。简单版要点列表（旧格式，向后兼容）",
  "key_point_details": "选填。新版要点列表（推荐），每个元素含 point(标题)+summary(摘要介绍），如：{\"point\":\"三大革命框架\",\"summary\":\"认知革命让历史启动...\"}",
  "principle": "选填。底层原理",
  "action_insight": "选填。学以致用",
  "related": "选填。关联概念列表",
  "related_en": "选填。关联概念英文对照",

  "source": "选填。知识来源",
  "series": "选填。系列名称，如"进化生物学"。显示在封面顶部",

  "cover_icon_svg": "选填。封面中央图标（SVG），不填则用主题默认",
  "header_icon_svg": "选填。内容卡头部图标（SVG），不填则用主题默认",
  "cover_colors": "选填。配色覆盖（不填则设计思维链自动生成）",

  "_extracted_illustration": "选填。提取的插图路径（嵌入封面和内容卡）",
  "illustration_source": "选填。PDF/图片源文件路径，配合 illustration_pages 自动提取插图",
  "illustration_pages": "选填。PDF页码范围，如'18-23'，仅在此范围内搜索插图",
  "topic_key": "选填。输出文件名标识"
}

输出卡片结构（v6 简化版）

每套输出 2张卡片（封面 + 内容卡），尺寸完全一致：

封面页（10层视觉架构）

由底到顶，层层叠加：

10  📄 文字层（标签 → 标题(高亮词金色) → tagline → 分割线 → 副标题 → 来源）
 9  🖼️ **提取插图层**（可选，140px 毛玻璃圆角容器，替代SVG图标）
 8  🎯 中央图标盒（无插图时，150px 毛玻璃圆角容器 + 120px SVG图标）
 7  📐 四角几何装饰框（L形线条 + 端点圆点）
 6  🌊 底部波形装饰曲线（两层波浪，设计思维链高亮色）
 5  🔵 彩色光晕 ×6团（设计思维链优化布局，基于黄金分割）
 4  ⚪ 点阵网格（设计思维链动态间距60~100px）
 3  📄 纸张纹理 (4% opacity)
 2  🖼️ 大幅SVG主题插画（设计思维链动态透明度30~45%）
 1  🎨 渐变底色 + 双层径向光晕（设计思维链角度145~165°）

内容卡片

┌─ card-header（设计思维链渐变色）──────────────┐
│  🖼️ 提取插图(可选/右) │ 🏷️ 分类标签        │
│  标题（大号白色）                             │
│  副标题                                      │
│  ┌─ ◆ ▶ 核心洞见 ────────────────────┐     │
│  │  核心洞见内容……                     │     │
│  └────────────────────────────────────┘     │
├─ card-body（白色渐变背景）───────────────────┤
│  ▶ 认知引子（高亮色边框文本框）               │
│  ● 关键要点 ① ② ③ ④（编号徽标）             │
│  ◈ 底层原理                                  │
│  ◎ 学以致用（高亮色左边框）                   │
│  ∞ 关联概念 · 中文 (English)                │
├─ card-footer ──────────────────────────────┤
│  📚 知识来源 │ 📅 日期 🎵 配乐 署名          │
└────────────────────────────────────────────┘

CLI 命令

# 1. 【JPG】生成完整卡片集（2张统一竖版智慧高度：封面+内容卡）
python3 card_builder.py \
  --input card_data.json \
  --format card-set \
  --output my-card

# 2. 【HTML】生成交互式 HTML 卡片集（推荐，零依赖）
python3 card_builder.py \
  --input card_data.json \
  --html \
  --output my-card

# 3. 从PDF/图片提取插图并生成卡片（指定页码范围）
python3 card_builder.py \
  --input card_data.json \
  --format card-set \
  --output my-card \
  --illustration-source /path/to/source.pdf \
  --illustration-pages "18-23"

# 4. 快速生成（不写JSON，自动设计思维链配色）
python3 card_builder.py \
  --title "标题" \
  --hook "认知引子..." \
  --format card-set \
  --output my-card

# 5. 【HTML】快速生成（直接 json 字符串）
python3 html_card_builder.py \
  --json '{"title":"量子纠缠","theme":"science"}' \
  --output quick-card

# 6. 【HTML】自动搜索网络图片（推荐，自动配图）
python3 card_builder.py \
  --input card_data.json \
  --html --web-images \
  --output my-card

# 7. 【HTML】直连搜索网络图片（跳过AI辅助，纯自动）
python3 html_card_builder.py \
  --json '{"title":"量子纠缠","theme":"science"}' \
  --web-images --output my-card

工作流程

Phase 0：询问系列名称

• 必须在开始执行任务时，先询问用户："请问这张知识卡片属于哪个系列？（如：进化生物学、量子物理、经典文学...）"
• 根据用户的回答，设置为 series 字段值
• 该字段将显示在封面顶部："知识卡片：xxx系列"，下方显示当前日期 YYYY/MM/DD

Phase 1：内容理解

• 明确主题后直接进入 Phase 2

Phase 2：信息增强

• 搜索 web + 知识库，至少 2 个来源交叉验证
• 提取：核心定义/关键要点(3-5条)/底层原理/启发意义/关联概念

Phase 2.5：设计思维链（自动）

• 系统自动执行四阶段设计推理：内容分析→色彩心理学→美学规则→随机采样
• 在控制台打印完整设计决策报告
• 除非有特殊要求，无需手动指定配色

Phase 3：构建 JSON 数据

• 构建完整 JSON，关键字段：title_highlight/tagline/key_insight/related_en
• 如源材料有代表性插图，使用 --illustration-source 参数

Phase 4：生成卡片

• 使用 --format card-set 输出 JPG 卡片，或使用 --html 输出 HTML 卡片
• 优先推荐 HTML 模式（更快、零依赖、可交互、文件更小）
• HTML 模式下推荐加 --web-images 自动搜索网络图片配图
• 如果需要同时两种格式，先执行 JPG 模式再执行 HTML 模式
• HTML 模式可跳过 Phase 2.5（设计思维链）直接运行

Phase 5：交付确认

• 提供下载链接（JPG 或 HTML 文件）
• HTML 文件通过 ima_cos_util -f <html文件路径> 上传获得下载链接
• 告知配乐推荐和设计思维链决策摘要（仅 JPG 模式）
• 询问是否需要调整

三位一体质量审查体系

Science-Card v6.2 设立了三位专职审查官，分别在生成前、生成中、生成后把关，确保高质量交付：

🎨 内容设计官（Content Designer）

工作时机：卡片生成前，审查输入数据

严重度说明：S=必填项缺失将影响生成，A=缺少会降低内容质量但能生成

📐 排版设计官（Layout Designer）

工作时机：卡片生成后，逐张检查视觉质量

🔍 质量检查官（Quality Inspector）

工作时机：全部卡片生成完成后，交付前最终审查

执行流程

输入JSON数据
     ↓
🎨 内容设计官（生成前审查）
    ├── 检查数据完整性
    ├── 检查内容框架质量
    └── 输出优化建议
     ↓
卡片生成（cover + content-a + content-b）
     ↓
📐 排版设计官（逐卡审查）
    ├── 测量每张卡视觉指标
    ├── 标记不合格项
    └── 触发修复流程（旧版QC自动修复）
     ↓
🔍 质量检查官（最终审查）
    ├── 全面文件审计
    ├── 尺寸一致性验证
    └── 综合结论
     ↓
✅ 高质量交付 / ⚠️ 标记问题需改进

质量自查清单

每次运行前检查以下项目，确保设计数据满足内容设计官要求： - [ ] 封面标题有金色高亮(title_highlight)？ - [ ] 封面有 tagline 短文案？ - [ ] 有插图时封面用插图替代了抽象图标？ - [ ] 内容卡顶部有核心洞见(key_insight)？ - [ ] 要点使用详情版(key_point_details)带摘要说明？ - [ ] 关联概念有中英文对照(related_en)？ - [ ] 页脚有"卡片制作：客观思考者"？ - [ ] 所有图标是Unicode符号（非SVG）？ - [ ] 自检报告无错误/警告？ - [ ] 仅2张卡片（封面+内容），无方卡？ - [ ] 两张卡片尺寸一致（智慧高度统一）？ - [ ] 头部背景色 WCAG AA ≥4.5:1 对比度达标？ - [ ] 设计思维链输出合理的配色理由？ - [ ] 配乐告知用户？

🌐 HTML 卡片生成（v7 新增）

Science-Card v7 新增 HTML 格式卡片生成功能，与原有的 JPG 格式形成互补：

使用方式

# 方式1：从 card_builder.py 使用 --html 参数（推荐）
python3 card_builder.py \
  --input card_data.json \
  --html \
  --output my-card

# 方式2：直接调用 html_card_builder.py
python3 html_card_builder.py card_data.json \
  --output my-card

# 方式3：内联 JSON 快速生成
python3 html_card_builder.py \
  --json '{"title":"人类进化简史","theme":"vibrant_sunset","tag":"🧬 进化生物学"}' \
  --output quick-card

输出文件

生成一个 self-contained .html 文件，包含： - 封面卡片：带有渐变背景、标签、标题、tagline、插图、来源、日期 - 内容卡片：带有认知引子、关键要点（交互式展开/折叠）、底层原理、学以致用、关联概念 - 控制栏：顶部有「打印/导出PDF」按钮 - 所有 CSS 和 JS 内联在 HTML 中，无需外部网络请求

交互特性

🌐 自动网络配图（--web-images）

HTML 卡片支持自动搜索知识相关图片并嵌入卡片，提高视觉吸引力。

工作流程：

小葱技能站7w4.net，专业的AI技能分享平台。

使用方式：

# 推荐：通过 card_builder.py
python3 card_builder.py --input data.json --html --web-images --output my-card

# 直接调用 html_card_builder.py
python3 html_card_builder.py --input data.json --web-images --output my-card

配图效果： - 封面：120×120px 圆角插图，外层毛玻璃+白色边框+强阴影，确保深色背景上高对比度可见 - 内容卡：max-width 100% 带背景边框的全宽插图（位于认知引子和关键要点之间） - 两张卡片每张都有配图——即使只找到1张图也会复用给两张卡片 - 每张图标注图片来源（Wikipedia / Wikimedia Commons / Clipsafari 等）

对比度优化（v7.2）： - 封面插图：img-wrapper 毛玻璃背板（backdrop-filter: blur）增强与深色背景的分离感 - 封面插图：3px 白色半透明外框 + 2px 白色边框 + 0 8px 32px 强阴影，确保任何色彩图片在深色背景下都清晰可见 - 内容卡插图：浅色背景边框 + 图片边界线，与白色卡片背景形成层次感

与 JPG 模式的关系

• HTML 模式不依赖 WeasyPrint/pdftoppm，任何环境均可运行
• HTML 模式会跳过 design_thinker 设计思维链和三位一体审查（因为这些是 JPG 生成流程的一部分）
• 建议使用场景：
• 快速预览/分享 → 用 HTML 模式
• 印刷/嵌入文档 → 用 JPG 模式
• 日常使用 → 优先 HTML 模式（更快、更小、可交互）
• 用户可要求同时生成 JPG + HTML 双版本

这个 Skill 质量不错，能自动生成精美的科学知识卡片，配色和排版都有专业设计考量，还带完整的质量检查。卡片支持深浅色主题，效果比较精致。不足之处是生成图片版本需要安装较多软件依赖，配置起来稍麻烦；文档内容较丰富但对新用户不太友好，首次使用需要一定学习成本。总体来说功能完整、品质较高，适合对卡片美观度有要求的用户。