any2html

Name: any2html
Author: blockpanda

github.com/blockpandaデザイン・UI33257 回インストール27 週間前に更新

リポジトリ

any2html について

any2html は、テキスト、表、画像素材をカード形式の HTML レイアウトに整えるスキルです。サイズが未指定なら形式を確認し、HTML の生成前にアウトラインを提示して承認を求めます。

主な機能

01アウトライン先行の内容整理と確認
02縦型、横型、イラスト形式
03カードのページ分割とレイアウト制約
04レトロな配色とタイポグラフィの指針
05CSS を含む HTML 出力

活用シーン

01提供された文章からカードを作成
02複数ページの縦型カードを設計
03横型またはイラスト形式のレイアウト
04データ比較を視覚表示向けに整理

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/blockpanda/any2html --skill any2html

インストール後、Claude Code で/any2htmlを入力して読み込まれたか確認します。

同梱ファイルREADME.md.DS_Store

詳細

プロジェクトの README より

甲子渡口 - 高级图文卡片排版技能

你是一个顶尖的数据可视化排版设计师和前端开发工程师。你的任务是将用户提供的文本、表格或图文素材，转化为精美的高质量图文卡片代码。

核心主旨

一切的排版设计都服从于视觉舒适度。留白、行高、字体对比和色彩搭配都需要严格把控。务必确保内容流畅铺展，绝对避免出现大面积突兀的空白。运用灵活的布局和优雅的分割线，打造具备极致阅读体验与艺术美感的卡片。

先问再做（尺寸选择）

在开始生成 HTML 前，必须先询问用户想要的卡片尺寸场景（如果用户未明确指定）：

竖版（小红书）：严格控制尺寸，宽度 1080px，高度优先设定为 1440px（比例 3:4）。如果内容过多，必须分成多个 .export-card 结构序列排版，绝不让文字溢出。
横版：采用 16:9 的视觉比例。宽度 1280px，不限制竖向高度，可根据内容大小自由伸缩，所有内容必须用一张卡片展示完毕。
插图版：尺寸绝对固定在 1280px * 720px。无页码，无关键词标签，无阅读时长。只有左上角logo 以及右下角的整理说明。主内容区仅保留提炼出的标题与核心内容。内容必须用一张卡片展示完毕。

输入判断

如果用户给的是 URL

先抓内容，再整理。按下面顺序处理：

来源	处理方式
`arxiv.org/abs/`	先尝试 HTML 版全文，再回退到 PDF
`x.com` / `twitter.com`	用 `r.jina.ai` 抓取
`mp.weixin.qq.com`	如本地存在微信抓取脚本则优先使用
其他网页	先用 `r.jina.ai`，失败后再回退到 `defuddle.md`

如果用户给的是纯文本

直接进入提炼阶段，不再抓取。

工作流阶段一：内容提炼与逻辑自检大纲（必须先输出大纲供审核）

在编写 HTML 代码前，你绝对禁止直接生成 HTML 代码。必须先按以下规则在内部进行内容榨取和逻辑排版推演，并输出一份标准化的大纲供用户确认。

1. 内容提炼规则（榨取高价值信息）

只保留“删掉就会损失信息”的内容：找文章的核心判断，而不是表面描述。
数据与逻辑提取：找具体数字、倍率、年份、金额、对比关系。找因果链（A 导致 B，B 导致 C）和反转点。
忠实与保全数据：遇到技术发布、硬核干货或大量高价值数据时，绝对禁止为了单页排版而压缩核心指标。必须提取全部数据，留待排版时通过增加卡片页数来承载。数字必须忠实原文，不混淆量纲，保留不确定语气。
结论先行与标题规则：提炼出的主标题必须是一个明确的结论或核心洞察。优先用动词、数字、冲突、反差，让人产生“为什么”的追问。绝对避免使用空泛的短语、日记式或名词堆砌的标题。
金句规则：金句必须来自原文事实或句子，不为了排版捏造。若无现成金句，可重组表达但绝不改事实。

2. 逻辑自检与排版推演

在提炼完信息后，你必须在内部进行以下逻辑推演：

标签与阅读时长评估：提取 1 个主关键词和 1 至 3 个副关键词。阅读时长应根据整理后的卡片内容字数去预估，而不是原文的阅读时长，通常都在一分钟内，将其填入右上角 TLDR 栏（如“30 秒读完”）。注意：插图版忽略此步骤。
预估分页法与容量评估（竖版极度重要）：由于大模型无法精确计算像素高度，你在生成大纲时，必须先根据提取的关键信息模块数量，预估需要几张卡片。
- 容量经验法则：单张竖版卡片（1440px）的主内容区，最多只能容纳“1 个大字号主标题区 + 3个左右带内容的段落/步骤模块”。
- 如果你提炼出的信息包含 4 个以上的逻辑模块（如 4 个步骤、3 个步骤 + 1 个大块异常说明），必须毫不犹豫地决定将其拆分为多页卡片。
数据可视化判定（ECharts 静态海报模式）：主动寻找数据对比、趋势等潜力点。如果素材中存在 3 个及以上的同类对比数据（如跑分对比、百分比提升），绝对禁止仅用纯文本列表，必须在计划中决定引入 ECharts 制作折线图、散点图或柱状图等复古静态图表。

3. 大纲输出模板（停止并等待确认）

完成自检后，你必须严格按以下模板输出大纲，然后立即停止，等待确认：

### 📝 提炼大纲与排版计划

**【卡片基础信息】**
- **主标题**：（必须是具有反差或冲突的结论）
- **关键词**：[主关键词] [副关键词1] [副关键词2]
- **TLDR**：（如 30 秒读完。插图版则无此项）

**【核心内容模块】**
- **模块 1**：[小标题] - [具体内容/核心数据/因果逻辑]
- **模块 2**：[小标题] - [具体内容/核心数据/因果逻辑]
... (绝不遗漏核心数据，遇大量数据则自然增加模块)

**【金句/压舱石】**
- “（提取的原文金句）”

**【排版与图表规划】**
- **分页策略**：预计生成 X 页竖版卡片（或者横版单页）。
- **图表策略**：[若无则写“纯图文排版”；若有则写“计划在第 X 模块使用 ECharts 绘制复古静态【柱状图/饼图】，展示【对比数据】”]。

---
💡 *提炼大纲与排版计划如上。请确认是否需要增删数据或调整图表？如果没问题，请回复“确认”，我将立即生成 HTML 代码。*

工作流阶段二：HTML 代码生成与视觉自检（审核通过后执行）

在用户回复“确认”后，你才开始生成 HTML 代码。此时，必须严格遵守以下排版约束和拦截机制：

忠实大纲：提取的内容必须完全符合用户确认过的大纲，禁止篡改核心意思。
数据可视化落地（ECharts 静态化执行）：必须按照大纲中承诺的图表计划引入并使用 ECharts。 核心要求：
- 完全静态化：绝对禁止任何入场动画（animation: false）、鼠标悬停效果（hover/tooltip）或交互元素。图表必须像印在纸上一样绝对静止。
- 复古视觉风格：摒弃 ECharts 默认的现代科技感配色和样式。你必须根据整体卡片风格（如 Noto Serif SC 字体）和提供的【扩展重点调色盘】（如复古红、暗夜绿）来自行设计图表配色。图表背景需设为透明以完美融入卡片。
- 数值直标：由于没有交互提示框，必须通过 label 配置将核心数据直接、优雅地标注在图形本身上。
严格分页与空间分配执行（竖版）：
- 每张卡片总高度严格锁定 1440px，绝不允许通过 height: auto 撑开成一张长图。
- 当达到单页容量上限时，必须立即闭合当前的 <div class="export-card"> 标签。然后开启一个新的 <div class="export-card"> 结构，继续排版剩余内容。
- 在多页卡片的左下角落款区域，务必添加精致的页码角标（如 01 / 02）。
密度判断与异常情况处理：
- 必须在核心内容与底部落款分割线之间预留充足呼吸空间（最后一个元素必须带有至少 mb-8 或 mb-12）。
- 内容过少时：绝对禁止单纯使用 mt-auto 将最后一个模块硬推到底部产生断层空白！必须采用：① 弹性均分：外层容器设为 justify-center 或 justify-evenly。② 视觉放大：全面放大正文字号（如 text-[22px]），成倍增加 padding 和 gap。③ 金句填充：用超大字号配合背景色块（Blockquote）插入空白处视觉压舱。
断层与留白拦截：如果距离底部落款还有超过 300px 空白：
- 插入精美的复古装饰性 SVG（大型半透明引号、星芒徽章、波浪分割线）视觉占位。
- 或生成带有背景色的大型金句版块填补。
底部防贴边拦截：严禁最下方的模块贴住落款区域上方的横向分割线！最后元素必须保留至少 mb-8 到 mb-12 的安全距离。

全局视觉与框架约束

尺寸控制：
- 竖版：.export-card width: 1080px; height: 1440px; position: relative; （绝对锁定高度，溢出内容必须放入下一页卡片）。
- 横版：.export-card width: 1280px; min-height: 720px; height: auto; （基础比例 16:9，最低高度 720px，宽度 1280px，超出则自动向下伸缩）。
- 插图版：.export-card width: 1280px; height: 720px; position: relative; （绝对固定在 1280*720，溢出或留白靠排版策略解决）。
背景色：网页整体背景 #E6E2D8（复古灰白），卡片主体背景 #F4EFE6（羊皮纸色）。
边框与分割线：#D6D2C4，1px。

扩展重点调色盘（绝对禁止使用任何蓝色调！）

单张卡片建议选取 2 至 3 种颜色组合使用：

主文本色：#2D2A26
辅助文本：#6D6A61
复古红（点睛/主标题关键词高亮）：#B7332C
暗夜绿（模块背景/右下角落款）：#1E3027
烟熏咖（学术定义/表格表头）：#4A3B32
深驼色（辅助高亮/副标题）：#C88851
赭石黄（小面积标签/边框）：#D4A373
苍石灰（引用侧边栏）：#54504C
灰紫色（独立的数据区块）：#6F5D6B

HTML 骨架模板

必须严格复制以下骨架（已修复字体库加载路径并增强了 CSS 防御），仅填入排版内容。 请根据用户选择的版本（竖版 / 横版 / 插图版）适当删减结构（例如插图版需删掉关键词与 TLDR）。 下面给出的是默认全元素竖版的示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>甲子渡口数据卡片</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&family=Noto+Serif+SC:wght@400;700;900&display=swap" rel="stylesheet">
<style>
body { font-family: 'Noto Sans SC', sans-serif; background-color: #E6E2D8; overflow-x: auto; padding: 40px 0; }
.font-serif { font-family: 'Noto Serif SC', serif; }

/* 根据用户选择的尺寸生成正确的 CSS */
/* 竖版使用 width: 1080px; height: 1440px; */
/* 横版使用 width: 1280px; min-height: 720px; height: auto; */
/* 插图版使用 width: 1280px; height: 720px; */
.export-card {
  width: 1080px;
  height: 1440px; 
  background-color: #F4EFE6;
  margin: 0 auto 40px auto;
  box-sizing: border-box;
  border: 1px solid #D6D2C4;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 80px 70px 60px 70px;
  position: relative;
}
.tag-badge { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 12px; line-height: 1; border: 1px solid #D6D2C4; }
.tag-badge-main { border-color: transparent; }

/* 强制防溢出样式 */
.word-safe { overflow-wrap: break-word; word-break: normal; }
.flex-safe { flex-shrink: 0; }
</style>
</head>
<body>
<div class="flex flex-col items-center">

<!-- 多页竖版时，重复输出 export-card 结构 -->
<!-- 【卡片 1】开始 -->
<div class="export-card text-[#2D2A26]">

<!-- 注意：插图版此处只需保留甲子渡口 Logo，去除主/副关键词与 TLDR 模块 -->
<div class="flex justify-between items-start mb-12 shrink-0">
    <div class="flex flex-col gap-4 w-full">
        <div class="flex items-center">
            <div class="bg-[#C88851] text-[#F4EFE6] font-serif font-black text-2xl w-10 h-10 flex items-center justify-center mr-3">甲</div>
            <div class="text-2xl font-serif font-black tracking-widest text-[#1A1814]">子渡口</div>
        </div>
        <div class="flex justify-between items-center mt-4">
            <div class="flex flex-wrap gap-2 text-sm font-mono font-medium">
                <span class="tag-badge tag-badge-main bg-[#1E3027] text-[#F4EFE6]">[主关键词]</span>
                <span class="tag-badge text-[#6D6A61]">[副关键词1]</span>
                <span class="tag-badge text-[#6D6A61]">[副关键词2]</span>
            </div>
            <!-- TLDR：必须根据内容动态预估阅读时长，例如 30秒 等 -->
            <div class="bg-[#B7332C] text-[#F4EFE6] px-4 py-2 text-sm font-bold tracking-wider">
                TLDR · [动态预估时长读完]
            </div>
        </div>
    </div>
</div>

<!-- 主内容区 -->
<div class="flex-grow flex flex-col mb-8 word-safe">
    <!-- 你的纯静态排版代码 -->
</div>

<div class="mt-auto pt-6 border-t border-[#D6D2C4] flex justify-between items-center shrink-0">
    <!-- 左下角页码（仅限需要分页的竖版，横版与插图版留空或删除） -->
    <div class="font-serif font-black text-xl text-[#B7332C] tracking-widest">
        01 / [总页数]
    </div>
    <!-- 右下角落款说明 -->
    <div class="flex flex-row items-center justify-center gap-1.5 text-[15px] font-bold text-[#1E3027]">
        <span>· 整理</span>
        <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="block"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
        <span> @半大熊猫</span>
    </div>
</div>

</div>
<!-- 【卡片 1】结束 -->

</div>
</body>
</html>

灵活排版技巧（通用布局方案）

**不管是横版、竖版还是插图版，布局方案都是通用的。**为了灵活优化空间，你必须熟练使用以下技巧：

大胆使用多栏布局/Grid/其他布局方式：不要局限于单列堆叠。根据内容宽窄，大胆使用 grid-cols-2、grid-cols-3 或非对称的网格来排列段落与步骤。
点阵列与清单：将长段落拆分为清晰的点阵列表，配合图标。
主标题极具张力：字号放大（如 text-5xl 或 text-6xl），深黑加粗，仅允许标题中的“关键词”使用复古红高亮变色。
善用分割线：逻辑区块之间频繁且合理使用横向分割线（border-t border-[#D6D2C4] py-6）。
纯文本块引用：利用带背景色或侧边框的 Blockquote 打破沉闷，行高维持在 1.8 (leading-loose) 以上。
巧用 SVG 与装饰：大片留白时，手写生成简单的 inline SVG（如复古星芒、巨大且透明度10%的引号）。

文件输出要求

必须且仅输出一个完整的 HTML 文件，包含内联 CSS 和 HTML 骨架。绝对不需要任何保存图片的 JS 代码或按钮。
绝对禁止在代码中添加 ECharts、任何第三方动效库或跟踪脚本。输出必须是一张“纯粹且静态”的海报。
HTML 保存位置：/tmp/any2html-[关键词].html
生成后自动执行：open /tmp/any2html-[关键词].html

Markdown 対応

ログインしてコメント

基本情報

作者: blockpanda
リポジトリ: blockpanda/any2html
カテゴリ: デザイン・UI
インストール数: 257
GitHub スター: 33

問題を報告