html-anything 社媒矩阵追踪 Skill 深度解析：用 75 个技能之一构建电影感多平台社媒看板

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本地 AI Agent 驱动的 HTML 编辑器内置技能目录中social-media-matrix社媒矩阵追踪面板的完整设计与实现。该技能属于dashboard类别、面向creator创作者场景通过一份 SKILL.md 定义意图与布局、一份 1258 行的 example.html 提供可直接运行的单文件预览实现。读完本文你将掌握该技能从元数据、提示词骨架到交互式图表渲染的完整技术脉络并理解 html-anything 的文件夹即技能注册机制如何让模板无需改一行 TS 代码即可上线。技能元数据frontmatter 如何驱动选择器与推荐位social-media-matrix的 SKILL.md 以 YAML frontmatter 开头这些字段并不是摆设——它们会被 loader.ts 中的无依赖 frontmatter 解析器读取并映射为选择器template picker可消费的SkillMeta结构字段本技能取值在代码中的消费方式namesocial-media-matrix技能目录 id即src/lib/templates/skills/id/的文件夹名zh_name社媒矩阵追踪面板选择器与转换流程中的中文展示名en_nameSocial Media Matrix Tracker英文展示名emoji️选择器卡片上的图标description电影感多平台社媒分析互动图、悬浮洞察、区间对比、明暗主题选择器中的一句话摘要categorydashboard技能分类scenariocreator对应 scenarios.ts 中的creator场景键会显示在 picker 的场景筛选 chip 上aspect_hint桌面长页转换 API 中用于告知 Agent 输出版式也影响预览布局featured1选择器顶部精选分组标记tags[matrix,tracker,multi-platform]选择器搜索与标签展示值得注意的实现细节parseFrontmatter只支持扁平 schema字符串、整数、单行数组字面量如tags: [a, b]而featured和recommended这类数字字段会被Number()转换并校验有限性loader.ts。也就是说新增一个技能只需要新建一个文件夹 写一份符合该 schema 的 SKILL.mdlistSkills()会自动扫描SKILLS_DIR下的所有目录loader.ts并经 api/templates/route.ts 以Cache-Control: public, max-age5暴露给前端开发模式下缓存会被绕过改完 SKILL.md 刷新即可生效。意图与布局一份可交给 Agent 的设计规格书SKILL.md 正文部分以极简中文描述了该技能的核心契约意图Intent电影感、数据密集的多平台社媒看板——这是风格基调要求电影感的视觉语言与数据密集的信息承载能力并存。布局Layout四个固定区块——Hero header统一品牌 时间窗 主题切换、Multi-platform KPI matrix横 platform × 纵 metric、交互式 chartshover tooltip range compare、Insights drawer右抽屉文字洞察、Top posts grid。设计细节Design Detailsdark/light 切换数据用 seed 兜底即示例数据为演示用种子数据真实使用时应替换为真实账号数据。这段正文会在生成 HTML 时被 shared.ts 的assemblePrompt()拼接到全局设计指令之后、用户内容之前构成 Agent 提示词的模板部分。也就是说SKILL.md 正文不是给人读的说明文档而是一份直接进 prompt 的结构化规格——Agent 会按 Hero header → KPI matrix → charts → insights → top posts 的顺序组织输出。与此同时SHARED_DESIGN_DIRECTIVES给出了硬性约束单文件自包含 HTML、禁写文件系统、内容驱动卡片数量、必须使用用户提供的真实数据shared.ts。featured: 1与aspect_hint: 桌面长页则会分别影响 picker 的精选分组与预览宽高比。示例实现拆解example.html 的电影感从何而来技能的 example.html 是一份完整的单文件 HTML内联 CSS 原生 Canvas/JS无任何外部依赖既是 picker 中的内联预览hasHtml: true由 loader.ts 检测也是 Agent 理解电影感数据看板的最直观参照物。其实现可以拆成三层1. 视觉层CSS 变量驱动的明暗双主题:root定义了完整的暗色 token 体系html[data-themelight]覆盖同名变量实现明暗切换example.html。变量覆盖了背景色、面板透明度、边框、文字、语义色--good/--danger/--blue/--violet等与投影——切换主题时所有组件自动换肤这正是 SKILL.md 中dark/light 切换设计细节的直接落地。视觉电影感还来自三层叠加cinematic-bg 固定背景层径向渐变光斑 两个 conic-gradient 旋转光球 噪点grain 斜向光带streak配合bgDrift/orb1/orb2/streakMove四种动画持续漂移example.htmlframe 玻璃拟态容器backdrop-filter: blur(14px)的毛玻璃面板叠加顶部辉光圆点aura与斜向高光描边鼠标视差监听mousemove对.frame施加perspective(1200px) rotateY/rotateX微旋转让整块看板产生 3D 倾斜感example.html。字体方面大数字与标题使用衬线字体Cormorant Garamond正文使用Inter形成数据看板 杂志感的混排气质KPI 数值采用numberTween缓动函数在 700ms 内从 0 滚动到目标值配合fadeUp入场动画强化数据看板的活感。2. 数据层seed 数据与多平台切换SKILL.md 提到的数据用 seed 兜底在脚本中体现为const data {...}对象按x/linkedin/youtube/instagram四个平台各存一份完整快照标题、副标题、粉丝数、KPI 数组、平台矩阵renderNetwork(network)负责把对应快照写进 DOMexample.html。脚本启动时渲染第一个平台随后setInterval(..., 3600)每小时轮播一次模拟跨平台数据流的实时感。这意味着示例默认展示的是演示种子数据用户实际使用时需替换为真实数据这也与全局设计指令必须使用用户提供的真实数据一致。页面信息架构完整复刻了 SKILL.md 的四段布局Hero header品牌 时间窗 chip 7D/30D/90D/YTD 明暗切换 操作按钮→ 平台与 KPI 矩阵 → 双层网格图表区 → 底部三列深潜分析转化漏斗 / SLA / ROI / 留存 / 地域贡献。右侧的 insights-panel 以 sticky 定位固定在视口内实时回显图表交互产生的洞察即 SKILL.md 中Insights drawer的轻量实现。3. 交互层hover tooltip、区间对比与 A/B 分析图表全部用原生 Canvas 绘制无图表库依赖并实现了 SKILL.md 要求的交互式 chartshover tooltip range compare。bindChartInteractions()为hourChart/slaChart/roiChart/cohortChart四个折线图统一绑定了一套完整交互协议example.html操作行为Hover定位最近数据点绘制虚线十字准星 高亮圆点弹出 tooltip 显示数值、环比与同比基线单击tap固定/取消固定一个数据点pin写入 Insights 面板拖拽选择一段区间实时计算 Avg / Peak / Low 并同步到 Insights 面板Shift拖拽将区间保存进ranges[]上限 4 段两段以上自动触发 A/B 对比洞察双击清空所有 pin / ranges重置 Insights 面板←/→ 方向键画布聚焦后可键盘步进移动 pin无障碍支持触屏touchstart/move/end 复用同一套逻辑拖拽与 tap-pin 均可触屏完成tooltip 采用先渲染到屏幕外测量尺寸、再钳制回视口内的策略ensureTooltip/showTooltip避免越界拖拽中指针离开画布会主动放弃当前区间防止残留高亮。折线图的drawLineChart还内置了空数据与单点数据守卫空数组绘制 No data 文案、单点绘制一个圆点而非除零崩溃这为用户只给稀疏数据的真实场景做了防御example.html。除折线图外示例还包含四种附加图表类型drawStackBars内容组合堆叠柱状图Video/Thread/Carousel 三段、drawDonut情绪分布环形图按角度命中检测悬停扇区、drawGeoBars地域贡献横向条形图、buildHeatmap72 格随机化发布时段热力图每张图都独立响应 hover 并联动 Insights 面板——这是数据密集要求的直接体现。从 Skill 到 HTML转换管线如何消费这份规格social-media-matrix在运行时并不是被直接执行而是通过 html-anything 的转换 API 被组合进提示词。链路如下前端向POST /api/convert提交{ agent, templateId: social-media-matrix, content, format, ... }convert/route.ts 调用loadSkill(templateId)从磁盘加载 SKILL.md正文 frontmatter example 文件再调用assemblePrompt({ body: skill.body, content, format })拼出最终提示词提示词交给invokeAgent()支持 Claude Code / Cursor / Codex / Gemini / Copilot 等本地 Agent CLI返回的 HTML 以 SSE 流式回传前端若用户修改内容后再次生成editFromHtml/editFromContent会被传入走buildEditPrompt生成最小化差异编辑指令——保留原 HTML 的设计骨架只按新旧内容差异替换数据节点convert/route.ts避免每次重生成导致创意漂移。由此可以看出aspect_hint: 桌面长页的实际作用它会在 diff-edit 与初始生成的提示词中传递版式提示让 Agent 输出适配长滚动看板的布局。而featured: 1则让该技能在 picker 中进入精选分组recommended字段同样控制排序数字越小排名越靠前见 loader.ts。如何查看与使用该技能查看元数据与示例直接阅读 SKILL.md 与 example.htmlexample.html 是纯静态单文件浏览器直接打开即可体验完整交互。在应用中调用启动next应用后打开模板选择器在 dashboard 分类或精选分组中选中社媒矩阵追踪面板粘贴你的多平台数据CSV / JSON / 文本均可选择本地 Agent 后即可生成对应看板 HTML随后可一键导出为 HTML / PNG 或分享到微信、X、知乎等渠道。API 直接访问GET /api/templates返回含social-media-matrix在内的全部技能元数据GET /api/templates/social-media-matrix/example返回该技能的示例内容与 HTML。相关测试佐证技能注册与加载机制有完整的测试覆盖可参阅 spec.test.ts、loader-merge.test.ts 与 paths.test.tsCLI 侧的提示词装配逻辑与 web 侧保持一致见 prompt-assemble.ts 及其对应测试。小结social-media-matrix是 html-anything 技能体系中dashboard 类、creator 场景的代表作SKILL.md 用 10 行不到的规格定义了电影感多平台看板的意图、布局与设计细节example.html 则以零依赖的单文件实现证明这份规格可以被稳定渲染——Canvas 折线图 拖拽区间 ShiftA/B 对比 键盘/触屏可达性 明暗主题 seed 数据兜底构成了一个数据密集但交互清晰的可复用看板版式。对开发者而言它同时是一份如何写一个高质量 dashboard 技能的范本frontmatter 元数据负责接入注册体系正文负责约束 Agent 输出example 文件负责给 Agent 与用户一个可见即所得的目标形态。关键参考文件技能定义next/src/lib/templates/skills/social-media-matrix/SKILL.md完整示例实现next/src/lib/templates/skills/social-media-matrix/example.html技能注册与加载next/src/lib/templates/loader.ts、next/src/lib/templates/index.ts提示词装配next/src/lib/templates/shared.ts转换 APInext/src/app/api/convert/route.ts技能列表 APInext/src/app/api/templates/route.ts场景词表next/src/lib/templates/scenarios.ts赞分享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点击查看免费下载相关推荐PaddleOCR-VL-1.6终极指南96.33% SOTA精度的文档解析革命PaddleOCR VL 1.6终极指南96.33% SOTA精度的文档解析革命 PaddleOCR VL 1.6是飞桨团队推出的新一代文档解析模型在OmnMediaCrawler多平台社交媒体数据采集利器深度解析MediaCrawler多平台社交媒体数据采集利器深度解析 在当今数据驱动的时代社交媒体数据已成为企业决策、市场分析和用户洞察的重要依据。MediaCraw网页爬虫数据分析AutoNumeric社区贡献指南如何参与这个开源项目的开发与维护AutoNumeric社区贡献指南如何参与这个开源项目的开发与维护 AutoNumeric是一个独立的JavaScript库提供实时的国际化数字和货币格式化前端上一篇从 README 读懂 bRPC工业级 C RPC 框架的能力全景与快速上手指南下一篇Giga-World-1训练流程详解从Stage 1到Stage 2蒸馏完整教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考