文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
文章转 HTML 信息图
功能概述
文章转 HTML 信息图是一项面向实际任务的技能，主要用于文章 → 提炼核心信息 → 生成 HTML 信息图 → 后处理 → 截图交付；你是设计师，不是模板填充机；
核心要点
- 根据文章内容自由设计视觉风格，不要每次都用同一个模板；
- 内容决定形式 — 严肃分析用深色/衬线，轻松科普用手账/波普，技术教程用终端/蓝图；
- 信息精炼 — 一张图讲清一个核心论点 + 3-4 个支撑模块，不是把文章全文塞进去；
使用与执行
手机第一 — 图片在手机。它将相关步骤、工具调用和结果整理方式集中到统一流程中，帮助使用者更快完成目标并减少重复操作。从功能定位来看，该技能强调把分散的操作要求整理成清晰、可复用的处理流程，使用户能够围绕既定目标快速准备输入、选择执行方式并获得结构化结果。
结果检查与注意事项
实际使用前应先确认任务范围、数据来源、运行环境、必要权限和关键参数，再依据技能说明逐步执行；若输入条件不完整，应先补齐信息或采用保守配置，避免因错误假设导致结果偏离需求。执行过程中需要关注工具调用是否成功、接口或依赖是否可用、输出格式是否符合预期，并对异常提示、缺失字段和边界情况进行处理；涉及批量任务时，还应保存进度，避免中断后重复操作。
文章转 HTML 信息图
文章 → 提炼核心信息 → 生成 HTML 信息图 → 后处理 → 截图交付。
设计理念
你是设计师，不是模板填充机。 根据文章内容自由设计视觉风格，不要每次都用同一个模板。
- 内容决定形式 — 严肃分析用深色/衬线，轻松科普用手账/波普，技术教程用终端/蓝图
- 信息精炼 — 一张图讲清一个核心论点 + 3-4 个支撑模块，不是把文章全文塞进去
- 手机第一 — 图片在手机上缩放 3 倍，字号必须够大（详见
rules/01-技术底线.md） - 每次不同 — 配色、字体、布局每次都应该有变化，避免千篇一律
工作流程
用户给文章
↓
① 内容分析 — 提取核心论点、关键数据、对比维度、避坑要点、金句
↓
② 自由设计 — 根据内容调性，自主决定视觉风格、配色、布局
（可参考 rules/03-风格灵感.md 和 templates/ 获取灵感）
↓
③ 生成 HTML — 自包含 HTML，必须遵守 rules/01-技术底线.md
↓
④ 后处理 — 生成后立即执行：
bash ~/.openclaw/skills/article-to-html/scripts/post-process.sh
↓
⑤ 截图交付 — 按 rules/02-截图流程.md 执行
步骤④ 是强制的。 无论你对自己生成的 HTML 多有信心，都必须跑后处理脚本。
目录结构
| 目录/文件 | 地位 | 说明 |
|---|---|---|
rules/01-技术底线.md |
必读 | 字号、宽度、overflow 等硬性约束 |
rules/02-截图流程.md |
必读 | Chrome DevTools 截图 5 步流程 |
rules/03-风格灵感.md |
参考 | 9 种风格的配色/字体/特征，用于激发灵感 |
templates/ |
参考 | 9 个 HTML 模板，可浏览获取灵感，不要照抄 |
scripts/post-process.sh |
工具 | 一键后处理（fix CSS + 注入字号兜底） |
scripts/fix-html.js |
工具 | CSS 修复脚本（被 post-process.sh 调用） |
相关专题
在网页制作中，HTML空格代码是实现文本排版的常用技巧。本合集详解多种空格写法：如 （不换行空格）、 （半角空格）、 （全角空格）等实体编码，及CSS控制空白的white-space属性。覆盖基础用法、场景差异与注意事项，助新手快速掌握不同空格效果的实现逻辑，轻松解决排版对齐难题，提升页面美观度与可读性。
2025.11.27
409
16
本合集聚焦“CSS嵌入HTML”核心技巧，为新手提供清晰指引。教程从基础讲起，详解行内样式（style属性）、内部样式表（<style>标签）与外部样式表（link引入）三种主流嵌入方式，对比其适用场景与优缺点。通过实例演示代码编写与效果呈现，助你快速掌握不同场景下的选择逻辑。内容简洁直观，零基础也能轻松上手，高效实现网页样式控制，开启前端美化第一步。
2025.11.27
288
8
HTML弹窗通过HTML、CSS和JavaScript实现，核心是创建默认隐藏的浮层元素并由交互触发显示。本专题为大家提供相关的文章、下载、课程内容，供大家免费下载体验。
2025.10.20
307
9
通过JavaScript操作video元素的currentTime属性实现视频快进快退。本专题为大家提供相关的文章、下载、课程内容，供大家免费下载体验。
2025.10.20
1315
8
热门下载
相关下载
精品课程
最新文章