joeseesun Qiaomu HTML Cover
把 HTML 当作可编辑的制作媒介，最终画面必须像封面，不像网页、仪表盘或设计说明页。默认交付固定画布 HTML、PNG、manifest 和多风格画廊。
Mandatory Workflow
- 把当前
SKILL.md所在目录记为SKILL_DIR；先读 尺寸与比例、内容适配、风格库、美学门禁、社交信息流门禁、解释型图表与 SVG、内置字体、系列图工作流和规格格式。 - 先定模式：默认
cover；只有用户明确说“知识卡片/信息卡”时才用knowledge-card。不得因输入文章很长就把封面升级为信息卡。 - 建立内容白名单：保留用户标题；可选一个真正增加语义的副标题或署名。默认不创建眉题、页脚、年份、编号、规格、风格名、制作说明或技术标签。
- 根据用途选 preset。社交平台任务还要应用
social-feed.md的 0.5 秒停留测试、视觉预算和防护带；平台尺寸是带核验日期的工作预设，发布前仍需检查当前上传界面。比例变化必须改变构图和换行，不得把同一布局机械缩放。 - 单张封面可直接选风格；2 张以上系列图若用户尚未指定风格，必须先用代表性内容生成 3 个
style-selection样张并展示真实截图，等待用户选定后才能继续完整系列。用户点名风格或明确要求跳过选择时除外。 - 用户选定后用
series-production锁定同一字体、配色、对齐和图形语言；默认只在同一系统内做有节奏的装饰位置、尺度和轻微构图变化，不得每张换一个 style。 用户明确要求图表/SVG 时，按visual-explainer.md逐卡判断是否存在值得可视化的顺序、迁移、对照、循环或真实数值；不得为了形式给每张机械加图。 - 写一份符合 规格格式的 JSON，并运行：
python3 "$SKILL_DIR/scripts/render_covers.py" spec.json --output-dir output --capture
- 检查脚本报告并逐张打开 PNG。普通封面做 2 秒扫描；社交封面额外做手机缩略图下的 0.5 秒停留测试。再检查溢出、平台防护带、遮挡、孤行、比例和留白。系列图还要并排检查：一眼属于同一系列，但装饰不能机械复制。首轮不合格时先删信息、重排或换构图，最后才微调字号。
- 返回 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。