企业官网建设流程全解析

• AI 应用
• 人工智能
• AI Agent
• AI 写作
• 媒体生成

导读

本文聚焦 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结构：

值得注意的实现细节：parseFrontmatter只支持扁平 schema（字符串、整数、单行数组字面量，如tags: ["a", "b"]），而featured和recommended这类数字字段会被Number()转换并校验有限性（loader.ts）。也就是说，新增一个技能只需要"新建一个文件夹 + 写一份符合该 schema 的 SKILL.md"，listSkills()会自动扫描SKILLS_DIR下的所有目录（loader.ts），并经 api/templates/route.ts 以Cache-Control: public, max-age=5暴露给前端，开发模式下缓存会被绕过，改完 SKILL.md 刷新即可生效。

意图与布局：一份可交给 Agent 的"设计规格书"

SKILL.md 正文部分以极简中文描述了该技能的核心契约：

• 意图（Intent）：电影感、数据密集的多平台社媒看板——这是风格基调，要求"电影感"的视觉语言与"数据密集"的信息承载能力并存。
• 布局（Layout）：四个固定区块——Hero header（统一品牌 + 时间窗 + 主题切换）、Multi-platform KPI matrix（横 platform × 纵 metric）、交互式 charts（hover tooltip + range compare）、Insights drawer（右抽屉文字洞察）、Top posts grid。
• 设计细节（Design Details）：dark/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-theme="light"]覆盖同名变量实现明暗切换（example.html）。变量覆盖了背景色、面板透明度、边框、文字、语义色（--good/--danger/--blue/--violet等）与投影——切换主题时所有组件自动换肤，这正是 SKILL.md 中"dark/light 切换"设计细节的直接落地。视觉"电影感"还来自三层叠加：

• cinematic-bg 固定背景层：径向渐变光斑 + 两个 conic-gradient 旋转光球 + 噪点（grain）+ 斜向光带（streak），配合bgDrift/orb1/orb2/streakMove四种动画持续漂移（example.html）；
• frame 玻璃拟态容器：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)负责把对应快照写进 DOM（example.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 要求的"交互式 charts（hover tooltip + range compare）"。bindChartInteractions()为hourChart/slaChart/roiChart/cohortChart四个折线图统一绑定了一套完整交互协议（example.html）：

tooltip 采用"先渲染到屏幕外测量尺寸、再钳制回视口内"的策略（ensureTooltip/showTooltip），避免越界；拖拽中指针离开画布会主动放弃当前区间，防止残留高亮。折线图的drawLineChart还内置了空数据与单点数据守卫：空数组绘制 "No data" 文案、单点绘制一个圆点而非除零崩溃，这为"用户只给稀疏数据"的真实场景做了防御（example.html）。

除折线图外，示例还包含四种附加图表类型：drawStackBars（内容组合堆叠柱状图，Video/Thread/Carousel 三段）、drawDonut（情绪分布环形图，按角度命中检测悬停扇区）、drawGeoBars（地域贡献横向条形图）、buildHeatmap（72 格随机化发布时段热力图），每张图都独立响应 hover 并联动 Insights 面板——这是"数据密集"要求的直接体现。

从 Skill 到 HTML：转换管线如何消费这份规格

social-media-matrix在运行时并不是被直接"执行"，而是通过 html-anything 的转换 API 被组合进提示词。链路如下：

1. 前端向POST /api/convert提交{ agent, templateId: "social-media-matrix", content, format, ... }；
2. convert/route.ts 调用loadSkill(templateId)从磁盘加载 SKILL.md（正文 + frontmatter + example 文件），再调用assemblePrompt({ body: skill.body, content, format })拼出最终提示词；
3. 提示词交给invokeAgent()（支持 Claude Code / Cursor / Codex / Gemini / Copilot 等本地 Agent CLI），返回的 HTML 以 SSE 流式回传前端；
4. 若用户修改内容后再次生成，editFromHtml/editFromContent会被传入，走buildEditPrompt生成"最小化差异编辑"指令——保留原 HTML 的设计骨架，只按新旧内容差异替换数据节点（convert/route.ts），避免每次重生成导致创意漂移。

由此可以看出aspect_hint: "桌面长页"的实际作用：它会在 diff-edit 与初始生成的提示词中传递版式提示，让 Agent 输出适配长滚动看板的布局。而featured: 1则让该技能在 picker 中进入"精选"分组（recommended字段同样控制排序，数字越小排名越靠前，见 loader.ts）。

如何查看与使用该技能

• 查看元数据与示例：直接阅读 SKILL.md 与 example.html；example.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.ts；CLI 侧的提示词装配逻辑与 web 侧保持一致，见 prompt-assemble.ts 及其对应测试。

小结

social-media-matrix是 html-anything 技能体系中"dashboard 类、creator 场景"的代表作：SKILL.md 用 10 行不到的规格定义了电影感多平台看板的意图、布局与设计细节，example.html 则以零依赖的单文件实现证明这份规格可以被稳定渲染——Canvas 折线图 + 拖拽区间 + Shift+A/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
• 转换 API：next/src/app/api/convert/route.ts
• 技能列表 API：next/src/app/api/templates/route.ts
• 场景词表：next/src/lib/templates/scenarios.ts

• AI 应用
• 人工智能
• AI Agent
• AI 写作
• 媒体生成