---
name: neutral-svg-cover
description: Use when a webpage, card, skill, guide, template pack, or downloadable resource needs a clean neutral SVG cover image, especially when source screenshots or PDFs contain names, paths, UI chrome, or other details that should not be published directly.
---

# Neutral SVG Cover

## Overview
用这个 skill 生成**中性、可公开发布**的 SVG 封面图，适合网页卡片、专题入口、模板页、资源页和下载页。
核心原则是：**优先重建，不直接截图复用**。如果原始素材带作者名、路径、平台界面、二维码、聊天记录或其他敏感信息，就改用中性图形语言重画。

## When to Use
- 需要给网站卡片、专题页、资源页补一张封面图
- 原始 PDF / 截图有敏感标识，不能直接公开
- 需要快速做一张 16:9 的 SVG 预览图
- 希望封面和站内卡片风格统一：柔和背景、渐变强调、三段式信息结构

## Workflow
1. 先判断是否需要脱敏重建
2. 抽取真正要表达的内容：标题、副标题、三步结构、底部标签
3. 选一套中性色背景 + 强调色渐变
4. 用脚本生成 SVG，再按页面实际效果微调

## Quick Start
```bash
python3 ~/.codex/skills/neutral-svg-cover/scripts/make_cover.py \
  --title "VibeCoding" \
  --badge "复杂需求专题" \
  --subtitle "复杂需求 → 文档化 → 一次写对" \
  --description "适合需求模糊、约束多、方案不唯一的项目" \
  --step "先讨论|问清边界、约束、风险和决策点" \
  --step "再文档化|流程图、表格、Memory 与交付清单" \
  --step "最后编码|降低返工，让实现更稳" \
  --chip "需求澄清" \
  --chip "工作流" \
  --chip "Memory 与清单" \
  --output /tmp/example-cover.svg
```

## Script
使用 `scripts/make_cover.py` 生成 SVG。

**最常用参数：**
- `--title`：主标题
- `--badge`：左上角胶囊标签
- `--subtitle`：主副标题行
- `--description`：标题下说明语
- `--step`：三段步骤卡，格式为 `标题|正文`
- `--chip`：底部标签，可重复传入
- `--theme`：`warm`、`cool`、`violet`
- `--output`：输出 SVG 路径

如果想看完整参数：
```bash
python3 ~/.codex/skills/neutral-svg-cover/scripts/make_cover.py --help
```

## Design Rules
需要理解为什么这样画、什么时候不要直接复用原截图时，读：
- `references/design-rules.md`

## Common Mistakes
- **直接用原截图**：如果截图里有作者名、路径、聊天界面、后台信息，优先重建
- **文案太长**：主标题尽量短，副标题控制在一行或两行内
- **结构太散**：优先保留 3 个核心步骤，不要把整篇文章全塞到封面里
- **颜色太花**：背景保持浅色，强调信息交给 1 组渐变和 2-3 个浅色卡片
- **把封面当海报**：封面图的任务是快速识别，不是承载全部细节

## Output Pattern
一张高质量中性封面通常包含：
- 左上角标签
- 一个大标题
- 一句副标题
- 一句简短说明
- 三个并列信息卡
- 2-4 个底部标签

## Example Asset
- `assets/example-cover.svg`：脚本生成的示例封面
