Receber por email
← Voltar para o catálogo

artifact-html

Converte qualquer conteúdo em uma página HTML autônoma no estilo Artifact escuro do claude.ai, focando na visualização de estrutura e fluxo. Ativado quando o usuário pede para "fazer em estilo claude.ai", "visualizar este conteúdo" ou "transformar em página para compartilhar".

1estrelas
Atualizado há 5 meses

Ver no GitHub ↗

Como adicionar

/plugin marketplace add huasanai/artifact-html

O comando exato pode variar conforme o repositório. Confira o README no GitHub.

Para o autor da skill

Cole no README do seu repo

Mostra que sua skill está catalogada na Skillteca, gera backlink e tráfego rastreável.

[![Skillteca](https://www.skillteca.com.br/api/badge/artifact-html/svg)](https://www.skillteca.com.br/skills/artifact-html)
#ai

Alerta por categoria

Receba novas skills de Escrita e Conteúdo toda segunda

1 email curto, só com as skills novas de Escrita e Conteúdo. 4 minutos de leitura, sem spam, cancela com 1 clique.

Você confirma o email no primeiro envio. Sem spam. Cancela com 1 clique.

Ler descrição completa

Artifact-HTML

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

为什么有这个 skill

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

五条核心原则

  1. 理解先行 — 读完内容再动手。不清楚的地方先问,别瞎猜。
  2. 可视化优先 — 能用图表达的不要用纯文字。结构、流程、关系都画出来;纯文字只在解释细节时用。
  3. 独立可打开 — 必须是完整 HTML5 文档(DOCTYPE/html/head/body/meta charset/style)。双击 .html 直接看效果。不是 claude.ai 片段。
  4. 布局先行 — 动手前先用 ASCII

[Description truncada. Veja o README completo no GitHub.]

Compartilhar X LinkedIn