★ FEATURED ARTICLE 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 是一个本地化的 agentic HTML 编辑器它的 Skills 体系把「让 AI 生成某种类型的 HTML」封装成可复用模板。本文聚焦其中的data-report数据可视化报告Skill以仓库自带的示例数据 example.md 为主线完整拆解它的输入数据契约、模板布局规范、Chart.js 集成要点以及从数据到最终 HTML 的源码级调用链路。读完本文你将掌握如何用结构化 CSV 数据驱动 AI 生成一份可直接双击打开、内联图表与表格的专业数据周报也能理解这类「数据 → 可视化报告」模板在 html-anything 中的运行原理。一、Skill 三件套示例数据只是入口data-reportSkill 在仓库中由三个文件构成一个完整闭环示例数据文件只是其中的输入样例文件角色说明SKILL.md模板指令frontmatter 元数据 对 AI 的版面与技术要求example.md示例输入一段真实的 CSV 数据 3 条业务洞察example.html预渲染预览由示例数据生成的成品 HTML供模板选择器内联展示SKILL.md的 frontmatter 定义了 Skill 在模板选择器picker中的全部元数据name:>month,active_users,new_signups,paying,churn_rate 2024-09,8420,1240,612,0.034 2024-10,9180,1380,701,0.031 2024-11,10240,1610,840,0.028 2024-12,11800,1890,1012,0.025 2025-01,13620,2240,1218,0.023 2025-02,15440,2680,1455,0.021 2025-03,17890,3120,1722,0.020 2025-04,20640,3680,2041,0.019 2025-05,23950,4250,2418,0.018数据契约要点时间维度列month2024-09 → 2025-05共 9 个月为折线图/柱状图的 X 轴提供标签规模指标列active_usersMAU8,420 → 23,950、new_signups新增、paying付费用户数比率指标列churn_rate月流失率0.034 → 0.018即 3.4% → 1.8%是百分比类指标的标准表达方式洞察块文件末尾的# 数据周报 · 2025 年 5 月标题、数据来源内部 BI、截止日期以及 3 条「洞察」供 AI 直接复用为报告的头部信息与洞察版块内容。这份数据在example.html中被完整映射为渲染脚本中的data数组next/src/lib/templates/skills/data-report/example.html的script段可见AI 必须把 CSV 逐行解析为结构化数据而不是把原文照抄进页面。三、模板骨架七个版块的布局规范SKILL.md的指令正文把成品报告拆成七个固定版块这是 AI 生成时必须遵循的骨架头部报告标题 时间区间 数据来源说明KPI 卡片网格3-5 个最重要指标每张卡片显示数值 同比/环比变化 微型趋势线sparkline主图表区至少 2 个图表柱状/折线/饼/散点使用 Chart.js 或 EChartsjsdelivr CDN 引入数据从用户输入解析得到数据表格用户原始数据节选用table 现代化样式斑马纹、hover、sticky header洞察块3-5 条文字洞察以 emoji 开头底部「方法论」折叠区details配色克制专业主色 1 中性色阶图表使用调色板。对照example.html的成品实现七个版块一一落地头部包含Weekly Report · Week 19眉标、数据周报 · 2025 年 5 月主标题与「来源内部 BI / 截止 2025-05-11」KPI 区用grid grid-cols-2 md:grid-cols-4渲染四张卡片MAU 23,950 ▲16.0%、Signups 4,250 ▲15.5%、Paying 2,418/10.1% ▲18.5%、Churn 1.8% ▼0.1pp趋势区用双图表展示 MAU付费增长与月度流失率明细区由 JS 动态渲染tbody idrows洞察区是三张开头的卡片页尾是「方法论 · Methodology」折叠区。整份页面只有一个.num类用于数字的等宽数字特性font-feature-settings:tnum并在各处使用toLocaleString()格式化千位分隔符。四、KPI 卡片与 Chart.js必须修复的容器高度陷阱SKILL.md用一整段强调了一个新手极易踩中的技术坑这是data-report模板最具工程价值的一条约束图表容器必须有固定高度每个canvas外层包一个div styleposition:relative;height:NNNpxKPI 迷你图约 40px主图表 240–280px。Chart.js 使用responsive:true, maintainAspectRatio:false时若父容器没有显式高度会陷入 ResizeObserver 死循环图表无限增高直至卡死浏览器。绝对不要直接给 canvas 写height属性当布局那只是初始值。原因在于 Chart.js 4.x 的响应式机制maintainAspectRatio:false让图表高度完全由父容器决定而responsive:true会持续监听容器尺寸变化当父容器高度未固定例如依赖内容撑开时图表内部元素尺寸变化又会反推容器变化触发 ResizeObserver 无限回调最终导致页面卡死或图表无限增高。example.html的落地写法完全遵循该规范KPI 迷你图div classmt-3 styleposition:relative;height:40pxcanvas idkpi1/canvas/div主图表div styleposition:relative;height:260pxcanvas idchart-main/canvas/div所有图表选项统一设置responsive:true, maintainAspectRatio:false迷你图通过scales:{x:{display:false},y:{display:false}}、plugins:{tooltip:{enabled:false}}与point:{radius:0}隐藏坐标轴与数据点只保留line:{tension:0.4}的平滑趋势线。主图表还示范了混合图用法MAU 用柱状type:bar半透明橙rgba(201,100,66,0.18)付费用户数用折线type:line绿色#1f7a3a通过yAxisID与borderRadius:4精细控制视觉流失率图则用红色系#9c2a25fill:true面积图。图表颜色与 KPI 卡、页面主色#c96442橙保持同一调色板体系。五、配色与排版克制的专业感从何而来SKILL.md要求「配色克制专业主色 1 中性色阶图表用调色板」example.html给出了具体示例背景与文字页面底色#fafaf7米白正文#15140f近黑但非纯黑次级文字#5a564e暖灰主色#c96442陶土橙用于眉标、MAU 柱状图与第一条 sparkline语义色上涨#1f7a3a绿、下跌#9c2a25红且对「下降是好事」的流失率指标仍然用绿箭头▼ 0.1pp表达正向语义辅助色#e9b94a琥珀、#2348b8蓝用于其余 sparkline表格表头#f4f1ec 大写字母间距排版斑马纹#fbfaf7hover#f4f1ecposition:sticky; top:0实现吸顶表头字体正文 Inter Noto Sans SC数字用 Inter 的tnum特性实现等宽对齐避免 KPI 数值跳动。这套规范同时与 html-anything 的全局设计准则保持一致——shared.ts 中的SHARED_DESIGN_DIRECTIVES明确要求「1 个主色 2 个中性色 至多 1 个强调色」「不使用纯黑纯白#000/#fff改用 #0a0a0a / #fafafa」以及「中文与英文混排时留半角空格盘古之白」data-report是这些全局准则在数据类页面上的具体化。六、从数据到 HTML源码级的完整调用链路data-report并非独立运行的脚本而是 html-anything 转换管线中的一个 Skill。理解它在系统中的位置有助于更好地使用它。核心链路如下技能注册磁盘即注册表loader.ts 按「一个目录一个 Skill」扫描src/lib/templates/skills/id/读取SKILL.mdfrontmatter 指令正文、example.md示例输入、example.html预览成品。parseFrontmatter是零依赖的迷你解析器支持字符串、整数与单行数组字面量。模板列表接口/api/templates返回全部SkillMeta供模板选择器渲染响应带Cache-Control: public, max-age5既能合并短时间内的重复请求又能让新增 Skill 文件夹在下一次刷新立即可见。预览接口/api/templates/[id]/example一次性返回content示例输入与html预渲染成品前端点击「Preview」时省去两次往返请求。生成接口核心/api/convert接收{ agent, templateId, content, format }先loadSkill(templateId)取出data-report的指令正文再调用 shared.ts 的assemblePrompt({ body, content, format })拼装完整提示词——其结构为「共享设计指令 Skill 指令正文 输入格式 用户内容」随后invokeAgent驱动本地 AI 代理并以 SSE 流式返回生成的 HTML。共享设计指令shared.ts 中的SHARED_DESIGN_DIRECTIVES是所有 Skill 共同遵守的硬性要求其中与data-report最相关的两条是「必须使用用户提供的真实数据不要编造」与「如果用户数据是结构化数据CSV/JSON请提取关键洞察并以图表/表格呈现」。这正是SKILL.md末行「必须解析用户提供的实际数据不要捏造」的上位约束。此外/api/convert还支持editFromHtmleditFromContent参数进入最小化差异编辑模式当用户只是更新了 CSV 数据时AI 被要求保留原 HTML 的 head、字体、配色与布局仅按「旧内容 vs 新内容」的差异替换数据节点既节省输出 token也避免两次生成之间出现风格漂移。七、在 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点击查看免费下载相关推荐ADK YouTube Analyst 可视化与报告发布 Skill 实战从指标数据到可分享 HTML 报告的完整工作流ADK YouTube Analyst 可视化与报告发布 Skill 实战从指标数据到可分享 HTML 报告的完整工作流 本篇文章围绕 visualizati示例工程html-anything 的 NYT 风数据图表帧技能frame-data-chart-nyt一段结论 CSV 数据生成《纽约时报》级编辑图表html anything 的 NYT 风数据图表帧技能frame data chart nyt一段结论 CSV 数据生成《纽约时报》级编辑图表 导AI 应用人工智能AI AgentAI 写作媒体生成如何快速生成专业的Sublist3r扫描报告完整指南如何快速生成专业的Sublist3r扫描报告完整指南 Sublist3r是一款强大的子域名枚举工具专为渗透测试人员设计能够快速发现目标域名的所有子域名。本网络安全CLI上一篇OptiScaler终极指南3分钟掌握跨显卡超分辨率技术下一篇GitHub_Trending/reg/register社区贡献激励计划成为项目维护者的路径创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
阅读完成 · 觉得有帮助？
