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 是一款Agent 写 HTML、你来发布的本地 AI 编辑器其内置的 75 个 Skills 模板之一 ——frame-data-chart-nytNYT 风数据图表帧—— 专门用于把一段原始数据CSV / JSON / 一句结论自动转译成《纽约时报》专栏风格的折线图、柱状图或范围带图表帧。读完本文你将掌握该模板的完整设计规范画布、配色、排版、动画时间线、它背后的源码级实现链路从SKILL.md到/api/convert的 Prompt 组装与 Agent 调用以及如何利用附带的example.md/example.html快速复刻一张可交付的单文件图表。模板定位从 frontmatter 读懂这张图表的骨架frame-data-chart-nyt的完整定义位于 SKILL.md文件头部的 YAML frontmatter 是该模板在注册表里的身份证name: frame-data-chart-nyt zh_name: NYT 风数据图表帧 en_name: NYT-Style Data Chart Frame emoji: description: NYT-newsroom 排版 错峰揭示动画 编辑级图表 (折线/柱/范围带) category: video scenario: video aspect_hint: 1920×1080 (16:9) featured: 46 tags: [data, chart, nyt, editorial, frame] example_id: sample-frame-data-chart-nyt example_name: NYT 风折线图 · 全球用户量 example_format: markdown example_tagline: 编辑级图表 错峰揭示 example_desc: 8 年周活跃用户折线 NYT red accent 注释 mono几个关键字段的含义值得展开category: video/scenario: video模板归属于video场景。在 scenarios.ts 中video是 12 个官方场景键之一marketing、engineering、operations、product、design、finance、sales、hr、personal、education、creator、videoSCENARIO_ORDER将它排在最后一位。选模板时video 筛选组即可命中该模板。aspect_hint: 1920×1080 (16:9)输出画布固定 16:9适合视频片段、推文卡片等横向媒介。featured: 46注册表的排序权重数值越小在精选列表里越靠前。example_*一组字段声明了随模板附带的示例example_id: sample-frame-data-chart-nyt格式为 markdown 输入、HTML 输出这在模板选择器里会直接渲染成可预览的卡片。从源码结构看每个 skill 就是一个文件夹SKILL.md负责 frontmatter Prompt 正文example.md是可选的示例输入example.html是预渲染预览。如 loader.ts 的注释所述新增一个模板 新增一个文件夹不需要改动任何 TypeScript 代码API 路由会重新扫描磁盘客户端重新拉取/api/templates即可。意图与适用场景一帧图表的使用说明书模板正文开篇即定义了意图把一段数据CSV / JSON / 一句结论做成《纽约时报》专栏感的单帧/动画图表适合视频片段或推特卡。这里有三层信息输入形态很宽可以是结构化数据CSV、JSON也可以只是一句结论性文字如月活翻了三倍。模板据此分两种绘制路径——有数据直接画只有结论则估算坐标并标注schematic。输出是单帧不是完整网页或长报告而是一张可以嵌入视频流、发推特的独立帧画布锁定 1920×1080。风格基准是 NYT newsroom编辑级排版 克制配色 数据注释属于图表海报而非仪表盘。画布与配色二选一的双主题模板规定画布1920×1080底色二选一暖白底#f7f5ee示例采用example.html的body { background:#f7f5ee }可验证墨黑底#0e0e0e。文字色与背景相反白底深字、黑底浅字。色彩系统遵循1 主色 1 accent主色 ink接近墨黑的正文色示例中为#1a1a1aaccent 三选一NYT red#a91d1d、编辑 mint#5fb38a、暖橙#d97757。示例选择了经典的 NYT red。这个配色约束同样被全局设计指令所呼应shared.ts 中的SHARED_DESIGN_DIRECTIVES要求1 个主色 2 个中性色 至多 1 个强调色并禁止纯黑纯白改用#0a0a0a/#fafafa。布局拆解四段式版面模板把画面自上而下分为四个固定区域比例是硬约束顶部 kicker11px大写 letter-spacing 0.14em颜色跟随 accent。内容是数据来源 类目示例为GLOBAL · MONTHLY ACTIVE USERS · 2018–2026右上角还配了FRAME 04 · CHART这类帧序号。大字标题衬线字体Cheltenham / Playfair / Source Serif Pro示例实际使用Source Serif Pro字号5.6vw级别可带 italic 副标。关键约束标题必须是从用户数据中提炼出的结论而不是对图表的描述。示例标题是AI agent 月活在 2024 之后进入两段抛物线这就是数据叙事而非图表旁白。图表区占画布 55–65%支持三种图表形态见下节。底部 source footnote10pxmonoopacity 0.6格式固定为Source: 用户数据 · Chart by html-anything。图表区三形态折线、柱状、范围带模板对三种图表形态都给出了可执行的绘制参数折线1–2 条线主线 ink 实心2.5px次线 dashed1.5px数据点用6px实心圆关键点旁标注2024 · 412M样式的黑色 mono 小字。柱状全部 ink 单色或只加 1 道 accent 高亮柱柱顶放大数字柱底类目用 Cheltenham italic。范围带range band浅灰填充#e6e2d2包络 中线 ink。模板在设计细节中还明确了坐标系规范Y 轴刻度仅用 hairline细线 3–4 个 tick标签置于轴外侧 mono 字体。example.html的 SVG 正是这么实现的——4 条stroke-width0.5的轴参考线opacity 0.254 个 mono 刻度值640M / 420M / 210M / 0x 轴标签为18–26的年份缩写。错峰揭示动画一张帧的时间线这是该模板最具辨识度的部分动画按时间线错峰出场元素起始时刻动画标题0sfade-inkicker200ms出现折线400msstroke-dashoffset1.2s ease-out 描线数据标签依次100ms 间隔逐个浮现example.html里可以找到这条时间线的实现keyframes draw { from { stroke-dashoffset: 1000 } to { stroke-dashoffset: 0 } }.line类用animation: draw 1.4s ease-out .4s forwards, fadeIn .1s linear .4s forwards组合出延迟 400ms 后 1.4s 描线 淡入。折线元素因此声明了stroke-dasharray:1000作为描线动画的轨道。模板同时强调动画必须可被prefers-reduced-motion关闭这是无障碍底线与全局指令中动效仅在必要处使用的设计准则一致。设计红线哪些事绝对不做模板用绝不 / 严禁列出了清晰的负面清单这些是评测生成结果时的硬性标准绝不使用 chart.js / d3 图表库除非经 jsdelivr CDN 引入推荐手写 inline SVG不超过 80 行严禁全屏铺线的 grid、阴影、3D 立体柱、emoji字体栈固定标题Source Serif Pro/Cheltenham缺省则Playfair Display正文IBM Plex Sans/Inter数据标签IBM Plex Mono。示例example.html完整遵守了这些约束图表是 100% 手写 SVGviewBox0 0 1100 460无任何图表库无阴影无 emoji字体栈依次为Source Serif Pro、IBM Plex Sans、IBM Plex Mono并兼容中文Noto Sans SC。数据真实性绝不编造schematic 兜底模板对数据来源有硬性要求必须使用用户提供的数据输入是文本结论时可自动估算合理坐标但必须标注schematic示意输入是CSV / JSON时直接绘制不得凭空发挥。这一约束与全局指令 shared.ts 的内容真实性条款完全同构必须使用用户提供的真实数据不要编造、不要 lorem ipsum。而 convert 路由 在最小化差异编辑diff-edit模式下也会再次强调不要捏造数据新内容里没有的就不要写。实例对照从 example.md 到 example.html 的完整还原随模板附带的示例是一个很好的端到端参考输入与输出一一对应输入 example.md—— 一句结论 9 行 CSVyear,MAU_millions 2018,12 2019,28 2020,58 2021,90 2022,140 2023,210 2024,310 2025,468 2026,640输出 example.html演示了模板规范的完整落地单文件、可直接双击打开通过cdn.tailwindcss.com引入 Tailwind v3Google Fonts 引入三套字体均符合全局指令的 CDN 要求标题提炼结论AI agent 月活在 2024 之后进入两段抛物线折线图主线 ink 实心2.5px后三段用 NYT red stroke-dasharray6 5的虚线强调转折段数据点前 6 个r4ink 色、后 3 个r6红色——精确对应模板关键点标注 accent 高亮范围带用红色opacity0.06的面积路径勾勒增长包络模板默认浅灰#e6e2d2此处以红做弱化替换仍是包络 中线结构数据点注释使用模板指定的 mono 小字格式2024 · 310M、2025 · 468M、2026 · 640M另加了 serif italic 的拐点标注 Inflection point是模板允许的结论叙事延伸。它如何被 html-anything 消费源码链路从模板文件到浏览器里的可交互编辑frame-data-chart-nyt走完整条注册表链路磁盘扫描与 frontmatter 解析loader.ts 的parseFrontmatter读取SKILL.md的 YAML 头listSkills()汇总src/lib/templates/skills/下所有合法目录id 需匹配^[a-z0-9][a-z0-9-]*$loadSkill(id)一次性加载 Prompt 正文与可选的example.md/example.html。注册表 APItemplates 路由 以Cache-Control: public, max-age5返回全部SkillMetaexample 路由 按 id 返回示例的内容与 HTML 捆绑包前端Preview一次请求即可拿到全部素材。Prompt 组装shared.ts 的assemblePrompt把全局设计指令 模板正文skill.body 用户内容拼成最终 Prompt/api/convert路由在提交编辑时会优先走最小化差异编辑分支保留原 HTML 的设计只改数据节点。Agent 执行与流式输出invoke.ts 解析出 Agent 二进制后 spawn 子进程Prompt 通过 stdin 或--message传入stdout 以 SSE 流式回传delta/html/meta事件前端实时渲染。这意味着你给 AI 一句数据描述或一份 CSVframe-data-chart-nyt的模板正文 全局设计指令共同约束出NYT 排版 手写 SVG 错峰动画 数据真实的完整输出全程零 API Key由本地的 Claude Code / Cursor / Codex / Gemini / Copilot / OpenCode / Qwen / Aider 等 CLI Agent 直接生成。上手路径三种方式消费这个模板直接看示例阅读 example.md 与 example.html 的对照理解输入数据 → 输出图表的转化范式在编辑器里生成打开 html-anything 的模板选择器在 video 场景或搜索data/chart/nyt命中该 skill粘贴自己的 CSV / JSON 或一句结论Agent 会按模板规范流式输出单文件 HTML复刻与迁移想自定义同风格模板直接复制frame-data-chart-nyt文件夹改 frontmatter 与正文即可——按 loader.ts 的约定新增文件夹即新增模板无需改任何 TS 代码重启或开发模式下热刷新后选择器即可见。小结frame-data-chart-nyt是 html-anything 把数据叙事工程化的一个缩影frontmatter 定义元数据与示例入口正文定义版式与动效规范示例文件提供可对照的黄金实现而 loader → API → prompt 组装 → Agent 流式输出的链路则让给一段 CSV 得到一张 NYT 风图表帧变成一次零配置的本地操作。对于需要高频产出数据图表帧的视频作者、运营与开发者它是值得优先调用的开箱即用技能。赞分享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点击查看免费下载相关推荐把 CSV 变成图表Lieflat Charts 日常使用 10 个高频请求模板清单新手直接抄把 CSV 变成图表Lieflat Charts 日常使用 10 个高频请求模板清单新手直接抄 拿到一份 CSV最想要的就是一张能直接发出去的图表。LieAI 技能数据可视化图表库screenshot-to-code 更新历史中的多图支持从前端历史消息到多模态 Prompt 的完整实现screenshot to code 更新历史中的多图支持从前端历史消息到多模态 Prompt 的完整实现 在 screenshot to code 的“迭代AI 应用人工智能AI AgentAI 写作媒体生成image2csv终极指南图像表格数据一键转CSVimage2csv终极指南图像表格数据一键转CSV 在数据处理工作中我们经常会遇到表格以图片形式存储的情况这使得数据无法直接编辑和分析。image2csv上一篇Dagu 开发者手册如何扩展自定义执行器和添加新功能下一篇Sailboat UI 项目常见问题解决方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
