博客 / 编程代理工作流

Claude Code 输出 HTML：提示词、预览与安全检查

· AI 编程 · 阅读约 8 分钟

什么时候应该让 Claude Code 输出 HTML？当答案需要空间布局、SVG 图、折叠详情、并排比较或少量交互时，可以生成自包含 HTML；当结果需要容易 diff、在终端阅读、引用或提交到仓库文档时，优先使用 Markdown。

HTML 并不会自动带来更好的答案。它是能力更丰富、同时需要更多审查的执行格式。比较稳妥的流程是：要求编程代理生成一个边界明确的文件，先阻止脚本与网络进行预览，检查文档结构，再决定是否允许 JavaScript。

打开 HTML 本地预览与安全检查工具

HTML 与 Markdown 的选择

需求优先 Markdown优先 HTML
仓库文档源码可读、diff 清晰仓库本身需要发布 HTML 制品时
架构解释简短线性概述响应式图表、图例和可展开组件
PR 审查应留在审查系统中的评论复杂改动的独立注释式讲解
数据比较小型静态表格需要筛选、排序或关联详情
安全敏感内容默认选择审查脚本、链接和外部资源之后

生成可审查制品的提示词

创建一个自包含 HTML 文件，用于解释【主题】。

要求：
- 使用语义化 HTML 与响应式 CSS；
- 只保留一个 H1，并提供简洁 title 与 meta description；
- 只有图表确实改善理解时才使用内联 SVG；
- 不加载外部脚本、字体、图片或样式表；
- 不使用表单、iframe、object/embed 或 javascript: URL；
- 除非交互确有必要，否则不要加入 JavaScript；
- 必须使用 JavaScript 时，在代码后解释每项行为；
- 每个事实主张都引用源文件、Issue 或第一方文档；
- 最后提供验证清单。

保存为【名称】.html，不要自动打开或执行。

这些约束比一句“输出 HTML”更重要。它们让文件更容易携带，减少隐藏网络依赖，也给审查者建立了明确边界。

可复用的场景提示词

架构讲解

为这个仓库创建自包含 HTML 架构讲解。
用内联 SVG 展示请求流、信任边界与失败路径。
每个组件链接到对应本地文件路径，不使用外部资源。

PR 解释

为这份 diff 创建静态 HTML 解释。
按照正确性、安全、性能与可维护性分组。
只引用必要代码，并提供文件路径与行号。
不要虚构测试结果，区分观察事实与推断。

故障时间线

把这些带时间戳的日志整理成自包含 HTML 故障时间线。
保留原始时间戳；只有在无依赖即可实现时才增加 UTC/本地时间切换；
明确标记数据空缺与假设。

更安全的预览流程

  1. 先读源码。搜索脚本、内联事件、表单、frame、外部 URL 和 javascript: 等协议。
  2. 禁用脚本预览。EasyTool 预览使用来源隔离 iframe 和限制性 CSP。
  3. 检查文档质量。核对 title、语言、H1、描述、图片替代文本和响应式表现。
  4. 单独审查交互。确实需要脚本时，理解代码后再在沙箱中明确开启。
  5. 保存并 diff。把审查后的制品放入版本控制，使后续变化可见。

为什么需要沙箱

生成的 HTML 可以包含可执行 JavaScript、网络请求、跟踪像素、收集凭据的表单或第三方嵌入。即使模型没有恶意，也可能从示例中复现不安全模式。因此预览应从渲染结构与 CSS 所需的最小权限开始。

sandbox 属性和内容安全策略可以降低风险，但不能把未知代码变成可信代码。不要对不可信的同源内容同时开启 allow-scripts 和 allow-same-origin，也不要把静态扫描结果当成安全证明。

文档质量清单

来源与延伸阅读

相关 EasyTool 工具