html-anything 像素动画技能实战：用纯 CSS 打造 8-bit 复古解说帧

AI 应用人工智能AI AgentAI 写作媒体生成【免费下载链接】html-anything✨ The agentic HTML editor — your local AI agent writes the HTML, you ship it. 75 Skills × 9 Surfaces (magazine · deck · poster · XHS / tweet · prototype · data report · Hyperframes) ️ Sandboxed preview · 1-click to WeChat / X / Zhihu / HTML / PNG Zero API key — Claude Code / Cursor / Codex / Gemini / Copilot / OpenCode / Qwen / Aider.项目地址https://gitcode.com/gh_mirrors/ht/html-anything点击查看免费下载导读本文以 html-anything 内置的sprite-animation技能为入口从 SKILL.md 的设计意图出发逐层拆解其「像素美术 kinetic 字体 纯 CSS 循环动画」的实现原理并对照仓库源码loader、assemblePrompt、模板 API还原一个技能从磁盘目录到前端渲染的完整链路。读完你既能看懂示例 HTML 中每一个keyframes的编排逻辑也能自己动手为 html-anything 新增一个同类技能模板。一、技能是什么一个 Skill 文件夹的完整形态html-anything 把模板做成了磁盘上的文件夹见 loader.ts 顶部注释src/lib/templates/skills/id/ SKILL.md — frontmatterid、场景、标签… 提示词正文 example.md — 可选示例输入内容 example.html — 可选预渲染预览picker 内联展示sprite-animation就落在这个目录下目录 sprite-animation包含SKILL.md与example.html无example.md属可选文件。新增一个技能 新增一个文件夹无需改动任何 TS 代码API 路由会重新扫描磁盘、客户端会重新拉取/api/templates。SKILL.md的 frontmatter 定义了该技能在 picker 中的元信息--- name: sprite-animation zh_name: 像素动画解说 en_name: Sprite Animation emoji: ️ description: 像素美术 kinetic 字体的解说帧, 纯 CSS 循环, 可录视频 category: poster scenario: marketing aspect_hint: 竖版/横版均可 featured: 8 tags: [pixel, 8-bit, 复古, explainer] ---category: poster归入海报类scenario: marketing归入营销场景对应 scenarios.ts 的SCENARIO_KEYS枚举featured: 8控制推荐位排序数字越小越靠前见 template-picker.tsx 的rankFeaturedaspect_hint: 竖版/横版均可是宽高比提示展示在 picker 行内。frontmatter 由 loader 内置的、零依赖的解析器处理loader.ts只支持字符串、整数和单行数组字面量tags: [a, b]三种形态。二、设计意图拆解SKILL.md 说了什么frontmatter 下方就是 prompt 正文它向 Agent 描述这一帧画面该怎么搭【模板像素 / 8-bit 动画解说】 【意图】教育型动画的单帧海报纯 CSS keyframes 循环不用 JS。 【布局】Full-bleed cream stage通栏奶油色舞台Bold display year / 大字数字中心一个像素艺术 mascotSVG 或纯 CSS 绘制kinetic 中文 / 日文 display 字底部 timeline ribbon 一直走 【设计细节】动画用 keyframes不依赖 JS复古调色板红 / 米 / 墨绿这份正文并不规定具体文案或页数只框定版面 / 风格 / 配色 / 字体 / 组件库。真正的内容量由用户输入决定——这正是 shared.ts 中SHARED_DESIGN_DIRECTIVES的第一优先级约定模板只定义可用版面与风格不定义 slide / 帧 / 卡片 / section 的数量数量完全由用户内容的实际长度和信息结构决定。三、从技能到生成prompt 的组装链路当用户在编辑器里选中 sprite-animation 并提交内容时convert 路由 会loadSkill(templateId)读取该技能目录的SKILL.md得到 frontmatter prompt 正文assemblePrompt({ body: skill.body, content, format })把三段拼成最终 prompt——共享设计准则 技能正文 输入格式与用户内容见 shared.ts 的assemblePrompt实现。共享准则中的硬性技术约束同样约束着本技能的输出单文件 HTML、以!DOCTYPE html开头、head 里通过 CDN 引入 Google Fonts、必要时脚本走 jsdelivr、纯 HTML 输出、无 markdown 围栏、不落盘。四、逐帧拆解 example.html5 个关键动画示例 example.html 是一个 16:9 的 stage讲述任天堂 1889 年靠花札起家的冷知识。它完整实现了 SKILL.md 的每一项布局要求。4.1 复古调色板与字体:root 变量:root { --paper: #f5efe2; /* 米 */ --paper-2: #ede4d0; /* 更深一档的米 */ --ink: #181612; /* 墨 */ --accent: #d92b1c; /* 红 */ --muted: #6f6a60; --serif: DM Serif Display, Iowan Old Style, Georgia, serif; --jp: Noto Serif JP, serif; --mono: IBM Plex Mono, ui-monospace, monospace; --pixel: Press Start 2P, monospace; /* 8-bit 像素字体 */ }配色严格落在 SKILL.md 的红 / 米 / 墨绿范围内花札 SVG 里的叶子用了#3b6b3b墨绿。字体则用到四种 Google Fonts衬线大数字、Noto Serif JP 日文、等宽 mono 做字幕以及真正点题的Press Start 2P像素字体。4.2 REC 指示灯steps() 的闪光blink.topbar .rec::before { content: ; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: blink 1.2s steps(2) infinite; } keyframes blink { 50% { opacity: 0.2; } }用steps(2)而非linear让红点像老式录像机 REC 灯一样硬切闪烁而不是平滑渐隐——这是像素风里非常典型的非连续感细节。4.3 数字故障clip-path 分层叠字glitchspan classnum 1889 span classglitch aria-hiddentrue1889/span /span.year .num .glitch { position: absolute; color: var(--accent); clip-path: inset(0 0 70% 0); animation: glitch 4s steps(8) infinite; mix-blend-mode: multiply; } keyframes glitch { 0%, 88%, 100% { clip-path: inset(0 0 100% 0); transform: translate(0,0); opacity: 0; } 89% { clip-path: inset(20% 0 60% 0); transform: translate(2px, -1px); opacity: 0.7; } 91% { clip-path: inset(60% 0 20% 0); transform: translate(-2px, 1px); opacity: 0.7; } 94% { clip-path: inset(40% 0 40% 0); transform: translate(1px, 0); opacity: 0.6; } 97% { clip-path: inset(0 0 100% 0); transform: translate(0,0); opacity: 0; } }故障效果的关键是双层同字 错位裁切底层是实体1889上层红色副本平时完全隐藏只在动画 88%97% 的瞬间以clip-path裁出一条色带并做 1~2px 位移形成 CRT 信号抖动的错觉。steps(8)把整个动画量化成 8 帧强化像素感。4.4 像素 mascot纯 SVG 画的花札SKILL.md 要求中心一个像素艺术 mascotSVG 或纯 CSS 绘制。示例选择了一个 24×32 栅格的 SVG 花札卡片用最朴素的rect逐个堆出月亮、花瓣、花蕊和枝叶svg width120 height160 viewBox0 0 24 32 rect x3 y2 width18 height10 fill#1a1614/ !-- 夜空 -- rect x14 y4 width5 height5 fill#f7c95b/ !-- 月亮 -- rect x9 y14 width6 height2 fill#d92b1c/ !-- 花瓣 -- rect x11 y24 width2 height6 fill#3b6b3b/ !-- 花茎 -- /svg配合两行关键属性保持锐利.sprite-card svg { image-rendering: pixelated; shape-rendering: crispEdges; }image-rendering: pixelated防止浏览器对位图做平滑插值shape-rendering: crispEdges让 SVG 矢量边缘按整数像素对齐两行都服务于像素风不能糊这一目标。外层卡片再用 4px 黑边框 8px 实心投影box-shadow: 8px 8px 0 var(--ink)压出硬朗的纸牌感整体套一个 2.4s 的bob上下浮动动画。4.5 底部 timeline ribbon无限滚动走马灯.ribbon-track { display: inline-flex; gap: 64px; white-space: nowrap; flex-shrink: 0; animation: scroll-left 22s linear infinite; } keyframes scroll-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }走马灯的实现是把 7 组 tick1889 → 2017连续复制两遍塞进同一轨道再让轨道从 0 平移到 -50%——因为首尾内容完全一致位移到一半时视觉上恰好无缝接上于是可以无限循环。每段 tick 由红点 年份 大写注释组成是timeline ribbon 一直走的直接落地。4.6 其余细节kinetic 文字与响应式kinetic 日文右上角花札两字逐字入场每个span延迟 0.4s 错峰下落形成文字一个接一个浮现的节奏感.kana span { opacity: 0; animation: kana-in 4s ease-in-out infinite; } .kana span:nth-child(2) { animation-delay: 0.4s; } keyframes kana-in { 0% { opacity: 0; transform: translateY(-12px); } 18%, 78% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(8px); } }四角裁切标记.reg用 14px 方形加边框只保留两条边模拟印刷套准线强化这是可以录屏的解说帧的节目感响应式media (max-width: 900px)下把大数字、kinetic 字、卡片尺寸等比缩小保证手机预览不溢出。五、这个技能如何出现在你面前API 与 picker 链路sprite-animation 的元信息与预览并不写死在前端而是运行时从磁盘读出列表GET /api/templates 调用listSkills()扫描src/lib/templates/skills/下每个子目录含用户通过 marketplace 安装的技能合并进同一注册表返回全部SkillMeta。生产环境有缓存开发模式每次刷新都重新扫描。预览GET /api/templates/:id/preview 把example.html原样返回由浏览器缓存 5 分钟前端在 picker 的悬停弹层里把它塞进iframe sandbox缩放 0.4375 倍显示缩略图见 template-picker.tsx。加载示例GET /api/templates/:id/example 一次性返回content html点击 Preview 时直接loadSample()注入编辑器避免两次往返。六、动手如何复用这套 8-bit 配方参考 sprite-animation 的写法你可以在自己的单文件 HTML 里直接复刻这套纯 CSS 动画帧配方调色板米#f5efe2 墨#181612 红#d92b1c 墨绿#3b6b3b全部走 CSS 变量像素字体head 里引Press Start 2P大数字与标题用它或衬线字体动画量化steps(n)让所有过渡硬切而非平滑配合image-rendering: pixelated保证图形不糊循环编排无限循环动画统一用ease-in-out 固定周期走马灯用双份内容 translateX(-50%)实现无缝分层动效glitch 用 clip-path 错位叠字kinetic 用逐字 animation-delay全程零 JS。若你想把它固化为 html-anything 的新技能只需在next/src/lib/templates/skills/下新建文件夹并放入SKILL.mdfrontmatter prompt 正文与可选example.html重启后 picker 即可看到并悬停预览——整套流程无需改动一行 TS 代码这也正是 html-anything 将模板沉淀为磁盘文件夹的设计初衷。赞分享AI 应用人工智能AI AgentAI 写作媒体生成【免费下载链接】html-anything✨ The agentic HTML editor — your local AI agent writes the HTML, you ship it. 75 Skills × 9 Surfaces (magazine · deck · poster · XHS / tweet · prototype · data report · Hyperframes) ️ Sandboxed preview · 1-click to WeChat / X / Zhihu / HTML / PNG Zero API key — Claude Code / Cursor / Codex / Gemini / Copilot / OpenCode / Qwen / Aider.项目地址https://gitcode.com/gh_mirrors/ht/html-anything点击查看免费下载相关推荐HTML Anything motion-frames 动效帧模板实战用纯 CSS 打造可循环的 Hero 视频帧HTML Anything motion frames 动效帧模板实战用纯 CSS 打造可循环的 Hero 视频帧 导读 motion frames 动效英AI 应用人工智能AI AgentAI 写作媒体生成RepVGG-B1g4图像分类模型如何快速上手这个高效的VGG风格卷积网络RepVGG B1g4图像分类模型如何快速上手这个高效的VGG风格卷积网络 RepVGG B1g4.rvgg_in1k是一款基于RepVGG架构的高效图像分类像素艺术awesome-vscode像素画编辑与预览插件像素艺术awesome vscode像素画编辑与预览插件 你是否曾为寻找一款轻量级像素画工具而烦恼作为开发者或设计师你可能希望在熟悉的编辑器中完成所有创作开发工具文档上一篇RuoYi-Vue搜索功能Elasticsearch集成下一篇5分钟掌握Airflow任务执行进度跟踪与实时监控创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考