dayuhtml 技能包：可编辑 HTML 动画，用法与提示词教程
分享本文章获佣金想把一组数据做成动态图表，或把一句标题做成有节奏的文字动画，可以把需求交给装有 dayuhtml 技能的 AI 编程工具。它会以现有参考框架为起点，生成一个能在浏览器里继续编辑的 HTML 文件。
这次将 dayuhtml 整理为完整下载包，并附上安装说明、通用提示词和四类场景示例。资源售价 99 元，鱼粉会员免费。 在本文资源下载区域获取技能 ZIP；安装和用法详见下文。
框架保留画布直接编辑、参数面板、播放控制和图层排序。修改完内容，可以保存可继续编辑的 HTML，或导出 MP4、PNG 和 PNG 序列 ZIP。下载包里的柱状图参考页可以先直接打开试用。
从一句需求开始
用 dayuhtml 技能做一个 16:9 柱状图动画，标题“渠道转化率对比”。
演示数据：A渠道 8.2%、B渠道 6.4%、C渠道 5.1%、D渠道 3.8%。
深灰底、蓝色柱形、A渠道橙色高亮，动画 4 秒。
标题先出现，柱形依次生长，数值跟随计数，最后停留 0.6 秒。
保留画布编辑、参数面板、图层排序、保存 HTML 和离线导出。
生成后，先看数据和运动节奏，再在画布上改字、调整位置。需要较大改动时，将正在使用的 HTML 发回 AI，说明具体改哪一项及目标效果。
以下是技能包内附的安装、操作与提示词指南。
在浏览器里直接编辑
上图为参考框架的真实操作界面，使用渠道演示数据：选中标题会显示变换框，图层列表可以选择和调整前后顺序。截图中的数据仅用于展示排版与交互。
适合制作哪些画面
dayuhtml 适合图表、排行榜、计数器、标题和数字动效等无配音、无字幕的单个视觉画面或单组画面。标题、数字和图表标签属于画面元素；连续多场景并带解说字幕的成片应另选适合的时间线工作流。
下载包里有什么
SKILL.md：AI 读取的技能入口；SKILL.zh-CN.md：中文版说明。agents/：技能显示信息。references/：可直接打开的柱状图参考 HTML、详细技术规格、动效曲线、画布与图层操作说明、本指南。assets/export-libraries/：JSZip 3.10.1、Mediabunny 1.61.2 及第三方许可。scripts/：维护者使用的内联、曲线检查、浏览器与媒体验证脚本。verification/：参考模板的历史验证资料，供核对；每个新成品仍需单独检查。安装与使用.txt、版本信息.json、SHA256SUMS.txt：安装入口、版本与包内文件校验信息。
这是技能包与参考源码。生成新动画需要你自己的 AI 编程工具与可用模型，相关账号和服务费用另行配置；已经生成且依赖完整内置的 HTML 可以离线播放和导出。本包没有捆绑商业字体、第三方模型账号或 API 密钥。
安装与第一次使用
本包按 Codex 技能目录结构整理。以 macOS 常见配置为例：
- 解压下载的 ZIP，得到
dayuhtml文件夹，保留其中的所有文件与子目录。 - 将整个文件夹放入
~/.codex/skills/。若自行设置了CODEX_HOME，则放到该目录下的skills/中。 - 检查最终结构是
~/.codex/skills/dayuhtml/SKILL.md，避免多套一层同名文件夹。已有旧版时先另存旧版，再替换。 - 重新开启相关会话；若技能列表尚未刷新，重启工具后检查。第一次请求明确写“用 dayuhtml 技能”，也可在支持的技能选择入口选中它。
- 先试下面的柱状图提示词，再在生成的 HTML 中检查编辑和导出。
不安装也能试参考页：用桌面版 Chrome 或 Edge 打开 references/参考实现-柱状图表动画模板.html。这一步只查看现成的参考动画，不会自动调用 AI 生成新画面。
其他支持本地技能的工具可能使用不同安装目录，需要按各自的技能规则接入；本包不承诺未经验证的工具都能原样识别。
生成后怎样操作
| 想做什么 | 操作 |
|---|---|
| 播放、暂停、看某一帧 | 播放条、空格键或点击进度；未选中元素时左右键跳转 |
| 移动、缩放、旋转 | 单击选中，拖动元素、变换框角点、边点或上方圆点 |
| 精细移动 | 选中后方向键微移，Shift 加大步长 |
| 改文字、数字或样式 | 先选中，再点工具栏里的对应编辑按钮 |
| 改前后遮挡 | 图层列表拖动排序，或上移、下移、置顶、置底 |
| 改时长、颜色和动效强度 | 展开设置面板，调整相关参数 |
| 留下可继续编辑的版本 | 点击“保存 HTML”；也可保存配置供同一模板导入 |
| 输出当前画面 | PNG，保留模板所支持的透明区域 |
| 输出动画 | MP4 或 PNG 序列 ZIP，按页面导出设置生成 |
浏览器“另存网页”不能代替模板内的“保存 HTML”按钮，后者会把编辑状态写入下载副本。只选择“记为本机默认”依赖当前浏览器与地址，不适合当作跨设备备份。
参考页的 MP4 使用 H.264，并将透明区域合成黑底；需要透明叠加时优先使用 PNG 或 PNG 序列。MP4 编码依赖浏览器提供的 WebCodecs 与实际编码能力，建议先用桌面版 Chrome 或 Edge 试导出。字体授权加载依赖浏览器权限与安全上下文；不可用时仍可手动输入已安装字体名称或使用默认字体。
提示词怎样写
最有用的信息是：画什么、用哪些内容、画面比例与风格、总时长、先后顺序、哪些地方要可编辑、交付什么。 数值请附单位，明确使用真实数据还是演示数据；有参考图时说明保留什么、改变什么。
不要只写“高级一点”“有科技感”。可以换成可执行的描述：深灰底、蓝色柱形、第一项橙色高亮；标题先出现，柱子从左向右错峰生长；结尾停留半秒。也不必写缓动函数名，用“快速出现后平稳落定”“轻弹但不过分晃动”就能表达运动意图。
通用提示词模板
用 dayuhtml 技能制作一个单文件 HTML 动画。
画面：[图表 / 排行 / 计数器 / 标题等]，无配音、无字幕。
内容：[完整文字、数据、单位；如为虚构数据请标为演示]。
比例与风格：[16:9 / 9:16 / 1:1，颜色、字体气质、参考图要求]。
时长：[秒数]；动效强度：[克制 / 标准 / 活泼]。
编排：[先出现什么、主体如何进入、重点如何强调、结尾停留多久]。
编辑：保留画布移动、缩放、旋转、文字样式、图层排序与参数面板。
交付：保存后可继续编辑的 HTML，保留 MP4、PNG、PNG 序列 ZIP 离线导出。
检查：实际操作交互、保存重开，并核对同一帧的预览与导出。
示例一：柱状图与排行
用 dayuhtml 技能做一个 16:9 柱状图动画，标题“渠道转化率对比”。
使用演示数据：A渠道 8.2%、B渠道 6.4%、C渠道 5.1%、D渠道 3.8%。
深灰底，蓝色柱形，A渠道用橙色高亮，数值始终保留一位小数。
总时长 4 秒，动效克制。标题先遮罩上升，网格随后展开，柱形从左到右错峰生长，数值跟随当前柱高计数，最后停留 0.6 秒。
柱长按同一比例尺表达数值，显示单位；这是演示数据，不要写成真实行业结论。
保留画布编辑、图层排序、参数设置、保存 HTML 和三种离线导出。
示例二：数字增长
用 dayuhtml 技能做一个 1:1 数字增长动画，无配音、无字幕。
标题“年度目标”，主数字从 0 增长到 12,800，下方写“本页为演示数据”。
浅色背景，黑色大数字，橙色小强调线。时长 3 秒，动效标准。
标题先出现，主数字快速增长后减速落定，千分位全程正确，结束停留 0.5 秒。
标题、数字和说明文字分别可选中、移动、缩放、旋转和改样式；起止值、时长与颜色放入参数面板。
输出可继续编辑的单文件 HTML，保留 MP4、PNG 和 PNG 序列 ZIP 导出。
示例三：标题与品牌文字
用 dayuhtml 技能制作一个 16:9 标题动画，主标题“让信息更有表现力”，副标题“从数据到画面”。
深蓝背景，米白标题，细橙线装饰，时长 5 秒，动效标准。
主标题逐字遮罩上升，副标题晚 0.3 秒出现，细线由左向右展开，最后稳定停留 1 秒。
运动轻快、位移小，文字不要从画布外飞入；不要添加配音或字幕轨。
每段文字和装饰层独立可编辑、可调层级；保留完整播放、保存与离线导出功能。
示例四：参考图转为可编辑动画
用 dayuhtml 技能把我附上的参考图改为可编辑 HTML 动画。
保留标题内容、信息层级和整体色系；改成 9:16 竖屏，重新安排留白，避免文字被裁切。
标题、数据、人物图片和底纸分成独立图层。图片允许替换；不要把整张图贴成一个不可编辑背景。
时长 4 秒，动效标准：底纸先进入，图片随后轻弹，标题最后遮罩出现，末尾停留 0.8 秒。
只使用我提供或有权使用的素材；缺少素材时告诉我具体缺什么。
保留画布编辑、参数面板、图层排序、保存 HTML 及离线导出。
已有成品怎样继续修改
把正在使用的 HTML 一并提供，指出具体元素、目标值和保留要求。比如：
继续修改我附上的 dayuhtml HTML：将标题改为“第三季度复盘”，B渠道改为 7.6%，高亮色改为 #FF8B3D，时长改为 4.5 秒。
标题位置保持，柱形顺序保持。保留我已调整的变换、图层排序和全部编辑导出功能。
完成后保存一个新文件，并检查重开后的文字、数据、层级与导出结果。
需要调整运动时，也可以明确节拍：“前 0.4 秒出标题，接着 1.2 秒展示数据，最后停留 0.8 秒。” 给出元素和时间，比反复要求“更流畅”更容易得到稳定结果。
常见问题
会不会自动生成任意类型的动画？ 技能给 AI 提供实现框架和制作要求，当前内置可运行参考是柱状图与图层遮挡示例。计数器、标题等场景由 AI 按需求改写渲染层；复杂素材和材质仍需要相应实现与验证。
下载后可以直接用吗？ 现成参考页可以直接打开。生成新作品需要先让 AI 工具识别技能并提供具体需求。使用参考 HTML 不需要安装 Python 或 Node.js；维护与自动验证脚本另有依赖，见参考模板操作说明。
为什么 MP4 导出失败或系统字库按钮不可用？ 两者分别取决于浏览器编码能力与字体访问权限。先换桌面版 Chrome 或 Edge，用 PNG / 序列验证画面；系统字库不可用时可手动指定已安装字体。不要将普通 MP4 当作透明视频。
换电脑后字体会一样吗？ 使用本机字体时，新机器也需要安装对应字体，或改为可用字体。只有字体许可允许时才应嵌入或随作品分发。本包的第三方导出库保留各自许可。
预览满意，还需要检查什么？ 实际拖动、改字、排序；保存并重新打开；导出一个 PNG 和短 MP4 / 序列；核对同帧排版、文字、遮挡与透明区域。已有参考页的历史测试不代表每个新作品都自动通过。
下载与价格
技能包售价 99 元，鱼粉会员免费。 请在本文资源下载区域获取完整 ZIP。当前分发版本为 2026.10.25，共 48 个文件，包含安装指南、提示词示例、参考 HTML、导出库及其许可与参考验证资料。
本次从正式 ZIP 解压副本完成参考页验证：42 项浏览器交互检查、134 项动效曲线检查通过；PNG、PNG 序列与短 MP4 均实际导出并核对。上述验证针对内置参考页，每个新作品仍需按其内容完成检查。