Artifact-HTML

把任意内容做成 claude.ai 风格的独立 HTML 网页。用户用它把想法、知识、流程整理成一张可分享、可保存为 PNG 的展示页。

为什么有这个 skill

claude.ai 的 Artifact 渲染出来很漂亮——深色背景、清晰节点图、卡片化排版——但保存下来本地打不开（原因：claude.ai 给的只是片段，缺 DOCTYPE/外壳/Tailwind/CSS 变量，浏览器靠默认值兜底就坏了）。这个 skill 直接生成"本地能开、能分享、能截图"的同款风格 HTML。

五条核心原则

理解先行 — 读完内容再动手。不清楚的地方先问，别瞎猜。
可视化优先 — 能用图表达的不要用纯文字。结构、流程、关系都画出来；纯文字只在解释细节时用。
独立可打开 — 必须是完整 HTML5 文档（DOCTYPE/html/head/body/meta charset/style）。双击 .html 直接看效果。不是 claude.ai 片段。
布局先行 — 动手前先用 ASCII 线框图说明每个区块的位置和内容，让用户确认再生成。
可分享 — 每个 HTML 内置"导出 PNG"按钮，点一下拿到分享图。

执行流程

Step 1：理解内容和意图（必做）

读用户给的内容（文件、链接、文本），问自己四个问题：

类型：概念/知识、流程/步骤、对比、时间线、计划、清单、单一主张？
主旨：用户想强调什么？让读者带走什么？
目标读者：用户自己（思考工具）还是给别人看（分享物料）？后者要求美感更高、更易懂。
细节深度：只要一页结构图？还是要带详解面板可点击展开？

任一关键点拿不准，先问用户——用大白话问："这个内容主要是给谁看的？是想强调哪一块？"

Step 2：决定单文件还是拆分

建议拆分的信号（满足 1 个就提）：

内容含 4 个及以上相对独立主题/章节
总字数超过 5000 字
同时混合多种性质（如概念 + 详细操作 + 多个案例）
用户明确说"分开"或"做成系列"

拆分计划格式（直接复制改）：

建议拆成 3 个 HTML：
1. <文件名1>.html — 主旨总览（结构图 + 4 条主线）
2. <文件名2>.html — 主线 A 详解（流程图 + 步骤卡）
3. <文件名3>.html — 主线 B 详解（对比表 + 案例卡）

文件之间用页面顶部"上一页 / 下一页 / 总览"小导航互相跳转。

先报计划，等用户确认再开干。

Step 3：用 ASCII 线框图说布局

每个 HTML 都画一个线框图，标注每块用什么颜色组、什么可视化形式。例：

┌────────────────────────────────────────────────┐
│  主标题  [.c-purple 顶部条]                       │
└──┬─────────────┬────────────┬──────────────────┘
   ↓             ↓            ↓
┌──────────┐ ┌──────────┐ ┌──────────┐
│ 分支 A   │ │ 分支 B   │ │ 分支 C   │
│ .c-blue  │ │ .c-teal  │ │ .c-coral │
└────┬─────┘ └────┬─────┘ └────┬─────┘
     └────────────┼────────────┘
                  ↓
┌──────────────────────────────────────┐
│  实现/汇总层  [.c-amber 单条]           │
└──┬──────┬──────┬──────┬───────────────┘
   ↓      ↓      ↓      ↓
[卡1]  [卡2]  [卡3]  [卡4]   [.c-gray 可点击]

[下方：Tab 切换详解面板 × 4]
[右下浮动：📷 导出 PNG 按钮]

让用户确认或修改后再写代码。给一句话总结："上面这样画对不？要改的话告诉我哪块换什么。"

Step 4：生成完整 HTML

按 assets/base-template.html 模板写。关键要点：

必须有 <!DOCTYPE html> + <html lang="..."> + <meta charset="UTF-8">（否则中文乱码）
<style> 块内含完整的 CSS 变量和 .c-*/.th/.ts/.arr 类——查 references/style-tokens.md
SVG <rect> 永远要 fill（否则默认黑色就是事故）；文字永远要 fill 或从父组继承
选哪种可视化形式？查 references/visualization-patterns.md 的决策表
末尾加 html2canvas CDN + 导出 PNG 按钮——查 references/png-export.md

Step 5：打开验证

open <生成的文件>.html   # macOS
xdg-open <生成的文件>.html   # Linux
start <生成的文件>.html   # Windows

让用户看一眼，按需微调（颜色、字号、位置）。颜色用 .c-* 类、字号用 px 数值、SVG 元素位置用 x/y 坐标，都在 <style> 块和 SVG 标签里直接改即可。

沟通口吻

用大白话沟通："这块我打算放一张知识结构图，左中右三个分支，颜色用紫/蓝/青——这样行不？"
少堆术语：用"颜色"代替"CSS 变量"，用"方块"代替"SVG rect"
主动给用户看 ASCII 线框图，让他用眼睛而不是脑子确认
改起来很快的小调整（颜色、字号），直接帮他改；他自己也能改的位置告诉他在哪一行

文件落地位置

默认放在内容所在目录或用户工作目录的 inbox/ 类暂存夹
用户没明说时问一句："这个 HTML 放哪？"

资源索引

文件	用途
`references/style-tokens.md`	claude.ai 完整 CSS 变量、配色、字体、字号、Tab 模板
`references/visualization-patterns.md`	内容形态 → 可视化形式决策表（必查）
`references/png-export.md`	一键导出 PNG 按钮的集成代码
`assets/base-template.html`	完整可改基础模板（直接复制改）
`examples/encoding_knowledge_map.html`	真实成品样例，双击可看效果

artifact-html