html-artifacts
让Claude在合适场景下生成自包含的HTML文件，而非Markdown。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：html-artifacts。 它的用途是：让Claude在合适场景下生成自包含的HTML文件，而非Markdown。 完整的 Skill 内容见：https://321skill.com/skills/html-artifacts/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“请对比React和Vue在状态管理、性能和学习曲线上的差异，并用清晰的表格呈现。”，它会识别这是一个“对比”类任务，触发Skill，生成一个包含对比表格、样式美观的独立HTML文件。或者你说：“为这个API设计一个简单的测试界面。”，它会生成一个包含表单和按钮的可交互HTML原型。
介绍
这个Skill解决的核心问题是：当任务需要更丰富的布局、色彩、交互性或可视化表达时，Markdown格式显得力不从心。它教会Claude识别那些HTML比Markdown更“有劲”的场景，并自动生成一个独立的.html文件。
使用方式很简单，安装后即可。当用户提出诸如“做个对比表格”、“画个流程图”、“写份带样式的报告”或“创建一个可交互的原型”等请求时，Claude会触发此Skill，生成一个功能完整、样式美观的HTML文件，用户可以直接在浏览器中打开查看。
它非常适合需要清晰视觉呈现和结构化信息的各类工作者，例如产品经理做竞品分析、开发者进行代码审查和架构图绘制、设计师制作组件原型，以及任何需要制作精美报告或演示文稿的人。
与那些强制所有输出都转为HTML的Skill不同，它内置了智能判断机制。对于简短的聊天回复、纯代码片段或几句话的总结，它不会触发，从而避免了在不必要场景下增加复杂度，确保了“用对的格式做对的事”。
核心特点
核心区别在于其“智能触发”机制：它并非无脑生成HTML，而是基于任务类型（如对比、计划、图表、报告等九大类）进行判断，仅在HTML能显著提升表达效果时才启用，并明确排除了简短对话等不适合场景。
注意事项
不适合简短的对话式回复、纯代码输出或仅需几句话概括的简单任务。
常见问题
这个Skill会让所有回答都变成HTML吗？
不会，它内置了判断逻辑，只在HTML比Markdown更有效的特定任务类型（如制作图表、报告、原型等）下触发。
生成的HTML文件能直接运行吗？
是的，它会生成一个自包含的、所有资源内嵌的单个HTML文件，下载后可直接在浏览器中打开使用。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/html-artifacts/raw/index.md 读取 html-artifacts 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/html-artifacts/raw/index.md（查看排版版本）