vector-cover

用途\nvector-cover 用于生成扁平矢量编辑风格的文章封面插图。封面以代码形式构建：基于少量颜色令牌的扁平 SVG，经渲染与截图输出为 PNG，并非扩散模型生成的图像。\n\n主要能力\n采用默认且可配置的调色板：ink #141413 作为背景画布，ivory #FAF9F5 用于有机斑块与主标题文字，clay #D97757 作为强调色（眉题、分隔线、“unknown”母题），grid 为斑块内部的淡网格，undercurve #E7D9C4 为斑块底部的淡暖色曲线。规则要求恰好一种强调色，眉题用斜体衬线、标题用粗体衬线，仅极小注释使用无衬线字体，深色区域尽量留空，最多 3–5 个低透明度装饰标记；奶油色斑块上的元素需裁剪在斑块内，只有刻意“逃逸”的母题可越出。\n\n默认画布为 1200×480 逻辑像素（2.5:1），以 2 倍渲染输出 2400×960 PNG；方形社交卡片可用 1200×1200，16:9 幻灯片可用 1280×720，并将尺寸传给渲染脚本。布局骨架为左侧约 40% 放文字、右侧约 60% 放斑块与概念母题。\n\n概念母题是封面的核心：每张封面在斑块内用小型线稿图编码文章理念。资料提供的母题库包括：旅程/成长/未知/地图与疆域（上升曲线、实线转虚线、节点圆点、问号与山脉，即模板自带母题）；智能体/系统/网络（5–7 个节点以细线相连，一个节点填充陶土色表示活跃）；架构/层次/栈（3–4 个错位堆叠圆角矩形，一个陶土色描边）；搜索/探索/发现（散点、虚线搜索路径与放大镜环）；权衡/比较（两条曲线交叉，胜者实线、另一方虚线）；流水线/流程（从左到右的小圆阶段以箭头相连，最后阶段为陶土色）；迭代/循环/精炼（螺旋或同心弧收紧至中心点）。母题绘制规则：描边 #141413、2–2.6px、stroke-linecap="round"；空心节点为 fill=ivory stroke=ink，实心节点为 fill=ink；任何“不确定/未来/未知”元素用虚线与陶土色。\n\n使用方式\n从用户获取或从文章推断眉题（可选）、标题（1–2 行短句，自行断行以保持平衡）、主题（据此选母题）和尺寸（默认 1200×480）。复制模板 template.html，已内置令牌、斑块、网格、文字块与旅程母题。仅编辑三个区域：text 节点（眉题/两行标题/分隔线宽度）、CONCEPT MOTIF 组（替换为所选主题母题）、深色区域上的 3–5 个装饰标记；除非刻意重新设计，否则不改斑块路径、网格与令牌颜色。\n\n渲染命令示例：\n.claude/skills/vector-cover/render.sh <in.html> <out.png> [W] [H]\n# e.g. render.sh cover.html cover.png -> 2400x960\n# render.sh cover.html card.png 1200 1200 -> 2400x2400\n\nrender.sh 会自行启动无头 Chrome，无需远程调试端口或浏览器自动化配置。渲染后需目视检查 PNG：确认无内容被裁出画布（逃逸母题应落在深色区域而非被切掉）、文字适配左侧约 40%、斑块不与标题碰撞，并据此迭代坐标。最终交付单张 PNG，工作文件保留在项目文件夹。\n\n要求与限制\n需要 Google Chrome 或 Chromium；render.sh 会在 macOS 标准位置或 PATH 中查找，可通过设置 CHROME 覆盖。无其他依赖，也无需浏览器自动化环境。字体方面，模板使用系统衬线字体栈（Charter/Iowan Old Style/Georgia）；如需像素级精确的编辑观感，可在 HTML 顶部以 base64 data URI 嵌入 @font-face，无头 Chrome 可正常渲染内嵌字体，但因离线渲染不可链接远程字体。资料明确本工具不适用于照片写实、渐变、发光、投影、3D 或纹理，若需求涉及照片则不应使用此工具。需注意离屏裁剪（text 锚点超过 x=1200 或逃逸母题会被切断，应将“unknown”簇保持在斑块右侧深色条带约 x 1120–1195 内）、标题溢出（72px 时每行约 11 字符，更长标题应降至 60px 或增加第三行，并对照斑块左缘约 x498 复查）、网格与斑块边缘（网格裁剪于斑块，可将网格线延伸至斑块边界之外）等常见问题。始终只使用一种陶土色强调色。