---
name: qiaomu-html-cover
description: Create title-first, fixed-size HTML covers and social carousel cards, then capture them as verified PNG screenshots. Use for HTML封面、网页封面、文章头图、公众号封面、小红书/Instagram/TikTok/X/LinkedIn/YouTube/Pinterest 社交封面、知识卡系列、用户明确要求的结构化 SVG 流程/迁移/对照/循环/数值图、editable HTML cover, multiple cover styles, platform safe zones, or ratios such as 21:9, 16:9, 4:5, 3:4, 9:16, 1:1, 4:3, and 2:3. For a multi-card series without a chosen style, first render three representative style screenshots for selection, then lock one typography, palette and graphic system while varying decoration rhythmically. Default cover mode keeps only the title and truly necessary supporting copy; it never invents branding, years, issue numbers, dimensions, style labels, CTA, diagrams, or webpage-like metadata. Knowledge cards and explanatory SVGs are opt-in only. Do not use for ordinary website/app development, standalone icon/SVG drawing, slide decks, image-only generation, existing-page screenshots, or long scrolling articles.
---

# Qiaomu HTML Cover

把 HTML 当作可编辑的制作媒介，最终画面必须像封面，不像网页、仪表盘或设计说明页。默认交付固定画布 HTML、PNG、manifest 和多风格画廊。

## Mandatory Workflow

1. 把当前 `SKILL.md` 所在目录记为 `SKILL_DIR`；先读 [尺寸与比例](references/ratios.md)、[内容适配](references/content-fit.md)、[风格库](references/style-library.md)、[美学门禁](references/aesthetic-gate.md)、[社交信息流门禁](references/social-feed.md)、[解释型图表与 SVG](references/visual-explainer.md)、[内置字体](references/fonts.md)、[系列图工作流](references/series-workflow.md)和[规格格式](references/spec-format.md)。
2. 先定模式：默认 `cover`；只有用户明确说“知识卡片/信息卡”时才用 `knowledge-card`。不得因输入文章很长就把封面升级为信息卡。
3. 建立内容白名单：保留用户标题；可选一个真正增加语义的副标题或署名。默认不创建眉题、页脚、年份、编号、规格、风格名、制作说明或技术标签。
4. 根据用途选 preset。社交平台任务还要应用 `social-feed.md` 的 0.5 秒停留测试、视觉预算和防护带；平台尺寸是带核验日期的工作预设，发布前仍需检查当前上传界面。比例变化必须改变构图和换行，不得把同一布局机械缩放。
5. 单张封面可直接选风格；2 张以上系列图若用户尚未指定风格，必须先用代表性内容生成 3 个 `style-selection` 样张并展示真实截图，等待用户选定后才能继续完整系列。用户点名风格或明确要求跳过选择时除外。
6. 用户选定后用 `series-production` 锁定同一字体、配色、对齐和图形语言；默认只在同一系统内做有节奏的装饰位置、尺度和轻微构图变化，不得每张换一个 style。
   用户明确要求图表/SVG 时，按 `visual-explainer.md` 逐卡判断是否存在值得可视化的顺序、迁移、对照、循环或真实数值；不得为了形式给每张机械加图。
7. 写一份符合 [规格格式](references/spec-format.md)的 JSON，并运行：

```bash
python3 "$SKILL_DIR/scripts/render_covers.py" spec.json --output-dir output --capture
```

8. 检查脚本报告并逐张打开 PNG。普通封面做 2 秒扫描；社交封面额外做手机缩略图下的 0.5 秒停留测试。再检查溢出、平台防护带、遮挡、孤行、比例和留白。系列图还要并排检查：一眼属于同一系列，但装饰不能机械复制。首轮不合格时先删信息、重排或换构图，最后才微调字号。
9. 返回 HTML、PNG、preset、像素、风格和验证结果。除非用户明确只要源码，否则不得跳过截图和人工查看。

## Cover-First Content Contract

- 标题是唯一默认文本，也是视觉所有者。
- 副标题只在它补充“对象、立场或利益点”时保留；“高清截图、多风格、可编辑 HTML”属于制作说明，不是封面内容。
- `cover` 默认 1 个文本角色，最多 3 个：标题 + 最多两个用户明确需要的副标题、署名或元数据。
- `eyebrow`、`highlight`、`footer` 默认禁用；只有用户明确要求且规格设置 `allow_metadata: true` 时才能出现。
- 禁止凭空显示：`QIAOMU DESIGN LAB`、年份、期号、序号、像素尺寸、比例、风格 ID、`HTML/CSS`、`CONTENT × DESIGN × CODE`、`HTML COVER`、制作流程或验收状态。
- HTML 是隐藏的实现方式。不得画浏览器窗口、导航栏、卡片列表、参数表、标签墙、仪表盘或“网页 Hero”组件来证明它是 HTML。
- 装饰必须是非文本图形：默认 1 个主视觉符号 + 最多 1 个辅助纹理/框架。文字不能被当作装饰材料重复、竖排堆叠或铺满背景。
- 多风格版本共享同一内容白名单；不得为了让版本“更丰富”而给每版添加不同伪文案。

## Knowledge-Card Boundary

- 只有明确请求知识卡时使用 `mode: knowledge-card`。
- 卡片可以有 2–6 个短信息单元，但仍须有单一视觉所有者。
- 文章观点很多时拆成系列卡，不把正文缩小塞进一张封面。
- 系列卡先选方向再扩展：样张阶段比较风格，生产阶段锁定风格并使用可控版式变奏。
- 用户说“封面、头图、海报”时始终按 `cover` 处理，不因画布是 HTML 就使用网页信息架构。

## Design And Verification Rules

- 固定像素画布、自包含 CSS；默认只使用随 Skill 分发的常规 OFL 中文黑体/宋体并复制到输出 `fonts/`，不依赖远程字体、图库或外部请求。毛笔、卡通、窄体、斜体与实验字体不得自动启用。
- 主标题不得被装饰穿过或与背景同色；不得出现末行单字、意外裁切或安全区不足。多行标题行高不得低于 `1.08`，常规封面优先 `1.12–1.18`，社交系列知识卡优先 `1.18–1.24`。副标题与强调语中的中文词组不得被拆成两行。
- 2 秒扫描：第一眼只能先看到标题或唯一主视觉，不能同时出现三个同等响亮的区域。
- 社交停留测试：约半秒内只能有一个第一视觉所有者；短钩子、人脸、饱和强调、节奏中断和高对比是可选机制，不得全部堆叠，也不得自动生成无关人脸。
- 缩略图测试：缩至原宽 10% 时仍能识别主题和标题层级；细节消失后构图仍成立。
- 灰度测试：去掉颜色后，标题、主视觉和背景仍有清楚的主次。
- 边缘巡检：四边不得出现无法解释的线头、贴边细弧、意外切线或裁切碎片；装饰必须能归入结构锚点、环境色场或强调印记。
- 平台巡检：Story/Reel/TikTok 等 UI 覆盖面启用保守防护带；Logo、页码和 CTA 仅在用户明确要求时出现。
- 图表巡检：默认不生成；用户授权后每张最多一个结构化解释图，图表讲关系、标题讲结论；`caption` 是最多两行的关系注释，不是微型脚注。不得复读、假造数值或注入任意 SVG。
- 风格差异不得只靠换色；但视觉复杂度不得超过内容复杂度。

## Gate Ladder

- 输入门：内容、用途、比例可确定；URL 内容已合法获取。
- 内容门：默认只有标题；其他文本均能追溯到用户明确输入或请求。
- 风格门：未指定方向的多张系列先交付 3 个真实样张并等待选择；不得直接把多风格候选当成系列成品。
- 系列门：生产阶段只有一个锁定 style；字体、配色、对齐一致，variant 只改变装饰位置与节奏。
- 简洁门：`cover` 文本角色不超过 3；无伪品牌、伪年份、伪编号、规格和制作说明。
- 画布门：固定尺寸、无滚动条，preset 与 PNG 一致。
- 停留门：社交画面 0.5 秒内只有一个第一视觉，总视觉元素默认不超过 3 个；副标题默认不超过 2 行。
- 视觉解释门：`visuals.enabled` 必须显式开启；节点不超过 4，柱状图数值可追溯；可变标签默认位于闭合形状外；关系注释必须通过字号、字重、透明度、纯色背景对比度、锚点距离、两行和居中检查；图形还须通过标签间距、短编号内边距、画布边界与平台安全区检查。
- 渲染门：临时 Chrome/Chromium 截图成功，DOM 边界、标题行高、字体加载与 PNG 头校验通过。
- 视觉门：通过 2 秒扫描、缩略图、灰度、孤行、遮挡和留白检查。
- 输出门：HTML、PNG、manifest、gallery 齐全；临时浏览器配置已清理。

## Trust, Output And Evidence

- 默认离线；不上传原文，不读取 Cookie，不复用用户浏览器 Profile。
- 只写用户指定输出目录；已有同名文件使用安全后缀。
- 成功交付 `manifest.json`、一个或多个 HTML/PNG、所需离线字体及许可证和 `gallery.html`；部分失败时保留通过项并报告具体阶段。
- 自动化能证明文本角色数量、尺寸、浏览器截图和基础溢出；审美仍需人工查看。独立盲评与 Windows/Linux 实机仍是 `missing evidence`。

Copyright (c) 向阳乔木 · [X](https://x.com/vista8) · [GitHub](https://github.com/joeseesun/)