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 开源仓库中social-spotify-card这一款技能Skill模板围绕它的定义文档 SKILL.md 展开它如何用一份纯文本规范驱动 AI Agent 渲染出 Spotify 风格的正在播放卡适用于视频叠加video overlay、个人主页about page与创作者 hero 场景。读完本文你将掌握该模板的画布规格、卡片结构、设计令牌、内容映射规则以及它在 html-anything 中从「技能文件夹」到「AI 生成 HTML」的完整运行链路并可直接复制其示例输入与示例 HTML 上手使用。一、Skill 是什么html-anything 的文件夹即模板机制html-anything 是一套Agentic HTML 编辑器用户把一段 Markdown / 文本内容交给本地 AI AgentAgent 依据某个技能模板的提示词输出一份自包含的单文件 HTML。模板不再是一段硬编码在 TS 里的巨型数组而是每个技能一个文件夹next/src/lib/templates/skills/skill-id/ SKILL.md — frontmatterid、场景、标签… 提示词正文 example.md —可选示例输入内容 example.html —可选预渲染预览选择器内联展示这一定位在 loader.ts 的模块注释中写得很清楚新增一个模板 新增一个文件夹无需改动任何 TS 代码。服务端由/api/templates扫描磁盘返回技能元数据列表客户端通过 index.ts 的useTemplates()拉取并缓存。social-spotify-card正是这一布局下的典型范例一份 SKILL.md、一份示例输入 example.md 和一份可直接预览的 example.html。二、模板定位与 frontmatter 元数据逐项解析SKILL.md 顶部是一段 YAML frontmatter它同时服务于选择器展示、搜索与示例加载。字段如下参考 loader.ts 的SkillFrontmatter类型字段本模板取值作用namesocial-spotify-card技能 id即文件夹名用于 API 路由定位zh_nameSpotify 正在播放卡中文名选择器默认展示en_nameSpotify Now-Playing Card英文名locale 为 en 时展示见 template-picker.tsxemoji列表项图标descriptionSpotify Now Playing 风格卡…单行描述出现在列表与悬停预览categorycard卡片类技能scenariopersonal使用场景对应 scenarios.ts 中personal键个人主页类选择器按场景分桶过滤aspect_hint1280×720 或 600×200画布提示渲染在选择器按钮、列表行与预览弹窗上template-picker.tsx提示用户目标尺寸featured43排序权重数值越小越靠前rankFeatured见 template-picker.tsxtags[spotify,music,now-playing,card,overlay]搜索关键词与名称、描述一起参与matchesQuery匹配template-picker.tsxexample_id/example_name/example_formatsample-social-spotify-card/Spotify Now Playing · Lo-Fi/markdown示例内容标识、名称与输入格式example_tagline/example_descSpotify 经典 dark 卡/Lo-Fi Beats · Chillhop 进度条 1:24 / 3:42 控制行悬停预览弹窗的副标题与描述example_source_url/example_source_labelhttps://hyperframes.heygen.com/catalog/hyperframes · spotify-card灵感来源标注选择器会渲染为外部链接徽章见 template-picker.tsxfrontmatter 的解析由 loader 内置的零依赖解析器完成loader.ts支持字符串可带引号、整数以及单行数组字面量tags: [...]。解析出的元数据经fmToMeta映射为SkillMetaSKILL.md中---分隔符之后的正文则作为提示词 body单独保留并不会随元数据一起发给浏览器。三、画布规格两种目标尺寸SKILL.md 的【画布】一节定义了两种尺寸二者对应不同用途横版视频叠加1280×720。卡片居中或左下角浮动适合作为直播/视频中的 overlay 角标。紧凑横条 widget600×200。可嵌入任意 hero 区域作为个人主页顶部的常驻元素。aspect_hint: 1280×720 或 600×200会在选择器界面中直接展示见 template-picker.tsx让用户在选中模板前就知道目标画布比例。仓库自带的示例 HTML 实际采用w-[640px]横条卡片、页面背景为min-h-screen深色渐变处于两种规格之间既可截取为视频叠加也可整体嵌入 hero。四、卡片结构外框、封面、信息区与 logoSKILL.md 将卡片拆解为五个可独立描述的区域这是提示词中最重要的视觉规范Agent 必须逐项落实4.1 外框圆角12–16px示例中为rounded-2xl即 16px。背景两种方案专辑封面色提取的暗渐变如linear-gradient(135deg, #1e3264 0%, #0d1f3d 100%)或 Spotify 经典#121212。边缘 1px subtle border示例为border:1px solid rgba(255,255,255,0.08)并配柔和投影。4.2 左侧专辑封面严禁外链图片封面必须用 CSS 渐变 大字 monogram首字母或抽象几何描绘生成。这是共享设计指令的硬性要求见下节。圆角 6pxrounded-md尺寸 60–200px 方形示例为w-44 h-44176px。示例封面由三层渐变叠加而成两圈径向光晕粉#ffb1c3、紫#6b46c1 135° 深紫渐变底再叠上 Chillhop 小字标签与 Lo-Fi Essentials / Spring · 2026 文字排版见 example.html。4.3 右侧信息区自上而下依次是NOW PLAYING标签全大写、letter-spacing 0.14em–0.18em、11px、Spotify 绿#1DB954示例含内联 Spotify 波浪图标。歌名/标题Inter / Spotify Circular22–28pxweight 700白色示例text-2xl font-bold。艺人/副标16px、weight 400、opacity 0.7白色示例text-white/70。进度条4px 高、圆角、灰底 白色 fillwidth: 38%两端时间戳1:24 / 3:42mono、11px、灰。示例实现还加了一个位于 38% 处的白色圆点播放头example.html。控制行⏮ ⏯ ⏭ 三个内联 SVG 图标24px、白色 fillshuffle / repeat 图标较小。示例用viewBox0 0 24 24的 Material 风格 path 手绘播放键做成白色圆形按钮 黑色三角example.html。4.4 右上角 Spotify logo内联 SVG绿色#1DB954圆 三道白色波纹。示例直接内嵌了标准 Spotify 图标 pathexample.html同样不依赖外链资源。4.5 音波动效可选右下角 3 个小 bar 用keyframes做垂直缩放动画。示例实现为.wave i四个3px宽小条transform-origin: bottom1s ease-in-out 无限循环并通过nth-child依次延迟 0.15s / 0.3s / 0.45s 形成扫波效果example.html。关键约束是动效必须能被prefers-reduced-motion关闭满足无障碍要求。五、字体与设计令牌Spotify 经典 dark modeSKILL.md 的【字体】与【设计细节】明确了这套卡片的三组设计令牌也是 Agent 生成时唯一被允许的配色来源背景#121212Spotify 经典 dark。强调色#1DB954Spotify 绿用于 NOW PLAYING 标签、logo、音波条。次要文本#b3b3b3描述性文字、时间戳。字体主选Spotify Circularfallback 到Inter/Inter Tightweight 只用 400 / 700 两档数字与主字体一致不要大量使用 mono示例仅在时间戳处用了font-mono以贴合进度条语义。这与全局共享设计指令shared.ts的排版规范一致英文优先Inter中文优先Noto Sans SC。六、内容映射规则文本输入如何变成卡片SKILL.md 给定了 Agent 的输入 → 元素决策逻辑这是提示词里最具操作性的部分用户输入是文本/标题→ 把标题当作歌名、副标/作者当作艺人时长在无数据时默认 3:42进度可估算为某个百分比示例填 38%对应 1:24 / 3:42。用户输入本身是音乐相关内容如歌单、播客介绍→ 直接一一对应曲名→歌名、创作者→艺人、专辑→封面文字、时长→时间戳。仓库示例输入 example.md 就是一份音乐类内容歌名Sunday Afternoonjsan · evil needle、进度 1:24 / 3:42、专辑Chillhop Essentials Spring 2026、周听众 2.4M。而示例 HTML 忠实呈现了前三条信息封面文字取专辑名、副标题取艺人、时间戳取进度验证了映射规则的实际效果。若输入的是个人介绍则同样适用姓名→歌名位置、身份/简介→艺人位置时长这类无来源数据使用默认值即可。七、共享设计指令每条技能提示词之上的硬约束当用户在编辑器中点选该模板并提交内容时实际发给 Agent 的提示词并非只有 SKILL.md 正文。/api/convert路由会调用 assemblePromptroute.ts把 SKILL.md 的 body 与全局设计指令SHARED_DESIGN_DIRECTIVESshared.ts拼接再追加【输入格式】与【用户内容】。其中有四条与本文模板直接相关、且被 example.html 严格遵循的规则禁止使用文件系统工具HTML 必须作为助手回复正文流式输出落盘由前端完成因此示例 HTML 也是可直接双击打开的单一文件。单文件自包含!DOCTYPE html开头、/html结尾head 中通过 CDN 引入 Tailwind v3 Play 与 Google Fonts示例引入了Inter与Noto Sans SC。不引用外部图片 URL优先 CSS / SVG 内联绘制——这正是 SKILL.md 中封面用 CSS 渐变 文字 logo / 几何描绘的顶层依据。内容真实性必须使用用户真实数据不得 lorem ipsum——示例 HTML 中的所有文字均来自示例输入。此外当用户对同一任务再次编辑时/api/convert还会走editFromHtml / editFromContent的最小化差异编辑分支route.ts保留原 HTML 的 head、配色与结构只按新旧内容差异替换文字节点避免每次重生成导致风格漂移。八、示例实操从输入到成品 HTML完整的输入 → 产物链路如下输入内容用户在编辑器粘贴或从示例加载见 example.md。选择模板在模板选择器中搜索 spotify 即可命中tags 含 spotify/music/now-playing/card/overlay选中后按钮上会显示 Spotify 正在播放卡与1280×720 或 600×200的尺寸提示。悬停预览 / 一键载入模板携带example.html选择器悬停时通过/api/templates/:id/example拉取并在 1280×960 的 iframe 中缩放预览route.ts、template-picker.tsx点击 载入 即可把示例内容与 HTML 一起放进编辑器。生成与渲染提交后/api/convert组装提示词含 SKILL.md body 共享指令 用户内容Agent 流式返回单文件 HTML前端捕获 stdout 并渲染在预览面板中。生产环境的成品即 example.htmlTailwind 工具类完成布局flex左右分栏、gap-5、items-stretch内联style承载渐变背景、边框与投影.wave类承载音波动效整体约 70 行未引入任何外部图片。九、自定义与扩展把这款卡片改造成自己的技能social-spotify-card的机制决定了任何人都可以低成本复制改造新增一个同族技能在next/src/lib/templates/skills/下复制文件夹并改名如social-spotify-mini修改 frontmatterid、名称、aspect_hint、tags与 body 即可开发模式下 loader 每次请求都会重扫磁盘loader.ts无需重启next dev。调整画布比例把aspect_hint改为目标值并在 body 的【画布】中同步更新例如改成 1080×1080 的方形卡仅需调整封面尺寸与信息区排布。替换设计令牌把#121212/#1DB954/#b3b3b3换成自己的品牌色即可得到一款类 Spotify的播放卡。通过市场安装外部技能包安装到~/.html-anything/skills/后会以pkg-owner__repo--originalId的命名空间 id 合并进同一注册表见 registry.ts选择器无需改动即可展示。十、相关文件速查模板定义SKILL.md示例输入example.md示例成品example.html技能加载与 frontmatter 解析loader.ts全局共享设计指令与提示词组装shared.ts转换/生成 API含 diff-editroute.ts模板选择器搜索、场景过滤、悬停预览template-picker.tsx场景常量与排序scenarios.ts一句话总结social-spotify-card的 SKILL.md 用一份 50 行不到的规范完整锁定了Spotify 正在播放卡的画布、结构、配色与内容映射规则它与 html-anything 的共享指令、磁盘加载器和转换 API 协同让任意本地 AI Agent 都能稳定复现这一经典卡片风格。赞分享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 模板实战用 social-spotify-card 生成 Spotify 正在播放卡html anything 模板实战用 social spotify card 生成 Spotify 正在播放卡 本篇技术指南围绕 html anythingAI 应用人工智能AI AgentAI 写作媒体生成html-anything 技能模板实战用 SKILL.md 生成 FlowAI 团队管理 Dashboardhtml anything 技能模板实战用 SKILL.md 生成 FlowAI 团队管理 Dashboard 导读 本文以 html anything 仓库AI 应用人工智能AI AgentAI 写作媒体生成html-anything 博客长文技能模板解析从 SKILL.md 规格到单文件 HTML 排版实现html anything 博客长文技能模板解析从 SKILL.md 规格到单文件 HTML 排版实现 导读 blog post 是 html anythinAI 应用人工智能AI AgentAI 写作媒体生成上一篇技术实现工业仪表视觉识别系统的架构解析与性能验证下一篇如何解决3D压缩开发中的痛点Draco库常见问题终极指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 html-anything 技能模板详解：用 SKILL.md 打造 Spotify Now-Playing 正在播放卡
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 开源仓库中social-spotify-card这一款技能Skill模板围绕它的定义文档 SKILL.md 展开它如何用一份纯文本规范驱动 AI Agent 渲染出 Spotify 风格的正在播放卡适用于视频叠加video overlay、个人主页about page与创作者 hero 场景。读完本文你将掌握该模板的画布规格、卡片结构、设计令牌、内容映射规则以及它在 html-anything 中从「技能文件夹」到「AI 生成 HTML」的完整运行链路并可直接复制其示例输入与示例 HTML 上手使用。一、Skill 是什么html-anything 的文件夹即模板机制html-anything 是一套Agentic HTML 编辑器用户把一段 Markdown / 文本内容交给本地 AI AgentAgent 依据某个技能模板的提示词输出一份自包含的单文件 HTML。模板不再是一段硬编码在 TS 里的巨型数组而是每个技能一个文件夹next/src/lib/templates/skills/skill-id/ SKILL.md — frontmatterid、场景、标签… 提示词正文 example.md —可选示例输入内容 example.html —可选预渲染预览选择器内联展示这一定位在 loader.ts 的模块注释中写得很清楚新增一个模板 新增一个文件夹无需改动任何 TS 代码。服务端由/api/templates扫描磁盘返回技能元数据列表客户端通过 index.ts 的useTemplates()拉取并缓存。social-spotify-card正是这一布局下的典型范例一份 SKILL.md、一份示例输入 example.md 和一份可直接预览的 example.html。二、模板定位与 frontmatter 元数据逐项解析SKILL.md 顶部是一段 YAML frontmatter它同时服务于选择器展示、搜索与示例加载。字段如下参考 loader.ts 的SkillFrontmatter类型字段本模板取值作用namesocial-spotify-card技能 id即文件夹名用于 API 路由定位zh_nameSpotify 正在播放卡中文名选择器默认展示en_nameSpotify Now-Playing Card英文名locale 为 en 时展示见 template-picker.tsxemoji列表项图标descriptionSpotify Now Playing 风格卡…单行描述出现在列表与悬停预览categorycard卡片类技能scenariopersonal使用场景对应 scenarios.ts 中personal键个人主页类选择器按场景分桶过滤aspect_hint1280×720 或 600×200画布提示渲染在选择器按钮、列表行与预览弹窗上template-picker.tsx提示用户目标尺寸featured43排序权重数值越小越靠前rankFeatured见 template-picker.tsxtags[spotify,music,now-playing,card,overlay]搜索关键词与名称、描述一起参与matchesQuery匹配template-picker.tsxexample_id/example_name/example_formatsample-social-spotify-card/Spotify Now Playing · Lo-Fi/markdown示例内容标识、名称与输入格式example_tagline/example_descSpotify 经典 dark 卡/Lo-Fi Beats · Chillhop 进度条 1:24 / 3:42 控制行悬停预览弹窗的副标题与描述example_source_url/example_source_labelhttps://hyperframes.heygen.com/catalog/hyperframes · spotify-card灵感来源标注选择器会渲染为外部链接徽章见 template-picker.tsxfrontmatter 的解析由 loader 内置的零依赖解析器完成loader.ts支持字符串可带引号、整数以及单行数组字面量tags: [...]。解析出的元数据经fmToMeta映射为SkillMetaSKILL.md中---分隔符之后的正文则作为提示词 body单独保留并不会随元数据一起发给浏览器。三、画布规格两种目标尺寸SKILL.md 的【画布】一节定义了两种尺寸二者对应不同用途横版视频叠加1280×720。卡片居中或左下角浮动适合作为直播/视频中的 overlay 角标。紧凑横条 widget600×200。可嵌入任意 hero 区域作为个人主页顶部的常驻元素。aspect_hint: 1280×720 或 600×200会在选择器界面中直接展示见 template-picker.tsx让用户在选中模板前就知道目标画布比例。仓库自带的示例 HTML 实际采用w-[640px]横条卡片、页面背景为min-h-screen深色渐变处于两种规格之间既可截取为视频叠加也可整体嵌入 hero。四、卡片结构外框、封面、信息区与 logoSKILL.md 将卡片拆解为五个可独立描述的区域这是提示词中最重要的视觉规范Agent 必须逐项落实4.1 外框圆角12–16px示例中为rounded-2xl即 16px。背景两种方案专辑封面色提取的暗渐变如linear-gradient(135deg, #1e3264 0%, #0d1f3d 100%)或 Spotify 经典#121212。边缘 1px subtle border示例为border:1px solid rgba(255,255,255,0.08)并配柔和投影。4.2 左侧专辑封面严禁外链图片封面必须用 CSS 渐变 大字 monogram首字母或抽象几何描绘生成。这是共享设计指令的硬性要求见下节。圆角 6pxrounded-md尺寸 60–200px 方形示例为w-44 h-44176px。示例封面由三层渐变叠加而成两圈径向光晕粉#ffb1c3、紫#6b46c1 135° 深紫渐变底再叠上 Chillhop 小字标签与 Lo-Fi Essentials / Spring · 2026 文字排版见 example.html。4.3 右侧信息区自上而下依次是NOW PLAYING标签全大写、letter-spacing 0.14em–0.18em、11px、Spotify 绿#1DB954示例含内联 Spotify 波浪图标。歌名/标题Inter / Spotify Circular22–28pxweight 700白色示例text-2xl font-bold。艺人/副标16px、weight 400、opacity 0.7白色示例text-white/70。进度条4px 高、圆角、灰底 白色 fillwidth: 38%两端时间戳1:24 / 3:42mono、11px、灰。示例实现还加了一个位于 38% 处的白色圆点播放头example.html。控制行⏮ ⏯ ⏭ 三个内联 SVG 图标24px、白色 fillshuffle / repeat 图标较小。示例用viewBox0 0 24 24的 Material 风格 path 手绘播放键做成白色圆形按钮 黑色三角example.html。4.4 右上角 Spotify logo内联 SVG绿色#1DB954圆 三道白色波纹。示例直接内嵌了标准 Spotify 图标 pathexample.html同样不依赖外链资源。4.5 音波动效可选右下角 3 个小 bar 用keyframes做垂直缩放动画。示例实现为.wave i四个3px宽小条transform-origin: bottom1s ease-in-out 无限循环并通过nth-child依次延迟 0.15s / 0.3s / 0.45s 形成扫波效果example.html。关键约束是动效必须能被prefers-reduced-motion关闭满足无障碍要求。五、字体与设计令牌Spotify 经典 dark modeSKILL.md 的【字体】与【设计细节】明确了这套卡片的三组设计令牌也是 Agent 生成时唯一被允许的配色来源背景#121212Spotify 经典 dark。强调色#1DB954Spotify 绿用于 NOW PLAYING 标签、logo、音波条。次要文本#b3b3b3描述性文字、时间戳。字体主选Spotify Circularfallback 到Inter/Inter Tightweight 只用 400 / 700 两档数字与主字体一致不要大量使用 mono示例仅在时间戳处用了font-mono以贴合进度条语义。这与全局共享设计指令shared.ts的排版规范一致英文优先Inter中文优先Noto Sans SC。六、内容映射规则文本输入如何变成卡片SKILL.md 给定了 Agent 的输入 → 元素决策逻辑这是提示词里最具操作性的部分用户输入是文本/标题→ 把标题当作歌名、副标/作者当作艺人时长在无数据时默认 3:42进度可估算为某个百分比示例填 38%对应 1:24 / 3:42。用户输入本身是音乐相关内容如歌单、播客介绍→ 直接一一对应曲名→歌名、创作者→艺人、专辑→封面文字、时长→时间戳。仓库示例输入 example.md 就是一份音乐类内容歌名Sunday Afternoonjsan · evil needle、进度 1:24 / 3:42、专辑Chillhop Essentials Spring 2026、周听众 2.4M。而示例 HTML 忠实呈现了前三条信息封面文字取专辑名、副标题取艺人、时间戳取进度验证了映射规则的实际效果。若输入的是个人介绍则同样适用姓名→歌名位置、身份/简介→艺人位置时长这类无来源数据使用默认值即可。七、共享设计指令每条技能提示词之上的硬约束当用户在编辑器中点选该模板并提交内容时实际发给 Agent 的提示词并非只有 SKILL.md 正文。/api/convert路由会调用 assemblePromptroute.ts把 SKILL.md 的 body 与全局设计指令SHARED_DESIGN_DIRECTIVESshared.ts拼接再追加【输入格式】与【用户内容】。其中有四条与本文模板直接相关、且被 example.html 严格遵循的规则禁止使用文件系统工具HTML 必须作为助手回复正文流式输出落盘由前端完成因此示例 HTML 也是可直接双击打开的单一文件。单文件自包含!DOCTYPE html开头、/html结尾head 中通过 CDN 引入 Tailwind v3 Play 与 Google Fonts示例引入了Inter与Noto Sans SC。不引用外部图片 URL优先 CSS / SVG 内联绘制——这正是 SKILL.md 中封面用 CSS 渐变 文字 logo / 几何描绘的顶层依据。内容真实性必须使用用户真实数据不得 lorem ipsum——示例 HTML 中的所有文字均来自示例输入。此外当用户对同一任务再次编辑时/api/convert还会走editFromHtml / editFromContent的最小化差异编辑分支route.ts保留原 HTML 的 head、配色与结构只按新旧内容差异替换文字节点避免每次重生成导致风格漂移。八、示例实操从输入到成品 HTML完整的输入 → 产物链路如下输入内容用户在编辑器粘贴或从示例加载见 example.md。选择模板在模板选择器中搜索 spotify 即可命中tags 含 spotify/music/now-playing/card/overlay选中后按钮上会显示 Spotify 正在播放卡与1280×720 或 600×200的尺寸提示。悬停预览 / 一键载入模板携带example.html选择器悬停时通过/api/templates/:id/example拉取并在 1280×960 的 iframe 中缩放预览route.ts、template-picker.tsx点击 载入 即可把示例内容与 HTML 一起放进编辑器。生成与渲染提交后/api/convert组装提示词含 SKILL.md body 共享指令 用户内容Agent 流式返回单文件 HTML前端捕获 stdout 并渲染在预览面板中。生产环境的成品即 example.htmlTailwind 工具类完成布局flex左右分栏、gap-5、items-stretch内联style承载渐变背景、边框与投影.wave类承载音波动效整体约 70 行未引入任何外部图片。九、自定义与扩展把这款卡片改造成自己的技能social-spotify-card的机制决定了任何人都可以低成本复制改造新增一个同族技能在next/src/lib/templates/skills/下复制文件夹并改名如social-spotify-mini修改 frontmatterid、名称、aspect_hint、tags与 body 即可开发模式下 loader 每次请求都会重扫磁盘loader.ts无需重启next dev。调整画布比例把aspect_hint改为目标值并在 body 的【画布】中同步更新例如改成 1080×1080 的方形卡仅需调整封面尺寸与信息区排布。替换设计令牌把#121212/#1DB954/#b3b3b3换成自己的品牌色即可得到一款类 Spotify的播放卡。通过市场安装外部技能包安装到~/.html-anything/skills/后会以pkg-owner__repo--originalId的命名空间 id 合并进同一注册表见 registry.ts选择器无需改动即可展示。十、相关文件速查模板定义SKILL.md示例输入example.md示例成品example.html技能加载与 frontmatter 解析loader.ts全局共享设计指令与提示词组装shared.ts转换/生成 API含 diff-editroute.ts模板选择器搜索、场景过滤、悬停预览template-picker.tsx场景常量与排序scenarios.ts一句话总结social-spotify-card的 SKILL.md 用一份 50 行不到的规范完整锁定了Spotify 正在播放卡的画布、结构、配色与内容映射规则它与 html-anything 的共享指令、磁盘加载器和转换 API 协同让任意本地 AI Agent 都能稳定复现这一经典卡片风格。赞分享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 模板实战用 social-spotify-card 生成 Spotify 正在播放卡html anything 模板实战用 social spotify card 生成 Spotify 正在播放卡 本篇技术指南围绕 html anythingAI 应用人工智能AI AgentAI 写作媒体生成html-anything 技能模板实战用 SKILL.md 生成 FlowAI 团队管理 Dashboardhtml anything 技能模板实战用 SKILL.md 生成 FlowAI 团队管理 Dashboard 导读 本文以 html anything 仓库AI 应用人工智能AI AgentAI 写作媒体生成html-anything 博客长文技能模板解析从 SKILL.md 规格到单文件 HTML 排版实现html anything 博客长文技能模板解析从 SKILL.md 规格到单文件 HTML 排版实现 导读 blog post 是 html anythinAI 应用人工智能AI AgentAI 写作媒体生成上一篇技术实现工业仪表视觉识别系统的架构解析与性能验证下一篇如何解决3D压缩开发中的痛点Draco库常见问题终极指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考