360 Secure SkillHub
360 安全技能中心

Article To Html

该 Skill 接收文章或笔记,先提炼核心论点、关键数据与金句,再依据内容调性自主设计视觉风格并生成自包含 HTML 信息图,随后强制调用后处理脚本修复样式与字号,最后按截图流程输出图片,附带 9 套风格模板与灵感文档供参考。

partigle
partigle
热度 63.04
最近更新 2026-05-11 17:36:54
分类:创作依赖:代码执行 / 读写文件 / 联网浏览搜索 / 内部调用大模型应用场景:图像生成 / 摘要总结 / 社交媒体 / 工作流

安装技能

复制下面的话术发给你的 Agent,它会通过 secure-skills 检索并安装该技能。

执行命令安装此 skill: npx secure-skills-cli add article-to-html
Metadata
name
article-to-html
description
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图,自动匹配视觉风格。触发场景:文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

文章转 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 <html文件>
    ↓
⑤ 截图交付 — 按 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 调用)