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
[Description truncada. Veja o README completo no GitHub.]