← 返回
未分类

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图,自动匹配视觉风格。触发场景:文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图,自动匹配视觉风格。触发场景:文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
partigle partigle 来源
未分类 clawhub v1.0.0 1 版本 100000 Key: 无需
★ 1
Stars
📥 579
下载
💾 4
安装
1
版本
#latest

概述

文章转 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 调用)

版本历史

共 1 个版本

  • v1.0.0 当前
    2026-05-03 06:23 安全 安全

安全检测

腾讯云安全 (Keen)

安全,无风险
查看报告

腾讯云安全 (Sanbu)

安全,无风险
查看报告

🔗 相关推荐

ai-agent

Claude Code Connector

partigle
通过 ACP 桥接调用 Claude Code。触发词:调用 Claude、让 Claude 处理、claude code。使用方式:调用 Claude Code 分析这个文件
★ 1 📥 1,014
design-media

Nano Banana Pro

steipete
使用 Nano Banana Pro (Gemini 3 Pro Image) 生成或编辑图像。支持文生图、图生图及 1K/2K/4K 分辨率,适用于图像创建、修改及编辑请求,使用 --input-image 指定输入图像。
★ 428 📥 116,617
design-media

UI/UX Pro Max

xobi667
提供 UI/UX 设计智能与实现指导,帮助打造精美界面。适用于 UI 设计、UX 流程、信息架构、视觉风格、设计系统/标记、组件规格、文案/微文案、无障碍及前端 UI(HTML/CSS/JS、React、Next.js、Vue、Svelte
★ 216 📥 47,092