HTML Artifacts（HTML 工件）

HTML Artifacts 指由 Claude-Code 或其他智能体生成的单文件/轻量网页式交付物：它们不是传统网站，而是用于阅读、对比、解释、调参、原型验证或分享的临时界面。Thariq 的核心判断是：当智能体已经能生产复杂计划、报告和设计探索时，Markdown 作为默认输出格式会限制信息密度与可读性，而 HTML 能把文本、表格、SVG、CSS、脚本、布局和交互放进同一个可打开、可分享的容器。

为什么重要

1. 信息密度更高：HTML 可以同时表达文档结构、表格、设计系统、SVG 图解、代码片段、交互控件、工作流和空间布局；这比 ASCII 图、长 Markdown 列表或纯文本颜色描述更适合复杂方案评审。
2. 人类更愿意读：超过百行的 Markdown 计划很容易被跳过；HTML 可以用 tabs、卡片、图示、响应式布局和强调层级降低阅读阻力。
3. 更容易分享：Markdown 往往要作为附件或依赖渲染器；HTML 上传到 S3、GitHub Pages 或内部静态站后就是一个普通链接。
4. 支持双向交互：HTML 可以加入 slider、knob、drag-and-drop、表单和“copy as prompt/JSON/diff”按钮，把人的调整再导出给智能体继续执行。

典型用例

• 规格、计划与探索：让 Claude-Code 生成多个方案的视觉对比、数据流、mockup 和关键代码片段，而不只是输出一份线性 Markdown 计划。
• 代码审查与理解：把 diff、模块关系、调用流、风险等级和边注放在同一页，补足 GitHub diff 或纯文本审查的局限。
• 设计与原型：用 HTML 快速试组件、动画、按钮状态、设计系统或跨端布局，再交给 React、Swift 等工程实现。
• 报告、研究与学习：把代码库、Slack、Linear、git history、网页搜索等上下文综合成一次性可读的解释页、研究报告或 slide/deck。
• 一次性编辑器：为具体数据创建临时 UI，例如票据优先级拖拽、feature flag 表单、prompt live preview、数据集筛选与导出。

与 Markdown 的关系

HTML Artifacts 并不必然取代 Markdown。更稳妥的分工是：Markdown 仍适合作为 agent 可读、版本控制友好、长期维护的源格式；HTML 更适合作为面向人类评审、分享和交互的呈现层。这也解释了为什么 Agent-输出格式 应该由“谁读、怎么用、是否需要交互”决定，而不是固定为某一种格式。

风险与限制

• HTML diff 噪声大，不如 Markdown 适合代码审查和长期版本管理。
• CSS/JS 交互会增加生成时间和维护复杂度；文章估计 HTML 生成可能比 Markdown 慢 2–4 倍。
• 复杂交互如果不保存状态，用户在页面里调整参数后刷新可能丢失，容易造成“以为已经记录”的错觉。
• 邮件 HTML、企业门户、权限分享等场景有兼容性与安全限制，不能把“本地 artifact 好用”直接外推到所有交付渠道。

相关概念

• Claude-Code：读取文件系统、MCP、浏览器和 git history 后生成 HTML Artifacts 的主要执行环境。
• Agent-输出格式：决定智能体应输出 Markdown、HTML、纯文本、JSON 还是其他格式的上层判断。
• Agentic-Coding：HTML Artifacts 是智能体编码从“写代码”扩展到“生成可评审界面”的表现。
• MCP：为 HTML Artifact 提供 Slack、Linear、Notion 等外部上下文来源。