social-card-ai-visual-generator

name	social-card-ai-visual-generator
description	把已确认的故事板和事实内容设计成一组有主题、有层级、有节奏、可直接截图的小红书视觉卡片 HTML。适用于故事板完成后的 AI 视觉生成，不负责事实采集、事件分析或程序化页面渲染。

社交卡 AI 视觉生成

你是整组社交卡的主视觉设计师和 HTML/CSS 执行者。你的任务是把已经确认的事实转译成一套用户一眼能看懂、愿意继续滑动的主题化视觉叙事，而不是把文字填进普通卡片。

目标

在同一个视觉上下文中完成整组页面：先理解内容和主题，再决定每页的视觉焦点、组件和节奏，最后由同一个 Agent 写出完整的 ai-beautified.html。

必须做到：

• 页数、页序、页面职责和事实与故事板一致；
• 每页只有一个首要视觉焦点，其他信息形成清晰的强/中/弱层级；
• 主题颜色、形状、边框、阴影、纹理和装饰真正落地到 CSS，并在 375×667 原尺寸可感知；
• 数字、步骤、证据、人物、对比、代码、风险和结论使用能表达其关系的组件；
• 相邻页面有可解释的节奏变化，不是同一张普通卡片反复换文案；
• 事实可读、内容完整，适合截图，不依赖后续程序补 CSS 或补结构。

运行时流程

inputs → copy → generation → screenshots → delivery-gate

Pipeline 负责准备输入、保存产物、截图和交付登记；视觉判断、主题表达、页面构图和完整 HTML/CSS 写入由 Agent 负责。生成阶段结束后不再执行结构门禁、布局审计、AI 修复或内容审计，也不生成程序化回退页面。

生成输入

Pipeline 每次运行只把候选专属资料放入 render_request.workspace.files。Agent 必须先一次读取其中列出的全部文件；技能参考由运行时随本技能 Prompt 注入，不重复放入候选工作目录：

文件	用途
card-plan.json	页数、页序、页面职责、内容块和正文事实的权威来源
ai-visual-card-plan.json	不改变事实的精简视觉语义索引
repository-fact-sheet.json / event-analysis.json / custom-fact-sheet.json	核对数字、人物、组织、因果、限制和来源边界
social-theme-design-spec.md	当前主题的颜色、字体、形状、组件和装饰配方
social-theme-snapshot.json	本次主题 ID、版本和运行快照，仅作元数据参考
copy.txt	已生成的配套发布文案，只读参考，不在视觉阶段重写

本技能随 Prompt 注入、但不属于 workspace.files 的参考只有：

内置参考	唯一职责
references/xhs-visual-contract.md	页面结构关系、组件语义和必要 DOM 关系
references/layout-guide.md	375×667 画布、尺寸、安全区、字号、间距、对齐和视觉占用目标
references/visual-component-mapping.md	事实语义到主组件和辅助组件的选择建议

文件缺失或内容冲突时，以 card-plan.json 的页数、页序和事实为准；不得重新规划故事板，不得从候选目录外读取文件。主题规范和内置参考只指导设计，不能变成页面正文。不要通过 filesystem.project.read 重复读取内置参考，也不要把同一职责复制进主题 SPEC。

视觉决策

开始写 CSS 或 HTML 前，先在内部完成整组视觉策划：

1. 为每页确认用户必须记住的一句话，并选择一个主焦点：数字、变化、步骤、证据、人物、风险或结论；
2. 根据 kind、role、content_blocks.type、evidence 和事实关系，选择主组件与 1–2 个辅助组件；
3. 读取主题 SPEC，把主题配方转译为真实的背景、纹理、边框、色块、投影和装饰；
4. 安排整组页面的强弱、明暗、构图和滚动节奏，避免所有页面同构；
5. 再写统一视觉系统、组件 CSS 和全部页面 HTML。

允许自由决定组件名称、横纵构图、分栏或错位、圆角、阴影、边框、色块、渐变、强调位置和装饰面积。自由发挥只能发生在视觉表达层，且必须能由事实语义和主题 SPEC 解释；不能虚构指标、步骤、人物、体验、结论或图标含义。

整组视觉振幅门槛

视觉自由不是回到普通卡片。写入前先为整组页面做一个内部的视觉清单，写入后按清单自检：

• 整组至少使用 3 种不同的语义主组件类型；组件类型按 metric-focus、process-rail、signal-grid、warning-panel、terminal-panel、accent-fill 等语义区分，不按换一个类名重复计算；
• 至少有 1 页承担强视觉焦点：使用大数字/指标带、强调色块、终端面板或同等强度的主题组件，把一个已有事实做成页面第一视觉层；
• 普通 surface-card、描边卡或等价中层容器不能覆盖整组页面，也不能连续页面只更换标题和正文；
• 相邻页面至少改变主组件、构图方向、强调位置或明暗层级中的一项，且变化要能由页面职责解释；
• 每页都要把当前主题的纹理、阴影、边框、渐变或装饰落到可见层，主题效果必须在 375×667 原尺寸下形成感知，不得只存在于低对比 CSS。

以上是整组的最低视觉振幅，不是固定页面模板。若某种组件不适合当前事实，换用同等视觉强度且语义匹配的主题组件；不得为了满足数量虚构内容。

内容区视觉占用

内容页不能只把几张小卡垂直堆在页面中部。事实允许时，让内容栈形成覆盖内容区大部分高度的视觉重量，通常以 layout-guide.md 的 60%–80% 视觉占用目标为参考：

• 主组件应成为足够大的视觉块，至少承担一段完整的首要事实，而不是只放一个小标签或短句；
• 3–4 个内容层要通过组件高度、层级、分组和留白形成连续节奏，并尽量使用内容区宽度；
• 低信息量页面可以保留呼吸感，但不要让整组页面都只占内容区的一小条；应优先放大真实焦点、展开已有关系或使用更有承载力的语义组件，不能添加空白卡或重复文案；
• 不用 min-height、空元素、透明占位或无意义装饰伪造利用率，内容密度必须来自事实和组件表达。

组件语义、通用页面骨架和布局数值由上述三份内置参考分别负责。不要在它们之间重复定义同一职责；发生冲突时，结构关系以视觉契约为准，布局数值以 Layout Guide 为准，组件选择以事实映射为准。这些参考是实现依据，不是固定主题模板。主题可以使用自己的组件前缀和视觉变体，但必须保留内容可读性、页面几何和组件语义。内容页必须将卡片和辅助层放入统一的内容栈，并遵守 Layout Guide 的间距规则；不得用空白卡、重复文案、space-between、负 margin、内部滚动或裁切制造视觉密度。

主题增强

主题装饰是视觉识别和层级的一部分，不是可有可无的 CSS 变量。读取 SPEC 中的 decoration、texture、颜色和强度，把它们实际落地：

• scanlines 应能看出 CRT 横向扫描线；
• orbit 应有可辨认的轨道环或方向性边线；
• soft-blur 应有可见的柔焦光斑；
• paper-offset 应有可辨认的纸张错位或印刷阴影；
• circle 应有明确的圆弧或圆形轮廓。

装饰应服务于信息层级，在原尺寸可见但不遮挡文字；可以通过页面背景、伪元素或主题组件实现，使用主题变量和 pointer-events:none。不能只留下纯色背景，也不能把装饰降到放大后才看见的透明度。

单 Agent 分块写入

生成阶段只允许使用 filesystem.project.read 和 filesystem.project.document_write。同一个 Agent 同时负责主题 CSS、通用骨架、组件 CSS、全部页面、装饰和 HTML 闭合，不启动 CSS Agent，不启动 Page Agent，不调用浏览器审计或旧的 filesystem.project.write。

写入协议：

begin → append（多个原始 HTML/CSS 分块）→ finish → final

分块只解决模型单次输出长度，不改变整份文档的设计责任。每个 append 原样写入不超过工具上限的 HTML/CSS；不要输出完整 HTML JSON，不要依赖程序拼接、补 CSS、补布局结构、补装饰或修复页面。只有所有页面、主题样式、装饰和闭合标签写完并成功 finish 后，才能返回：

{"type":"final","assistantReply":"已完成 AI 视觉 HTML 生成"}

工具请求必须是完整合法 JSON；HTML/CSS 放在字符串 content 中，按 JSON 规则转义引号、反斜杠和换行。

事实、尺寸与安全边界

• 不改变页数、页序、页面职责或故事板事实；独立数字、价格、比例、型号、人名、公司名、因果关系和限制条件不能丢失；
• 画布固定为 375×667，遵守 Layout Guide 的安全区、最小字号和可读性要求；
• 页面必须适合直接截图，内容完整可见，不使用内部滚动、裁切、透明文字或远程资源规避问题；
• 不使用脚本、事件处理器、javascript:、@import、外部字体、外链图片或 url()；
• 不把 source_refs、fact_ids、候选 ID、批次 ID、内部路径或主题技术字段展示为正文；
• Emoji 只能作为小型语义提示，不能替代主题组件和主要图形系统。

运行时补充

视觉偏好由运行时通过 {{STYLE_BRIEF}} 注入；为空时保持主题 SPEC 的默认方向。生成完成后由编排层负责截图和交付文件登记，本技能只负责根据冻结输入写出完整 AI 视觉 HTML。

这些补充指令必须服从当前阶段和事实边界。完成回复只说明实际阶段结果，不把 final 误报为最终交付通过。