工具集

用 HTML、CSS 与可逐帧定位的动画写视频，命令行预览并渲染成确定性的 MP4；附带产品发布视频、字幕、口播重剪等 agent 技能。HeyGen 官方维护，需要 Node.js 22+ 与 FFmpeg。

HeyGen 官方 HyperFrames 技能集：让 agent 用 HTML、CSS 与动画写出可确定性渲染的 MP4 视频，含产品宣传片、讲解视频、字幕、配乐卡点等创作流程。需要 Node.js 22+ 与 FFmpeg。

生成自包含 HTML+SVG 的杂志风图表：架构图、流程图、时序图、泳道图、甘特图等数十种类型，可读取网站配色匹配品牌，支持导入 Mermaid、draw.io 与 Excalidraw 源文件重绘。

让 agent 生成单文件 HTML 交互式 playground：一侧是可视化控件，一侧是实时预览，底部输出可复制回 Claude 的提示词。内置设计调参、数据探索、概念图、文档批注、代码评审、代码架构图等模板。Anthropic 官方维护。

一句话让 agent 用 HTML 产出高保真可点击原型、可编辑幻灯片、时间轴动画（可导出 MP4/GIF）与信息图，先给三个设计方向再落地，附五维度设计评审。花叔出品，MIT 协议。

把整个网页连同 CSS、图片、字体与脚本内嵌打包成单个 HTML 文件，离线也能原样打开，适合网页存档或交给 agent 离线分析。自身不执行 JavaScript，动态页面需先用无头浏览器预渲染。

把 Markdown、Word 或 PDF 文章排成样式全内联、能直接粘进微信公众号编辑器的 HTML：自动编章节号、标关键词、处理代码块与图片。内置 6 套主题和主题生成器，另有脚本校验公众号的过滤规则。

为品牌、活动、出版物、网页或产品建立独立的视觉语言：从主题本身的语境出发，不参考当下的设计作品，只用字体、颜色与留白做出 10 个相互独立的 HTML 排版方向，由人看过后明确选定一个，再进入第二轮做成可投产的设计系统与成品。不适合日常界面修补、小组件或套用现有设计系统。