Claude Code 团队：为什么我们从 Markdown 转向 HTML

公众号名称：程叙架构与AI.

作者名称：AI兴观点

发布时间：2026-05-09 11:30

原文链接：https://x.com/trq212/status/2052809885763747935

cover_image

Original AI兴观点程叙架构与AI.

✅点击上方🔺公众号🔺关注我✅

Markdown 正在成为 Agent 效率的瓶颈——Claude Code 团队已经开始用 HTML 替代。

说这话的是 Claude Code 核心成员 @trq212。他在 X 上发了篇长文，讲为什么自己和团队越来越多地用 HTML 替代 Markdown 作为 Agent 输出格式。以下是原文翻译。

Markdown 已经是 Agent 和我们沟通的主流文件格式。简单、可移植、有一定的富文本能力，还方便你编辑。Claude 甚至已经能用 ASCII 在 Markdown 文件里画示意图了。

但 Agent 越来越强之后，我开始觉得 Markdown 是个限制。超过一百行的 Markdown 文件，我自己都不读。 我想要更丰富的可视化、颜色、示意图，还要能方便地分享出去。

另外，我自己也越来越少直接编辑这些文件了——我把它们当 specs、参考文件、头脑风暴输出物来用。就算要改，我也是让 Claude 去改，这反而让 Markdown 的编辑优势变得不那么重要了。

我已经开始用 HTML 替代 Markdown 作为输出格式，而且越来越多地看到 Claude Code 团队里其他人也在这么做。原因如下。

想先看例子？这里有一批 HTML 示例：https://thariqs.github.io/html-effectiveness。看完记得回来继续读。

为什么是 HTML

信息密度

HTML 能承载的信息远比 Markdown 丰富。它当然能做简单的标题和格式，但它还能表达：

表格数据 →
视觉设计 → CSS
示意图 → SVG
代码片段 → `</code></li><li style="margin: 8px 0;line-height: 1.7 !important;color: \#2b2b2b !important;" data-md-type="list" data-md-index="16">交互 → JavaScript + CSS</li><li style="margin: 8px 0;line-height: 1.7 !important;color: \#2b2b2b !important;" data-md-type="list" data-md-index="17">工作流 → SVG 和 HTML</li><li style="margin: 8px 0;line-height: 1.7 !important;color: \#2b2b2b !important;" data-md-type="list" data-md-index="18">空间数据 → 绝对定位和 Canvas</li><li style="margin: 8px 0;line-height: 1.7 !important;color: \#2b2b2b !important;" data-md-type="list" data-md-index="19">图像 → <code style="font-family: "SF Mono", Consolas, monospace;padding: 3px 6px;background-color: \#f0ece4 !important;color: \#b75c3d !important;border-radius: 4px;font-size: 12px !important;line-height: 1.5 !important;"><img></code></li></ul> <p style="margin: 18px 0 !important;line-height: 1.7 !important;color: \#2b2b2b !important;" data-md-type="paragraph" data-md-index="20">我甚至想说：几乎没有任何信息是 Claude 能读但 HTML 不能高效表达的。这使它成为模型向你传递深度信息的最佳方式。</p> <p style="margin: 18px 0 !important;line-height: 1.7 !important;color: \#2b2b2b !important;" data-md-type="paragraph" data-md-index="21">![[raw/assets/110875154c3ea78dd9746b81e7dc73e8_MD5.jpg]] width="100%"></p> <p style="margin: 18px 0 !important;line-height: 1.7 !important;color: \#2b2b2b !important;" data-md-type="paragraph" data-md-index="22">我发现在没有 HTML 的情况下，模型会在 Markdown 里做各种低效的事——比如 ASCII 示意图，或者我最喜欢的——用 unicode 字符来代表颜色，就像上面这张截图。</p> <p style="margin: 18px 0 !important;line-height: 1.7 !important;color: \#2b2b2b !important;" data-md-type="paragraph" data-md-index="23">![[raw/assets/efbeb2309ab662d5ce77e4dac712ae88_MD5.png]] width="100%"></p> <h3 style="font-size: 21px;font-weight: 600;color: \#2b2b2b !important;line-height: 1.4 !important;margin: 28px 0 14px;" data-md-type="heading" data-md-index="24">视觉清晰度</h3> <p style="margin: 18px 0 !important;line-height: 1.7 !important;color: \#2b2b2b !important;" data-md-type="paragraph" data-md-index="25">随着 Claude 能做越来越复杂的工作，它写出来的 specs 和方案也越来越大。实际上，我发现自己超过 100 行的 Markdown 文件基本不会去读，更别说让团队里的其他人读了。</p> <p style="margin: 18px 0 !important;line-height: 1.7 !important;color: \#2b2b2b !important;" data-md-type="paragraph" data-md-index="26">但 HTML 文档读起来轻松得多。Claude 可以把结构按视觉方式组织——用标签导航、插图、链接等。甚至可以做成移动端自适应，在不同设备上有不同的阅读体验。</p> <p style="margin: 18px 0 !important;line-height: 1.7 !important;color: \#2b2b2b !important;" data-md-type="paragraph" data-md-index="27">![[raw/assets/5bc09e4260fd296b2c78359dfa4e19d7_MD5.jpg]] width="100%"></p> <h3 style="font-size: 21px;font-weight: 600;color: \#2b2b2b !important;line-height: 1.4 !important;margin: 28px 0 14px;" data-md-type="heading" data-md-index="28">方便分享</h3> <p style="margin: 18px 0 !important;line-height: 1.7 !important;color: \#2b2b2b !important;" data-md-type="paragraph" data-md-index="29">Markdown 文件的分享很尴尬——大多数浏览器不原生渲染，你得作为附件发邮件或消息。</p> <p style="margin: 18px 0 !important;line-height: 1.7 !important;color: \#2b2b2b !important;" data-md-type="paragraph" data-md-index="30">HTML 只要上传到某个地方（比如 S3），分享链接就行。同事在任何设备上都能直接打开，随时参考。</p> <p style="margin: 18px 0 !important;line-height: 1.7 !important;color: \#2b2b2b !important;" data-md-type="paragraph" data-md-index="31"><strong style="font-weight: 700;color: \#b75c3d !important;background-color: rgba(183,92,61,0.08);padding:0 4px;border-radius:4px;">你的 spec、报告或 PR 说明，用 HTML 格式被人认真阅读的概率会高很多。</strong></p> <h3 style="font-size: 21px;font-weight: 600;color: \#2b2b2b !important;line-height: 1.4 !important;margin: 28px 0 14px;" data-md-type="heading" data-md-index="32">双向交互</h3> <p style="margin: 18px 0 !important;line-height: 1.7 !important;color: \#2b2b2b !important;" data-md-type="paragraph" data-md-index="33">HTML 可以让你和文档交互。比如你可以让 Claude 加一些滑块或旋钮来调整设计，或者调整算法的不同参数看看效果。你还可以让它加一个复制按钮，把你调整好的参数直接作为 prompt 粘贴回 Claude Code。</p> <p style="margin: 18px 0 !important;line-height: 1.7 !important;color: \#2b2b2b !important;" data-md-type="paragraph" data-md-index="34">![[raw/assets/f10639e3c383c8b0117c2c0dfa8488d0_MD5.jpg]] width="100%"></p> <h3 style="font-size: 21px;font-weight: 600;color: \#2b2b2b !important;line-height: 1.4 !important;margin: 28px 0 14px;" data-md-type="heading" data-md-index="35">数据整合</h3> <p style="margin: 18px 0 !important;line-height: 1.7 !important;color: \#2b2b2b !important;" data-md-type="paragraph" data-md-index="36">为什么用 Claude Code 来做 HTML 文件而不是 ClaudeAI 或 Claude Design？一个最大的原因是 Claude Code 能读到的上下文。</p> <p style="margin: 18px 0 !important;line-height: 1.7 !important;color: \#2b2b2b !important;" data-md-type="paragraph" data-md-index="37">举个例子，在写这篇文章时，我让 Claude Code 读取我的代码目录，找到所有我生成的 HTML 文件，分组归类，然后生成一个带示意图的 HTML 总览。你现在看到的这篇文章里的示意图，就是这样来的。</p> <p style="margin: 18px 0 !important;line-height: 1.7 !important;color: \#2b2b2b !important;" data-md-type="paragraph" data-md-index="38">除了文件系统，Claude Code 还能通过 MCP 获取更多上下文（Slack、Linear 等）、你的浏览器（通过 Claude in Chrome）、你的 Git 历史等等。</p> <h3 style="font-size: 21px;font-weight: 600;color: \#2b2b2b !important;line-height: 1.4 !important;margin: 28px 0 14px;" data-md-type="heading" data-md-index="39">有乐趣</h3> <p style="margin: 18px 0 !important;line-height: 1.7 !important;color: \#2b2b2b !important;" data-md-type="paragraph" data-md-index="40">用 Claude 做 HTML 文档就是更有趣。让人有参与感和投入感。<strong style="font-weight: 700;color: \#b75c3d !important;background-color: rgba(183,92,61,0.08);padding:0 4px;border-radius:4px;">单这一条，已经够了。</strong></p> <h2 style="font-size: 26px;font-weight: 600;color: \#b75c3d !important;line-height: 1.35 !important;margin: 32px 0 16px;" data-md-type="heading" data-md-index="41">怎么开始</h2> <p style="margin: 18px 0 !important;line-height: 1.7 !important;color: \#2b2b2b !important;" data-md-type="paragraph" data-md-index="42">我有点担心有人看了这篇文章就去写个 <code style="font-family: "SF Mono", Consolas, monospace;padding: 3px 6px;background-color: \#f0ece4 !important;color: \#b75c3d !important;border-radius: 4px;font-size: 12px !important;line-height: 1.5 !important;">/html skill</code> 或者类似的模板。虽然那可能也有点用，但我想强调的是——你不需要做什么特别的事。直接让 Claude "做一个 HTML 文件" 或者 "做一个 HTML artifact" 就行。</p> <p style="margin: 18px 0 !important;line-height: 1.7 !important;color: \#2b2b2b !important;" data-md-type="paragraph" data-md-index="43">关键是你要清楚这个 artifact 用来做什么、你会怎么用它。时间长了你可以写一个 skill，但现在我建议你从零开始 prompt，先感受一下不同场景下的用法。</p> <h2 style="font-size: 26px;font-weight: 600;color: \#b75c3d !important;line-height: 1.35 !important;margin: 32px 0 16px;" data-md-type="heading" data-md-index="44">使用场景</h2> <p style="margin: 18px 0 !important;line-height: 1.7 !important;color: \#2b2b2b !important;" data-md-type="paragraph" data-md-index="45">说得具体一点，我为不同场景做了很多 HTML 文件。你可以在 https://thariqs.github.io/html-effectiveness/ 看到全部，下面是概览。</p> <h3 style="font-size: 21px;font-weight: 600;color: \#2b2b2b !important;line-height: 1.4 !important;margin: 28px 0 14px;" data-md-type="heading" data-md-index="46">方案、规划与探索</h3> <p style="margin: 18px 0 !important;line-height: 1.7 !important;color: \#2b2b2b !important;" data-md-type="paragraph" data-md-index="47">HTML 是 Claude 深入一个问题的丰富画布。当我开始处理一个问题时，我不会写一个简单的 Markdown 方案，而是预期生成一系列 HTML 文件。</p> <p style="margin: 18px 0 !important;line-height: 1.7 !important;color: \#2b2b2b !important;" data-md-type="paragraph" data-md-index="48">比如，我先让 Claude Code 头脑风暴、探索不同选项。然后让它深入其中一个方向，做些原型或代码片段。感觉不错了再让它写实施方案。方案满意了，我新建一个 session，把所有文件传给它去实现。</p> <p style="margin: 18px 0 !important;line-height: 1.7 !important;color: \#2b2b2b !important;" data-md-type="paragraph" data-md-index="49">验证的时候，我让验证 agent 读这些文件，它就能获得更全面的上下文。</p> <p style="margin: 18px 0 !important;line-height: 1.7 !important;color: \#2b2b2b !important;" data-md-type="paragraph" data-md-index="50"><strong style="font-weight: 700;color: \#b75c3d !important;background-color: rgba(183,92,61,0.08);padding:0 4px;border-radius:4px;">示例 prompt：</strong></p> <blockquote style="margin: 24px 0;padding: 16px 20px;background-color: rgba(183, 92, 61, 0.04) !important;border-left: 4px solid \#b75c3d;color: \#555 !important;border-radius: 4px;" data-md-type="quote" data-md-index="51"> <p style="margin: 18px 0 !important;line-height: 1.7 !important;color: \#2b2b2b !important;">我不确定 onboarding 界面该往哪个方向走。生成 6 种截然不同的方案——在布局、语气和信息密度上各有差异——放在一个 HTML 文件的网格里，让我可以并排比较。每个方案标注它所做的取舍。</p> </blockquote> <blockquote style="margin: 24px 0;padding: 16px 20px;background-color: rgba(183, 92, 61, 0.04) !important;border-left: 4px solid \#b75c3d;color: \#555 !important;border-radius: 4px;" data-md-type="quote" data-md-index="52"> <p style="margin: 18px 0 !important;line-height: 1.7 !important;color: \#2b2b2b !important;">写一份详尽的实施方案，用 HTML 文件。做几个原型图，展示数据流，加上我想审查的重要代码片段。要让我读起来轻松。</p> </blockquote> <p style="margin: 18px 0 !important;line-height: 1.7 !important;color: \#2b2b2b !important;" data-md-type="paragraph" data-md-index="53">![[raw/assets/515ed96f3cfb7798ca6a887d586770b2_MD5.jpg]] width="100%"></p> <h3 style="font-size: 21px;font-weight: 600;color: \#2b2b2b !important;line-height: 1.4 !important;margin: 28px 0 14px;" data-md-type="heading" data-md-index="54">代码审查与理解</h3> <p style="margin: 18px 0 !important;line-height: 1.7 !important;color: \#2b2b2b !important;" data-md-type="paragraph" data-md-index="55">代码在 Markdown 文件里很难读。但用 HTML 我们可以渲染 diff、注释、流程图、模块结构等。用来理解 agent 写的代码、做代码审查、或者向审核 PR 的人解释改动。</p> <p style="margin: 18px 0 !important;line-height: 1.7 !important;color: \#2b2b2b !important;" data-md-type="paragraph" data-md-index="56"><strong style="font-weight: 700;color: \#b75c3d !important;background-color: rgba(183,92,61,0.08);padding:0 4px;border-radius:4px;">我现在给每个 PR 都附带一个 HTML 代码解释文件，比 GitHub 默认的 diff 视图好用得多。</strong></p> <p style="margin: 18px 0 !important;line-height: 1.7 !important;color: \#2b2b2b !important;" data-md-type="paragraph" data-md-index="57"><strong style="font-weight: 700;color: \#b75c3d !important;background-color: rgba(183,92,61,0.08);padding:0 4px;border-radius:4px;">示例 prompt：</strong></p> <blockquote style="margin: 24px 0;padding: 16px 20px;background-color: rgba(183, 92, 61, 0.04) !important;border-left: 4px solid \#b75c3d;color: \#555 !important;border-radius: 4px;" data-md-type="quote" data-md-index="58"> <p style="margin: 18px 0 !important;line-height: 1.7 !important;color: \#2b2b2b !important;">帮我审查这个 PR，创建一个 HTML artifact 来描述它。我对 streaming/backpressure 逻辑不太熟，重点讲那个部分。把实际的 diff 渲染出来，加上行内边注，按严重等级用颜色标记发现的问题，再加任何有助于理解这个概念的内容。</p> </blockquote> <p style="margin: 18px 0 !important;line-height: 1.7 !important;color: \#2b2b2b !important;" data-md-type="paragraph" data-md-index="59">![[raw/assets/202c185b80119190f92340eb07df8352_MD5.png]] width="100%"></p> <h3 style="font-size: 21px;font-weight: 600;color: \#2b2b2b !important;line-height: 1.4 !important;margin: 28px 0 14px;" data-md-type="heading" data-md-index="60">设计与原型</h3> <p style="margin: 18px 0 !important;line-height: 1.7 !important;color: \#2b2b2b !important;" data-md-type="paragraph" data-md-index="61">Claude Design 基于 HTML 是有原因的——HTML 在设计表达上极其丰富，即使你的最终交付物不是 HTML。Claude 可以用 HTML 草稿设计，然后翻译成你需要的语言（React、Swift 等）。</p> <p style="margin: 18px 0 !important;line-height: 1.7 !important;color: \#2b2b2b !important;" data-md-type="paragraph" data-md-index="62">你还可以做交互原型——动画、操作反馈等。让 Claude 加一些滑块、旋钮来精确调整你想要的效果。</p> <p style="margin: 18px 0 !important;line-height: 1.7 !important;color: \#2b2b2b !important;" data-md-type="paragraph" data-md-index="63"><strong style="font-weight: 700;color: \#b75c3d !important;background-color: rgba(183,92,61,0.08);padding:0 4px;border-radius:4px;">示例 prompt：</strong></p> <blockquote style="margin: 24px 0;padding: 16px 20px;background-color: rgba(183, 92, 61, 0.04) !important;border-left: 4px solid \#b75c3d;color: \#555 !important;border-radius: 4px;" data-md-type="quote" data-md-index="64"> <p style="margin: 18px 0 !important;line-height: 1.7 !important;color: \#2b2b2b !important;">我想做一个新的结算按钮原型：点击时播放一个弹跳动画，然后快速变成紫色。创建一个带几个滑块和选项的 HTML 文件，让我可以试不同的动画参数。加一个复制按钮来复制调好的参数。</p> </blockquote> <p style="margin: 18px 0 !important;line-height: 1.7 !important;color: \#2b2b2b !important;" data-md-type="paragraph" data-md-index="65">![[raw/assets/2ef5b0dffdba2e52198306ffca0941f6_MD5.jpg]] width="100%"></p> <h3 style="font-size: 21px;font-weight: 600;color: \#2b2b2b !important;line-height: 1.4 !important;margin: 28px 0 14px;" data-md-type="heading" data-md-index="66">报告、研究与学习</h3> <p style="margin: 18px 0 !important;line-height: 1.7 !important;color: \#2b2b2b !important;" data-md-type="paragraph" data-md-index="67">Claude Code 非常擅长跨多个数据源整合信息，生成可读性高的报告。你可以让 Claude 搜索你的 Slack、代码库、Git 历史、互联网等，生成极其可读的报告——给自己、给领导、给团队。</p> <p style="margin: 18px 0 !important;line-height: 1.7 !important;color: \#2b2b2b !important;" data-md-type="paragraph" data-md-index="68">可以做成长 HTML 文档、交互式讲解页，甚至幻灯片/演示文稿。让 Claude 用 SVG 来做示意图。</p> <p style="margin: 18px 0 !important;line-height: 1.7 !important;color: \#2b2b2b !important;" data-md-type="paragraph" data-md-index="69"><strong style="font-weight: 700;color: \#b75c3d !important;background-color: rgba(183,92,61,0.08);padding:0 4px;border-radius:4px;">示例 prompt：</strong></p> <blockquote style="margin: 24px 0;padding: 16px 20px;background-color: rgba(183, 92, 61, 0.04) !important;border-left: 4px solid \#b75c3d;color: \#555 !important;border-radius: 4px;" data-md-type="quote" data-md-index="70"> <p style="margin: 18px 0 !important;line-height: 1.7 !important;color: \#2b2b2b !important;">我不懂我们的限流器到底是怎么工作的。读相关代码，给我生成一个 HTML 说明页：token-bucket 的流程图、3-4 个关键代码片段带注释、底部加一个「常见坑」章节。优化到让人一次性读懂。</p> </blockquote> <p style="margin: 18px 0 !important;line-height: 1.7 !important;color: \#2b2b2b !important;" data-md-type="paragraph" data-md-index="71">![[raw/assets/45a9d38b8e232ee56a791ce1c454893e_MD5.jpg]] width="100%"></p> <h3 style="font-size: 21px;font-weight: 600;color: \#2b2b2b !important;line-height: 1.4 !important;margin: 28px 0 14px;" data-md-type="heading" data-md-index="72">自定义编辑界面</h3> <p style="margin: 18px 0 !important;line-height: 1.7 !important;color: \#2b2b2b !important;" data-md-type="paragraph" data-md-index="73">有时候你很难在文本框里纯粹用文字描述你想要的东西。这种情况下，我会让 Claude 给我做一个<strong style="font-weight: 700;color: \#b75c3d !important;background-color: rgba(183,92,61,0.08);padding:0 4px;border-radius:4px;">一次性的编辑器</strong>，专门用来处理当前这件事。不是一个产品，不是一个可复用的工具，就是一个 HTML 文件，为这一份数据而生。</p> <p style="margin: 18px 0 !important;line-height: 1.7 !important;color: \#2b2b2b !important;" data-md-type="paragraph" data-md-index="74">关键是一定要以导出结尾：一个「复制为 JSON」或「复制为 prompt」的按钮，把你在 UI 里做的操作转换成可以粘贴回 Claude Code 的东西。</p> <p style="margin: 18px 0 !important;line-height: 1.7 !important;color: \#2b2b2b !important;" data-md-type="paragraph" data-md-index="75"><strong style="font-weight: 700;color: \#b75c3d !important;background-color: rgba(183,92,61,0.08);padding:0 4px;border-radius:4px;">示例 prompt：</strong></p> <blockquote style="margin: 24px 0;padding: 16px 20px;background-color: rgba(183, 92, 61, 0.04) !important;border-left: 4px solid \#b75c3d;color: \#555 !important;border-radius: 4px;" data-md-type="quote" data-md-index="76"> <p style="margin: 18px 0 !important;line-height: 1.7 !important;color: \#2b2b2b !important;">我需要重新排列这 30 个 Linear 任务。给我做一个 HTML 文件，每个任务是一张可拖拽的卡片，分在 Now / Next / Later / Cut 四列里。先按你的判断做个初始排序。加一个「复制为 markdown」按钮，导出最终排序并给每组加一行理由。</p> </blockquote> <blockquote style="margin: 24px 0;padding: 16px 20px;background-color: rgba(183, 92, 61, 0.04) !important;border-left: 4px solid \#b75c3d;color: \#555 !important;border-radius: 4px;" data-md-type="quote" data-md-index="77"> <p style="margin: 18px 0 !important;line-height: 1.7 !important;color: \#2b2b2b !important;">这是我们的 feature flag 配置。给我做一个基于表单的编辑器，按区域分组，显示依赖关系，如果我启用了一个依赖条件没满足的 flag，发警告。加一个「复制 diff」按钮，只输出改动的 key。</p> </blockquote> <blockquote style="margin: 24px 0;padding: 16px 20px;background-color: rgba(183, 92, 61, 0.04) !important;border-left: 4px solid \#b75c3d;color: \#555 !important;border-radius: 4px;" data-md-type="quote" data-md-index="78"> <p style="margin: 18px 0 !important;line-height: 1.7 !important;color: \#2b2b2b !important;">我在调优这个 system prompt。做一个左右并排的编辑器：左边是带变量占位的可编辑 prompt，右边是三个示例输入，实时渲染填充后的模板。加字符/token 计数器和复制按钮。</p> </blockquote> <p style="margin: 18px 0 !important;line-height: 1.7 !important;color: \#2b2b2b !important;" data-md-type="paragraph" data-md-index="79">![[raw/assets/605e676e46ac8876466deb7bfea32109_MD5.jpg]] width="100%"></p> <h2 style="font-size: 26px;font-weight: 600;color: \#b75c3d !important;line-height: 1.35 !important;margin: 32px 0 16px;" data-md-type="heading" data-md-index="80">常见问题</h2> <p style="margin: 18px 0 !important;line-height: 1.7 !important;color: \#2b2b2b !important;" data-md-type="paragraph" data-md-index="81"><strong style="font-weight: 700;color: \#b75c3d !important;background-color: rgba(183,92,61,0.08);padding:0 4px;border-radius:4px;">不是更费 token 吗？</strong> Markdown 通常用更少的 token，但我发现 HTML 带来的表达力提升，加上我实际会去读它，整体输出质量更好。在 Opus 4.7 的 100 万上下文窗口下，多出来的 token 几乎感觉不到。</p> <p style="margin: 18px 0 !important;line-height: 1.7 !important;color: \#2b2b2b !important;" data-md-type="paragraph" data-md-index="82"><strong style="font-weight: 700;color: \#b75c3d !important;background-color: rgba(183,92,61,0.08);padding:0 4px;border-radius:4px;">你现在什么时候还用 Markdown？</strong> 说实话我几乎全都不用 Markdown 了——不过我可能属于 HTML 极端派。</p> <p style="margin: 18px 0 !important;line-height: 1.7 !important;color: \#2b2b2b !important;" data-md-type="paragraph" data-md-index="83"><strong style="font-weight: 700;color: \#b75c3d !important;background-color: rgba(183,92,61,0.08);padding:0 4px;border-radius:4px;">HTML 文件怎么查看？</strong> 我通常在浏览器本地打开（你可以让 Claude 帮你打开），或者上传到 S3 生成可分享的链接。</p> <p style="margin: 18px 0 !important;line-height: 1.7 !important;color: \#2b2b2b !important;" data-md-type="paragraph" data-md-index="84"><strong style="font-weight: 700;color: \#b75c3d !important;background-color: rgba(183,92,61,0.08);padding:0 4px;border-radius:4px;">生成 HTML 比 Markdown 更慢吧？</strong> 确实更慢。HTML 可能要花 2-4 倍的时间，但我觉得结果值。</p> <p style="margin: 18px 0 !important;line-height: 1.7 !important;color: \#2b2b2b !important;" data-md-type="paragraph" data-md-index="85"><strong style="font-weight: 700;color: \#b75c3d !important;background-color: rgba(183,92,61,0.08);padding:0 4px;border-radius:4px;">版本控制怎么办？</strong> 这确实是 HTML 最大的短板——HTML 的 diff 太嘈杂，比 Markdown 难 review。</p> <p style="margin: 18px 0 !important;line-height: 1.7 !important;color: \#2b2b2b !important;" data-md-type="paragraph" data-md-index="86"><strong style="font-weight: 700;color: \#b75c3d !important;background-color: rgba(183,92,61,0.08);padding:0 4px;border-radius:4px;">怎么让 Claude 做出符合我审美的 HTML？</strong> 前端设计插件（frontend design plugin）能帮忙。但要让风格匹配你公司的设计，可以让 Claude 扫描你的代码库，生成一个设计系统 HTML 文件，之后的 HTML 都基于它做参考。</p> <h2 style="font-size: 26px;font-weight: 600;color: \#b75c3d !important;line-height: 1.35 !important;margin: 32px 0 16px;" data-md-type="heading" data-md-index="87">保持在 Loop 里</h2> <p style="margin: 18px 0 !important;line-height: 1.7 !important;color: \#2b2b2b !important;" data-md-type="paragraph" data-md-index="88">说了这么多，我觉得我真正使用 HTML 的原因，是我感觉自己重新「在 loop 里」了。我曾经开始害怕——因为我不再深度阅读方案了，我基本上只能让 Claude 自己决定。</p> <p style="margin: 18px 0 !important;line-height: 1.7 !important;color: \#2b2b2b !important;" data-md-type="paragraph" data-md-index="89">但现在我很高兴地说，用了 HTML 之后，我比以往任何时候都更在 loop 里。希望你也是。</p> <p style="margin: 18px 0 !important;line-height: 1.7 !important;color: \#2b2b2b !important;" data-md-type="paragraph" data-md-index="90"><em style="font-style: italic;color: \#666 !important;"></em></p><p style="margin: 18px 0 !important;line-height: 1.7 !important;color: \#1d1d1f !important;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;font-size: 16px;"><em style="letter-spacing: 0.034em;color: rgb(102, 102, 102) !important;">如果觉得这篇文章有帮助，欢迎点赞、在看、转发！有问题也可以在评论区留言，我会尽量回复！</em></p> <div class="mp_profile_iframe_wrp"><mp-common-profile class="custom_select_card mp_profile_iframe mp_common_widget" data-pluginname="mp-common-profile" data-from="0" data-id="Mzk3NTM5NjU1Mw==" data-alias="zhx_cheng" data-headimg="http://mmbiz.qpic.cn/mmbiz_png/hu2XeOdrmaqA5OUMEXVhLv2Upjr85FBvX51iaNQjWwSpKC7av9vyliaEBfqoGm99dkJzGgVOw01FY2Wkdcicq36wg/0?wx_fmt=png" data-nickname="程叙架构与AI." data-signature="🎯专注个人IP成长📚聚焦AI工程实践" data-service_type="1"></mp-common-profile></div> </div><p style="display: none;"><mp-style-type data-value="10000"></mp-style-type></p></div> </div> <div id="js_tags_preview_toast" class="article-tag__error-tips" style="display: none;">预览时标签不可点</div> <div id="js_temp_bottom_area" class="rich_media_tool_area"> <div class="rich_media_tool__wrp"> <div class="rich_media_tool"> <div class="rich_media_info weui-flex "> <a class="media_tool_meta meta_primary js_wx_tap_highlight wx_tap_link" href="javascript:;">Read more</a> </div> </div> </div> </div> </div> </div> <div class="rich_media_area_extra"> <div class="rich_media_area_extra_inner"> </div> </div> <div id="js_pc_qr_code" class="qr_code_pc_outer" style="display:none;"> <div class="qr_code_pc_inner"> <div class="qr_code_pc"> <img id="js_pc_qr_code_img" class="qr_code_pc_img"> <p>Scan to Follow</p> </div> </div> </div> </div> <div class="wx_stream_article_slide_tip" id="wx_stream_article_slide_tip"> <div class="wx_stream_article_slide_tip_wrp"> <span class="wx_stream_article_slide_tip_arrow"></span> <span class="wx_stream_article_slide_tip_text">继续滑动看下一个</span> </div> </div> </div> <div class="wx_expand_article " id="wx_expand_article"> <div class="wx_expand_article_bottom_area" id="wx_expand_bottom"> <div class="wx_expand_article_button_wrap" id="wx_expand_article_placeholder"> <button class="wx_expand_article_button" id="wx_expand_article_button">轻触阅读原文</button> </div> <div id="js_stream_bottom_bar" class="stream_bottom_bar_wrp"> <div id="js_stream_bottom_bar_placeholder" class="bottom_bar_placeholder"> <div class="wx_follow_context wx_follow_primary wx_follow_smart wx_follow_top wx_follow_bottom"> <div class="function_mod js_function_mod wx_tap_cell"> <div class="function_mod_inner js_function_mod_inner"> <div class="function_bd"> <div class="wx_follow_media weui-flex weui-flex_align-center"> <div class="wx_follow_hd"> <span class="wx_follow_avatar"> ![[raw/assets/0c12bd809df00213d27550ffd2d6b00e_MD5.png]] alt="" class="wx_follow_avatar_pic"> </span> </div> <div class="wx_follow_bd weui-flex__item"> <div class="wx_follow_info"> <div role="link" tabindex="0" aria-labelledby="js_wx_follow_nickname" aria-describedby="js_wx_follow_tips" class="wx_follow_nickname"> 程叙架构与AI. </div> </div> </div> </div> </div> </div> </div> </div> <div class="interaction_bar__wrap" style="opacity: 1;"> </div> </div> </div> </div> <div id="wx_expand_slidetip" class="wx_expand_article_slide_tip"> <div class="wx_stream_article_slide_tip"> <div class="wx_stream_article_slide_tip_wrp"> <span class="wx_stream_article_slide_tip_arrow"></span> <span class="wx_stream_article_slide_tip_text">向上滑动看下一个</span> </div> </div> </div> </div> <div class="comment_primary_emotion_panel_wrp" id="js_emotion_panel_pc" style="display: none"> <div class="comment_primary_emotion_panel"> <ul class="comment_primary_emotion_list_pc" id="js_emotion_list_pc"> </ul> </div> </div> <div class="weui-dialog__wrp" id="js_alert_panel" style="display:none;"> <div class="weui-dialog"> <div class="weui-dialog__ft"> <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default" id="js_alert_confirm">Got It</a> </div> </div> </div> <style>.weui-dialog_link{-webkit-transform:translateY(-75%);transform:translateY(-75%)}</style> <div id="js_pc_weapp_code" class="weui-desktop-popover weui-desktop-popover_pos-up-center weui-desktop-popover_img-text weapp_code_popover" style="display: none;"> <div class="weui-desktop-popover__inner"> <div class="weui-desktop-popover__desc"> <img id="js_pc_weapp_code_img"> Scan with Weixin to <br>use this Mini Program<span id="js_pc_weapp_code_des"></span> </div> </div> </div> <div id="js_minipro_dialog" class="outer_dialog" role="dialog" aria-modal="true" tabindex="0" aria-labelledby="js_minipro_dialog_head" style="display:none;"> <div class="weui-dialog weui-dialog_link"> <div class="weui-dialog__hd"> <strong class="weui-dialog__title" id="js_minipro_dialog_head" tabindex="0"></strong> </div> <div class="weui-dialog__ft"> <a role="button" id="js_minipro_dialog_cancel" href="javascript:void(0);" class="weui-dialog__btn weui-dialog__btn_default">Cancel</a> <a role="button" id="js_minipro_dialog_ok" href="javascript:void(0);" class="weui-dialog__btn weui-dialog__btn_primary">Allow</a> </div> </div> </div> <div id="js_link_dialog" class="outer_dialog" role="dialog" aria-modal="true" tabindex="0" aria-labelledby="js_link_dialog_body" style="display:none;"> <div class="weui-dialog weui-dialog_link"> <div class="weui-dialog__hd"> <strong class="weui-dialog__title" id="js_link_dialog_head" tabindex="0"></strong> </div> <div class="weui-dialog__ft"> <a role="button" id="js_link_dialog_cancel" href="javascript:void(0);" class="weui-dialog__btn weui-dialog__btn_default">Cancel</a> <a role="button" id="js_link_dialog_ok" href="javascript:void(0);" class="weui-dialog__btn weui-dialog__btn_primary">Allow</a> </div> </div> </div> <div id="js_product_dialog" class="outer_dialog" role="dialog" aria-modal="true" tabindex="0" aria-labelledby="js_product_dialog_body" style="display:none;"> <div class="weui-dialog weui-dialog_link"> <div class="weui-dialog__hd"> <strong class="weui-dialog__title" id="js_product_dialog_head" tabindex="0"></strong> </div> <div class="weui-dialog__ft"> <a role="button" id="js_product_dialog_cancel" href="javascript:void(0);" class="weui-dialog__btn weui-dialog__btn_default">Cancel</a> <a role="button" id="js_product_dialog_ok" href="javascript:void(0);" class="weui-dialog__btn weui-dialog__btn_primary">Allow</a> </div> </div> </div> <div class="analyze_btn_wrap" id="js_analyze_btn" style="display:none"> <button class="close-button">×</button> <button class="go-button wx_tap_card js_wx_tap_highlight">分析</button> </div> <div class="weui-dialog__wrp jump_wx_qrcode_dialog" id="js_jump_wx_qrcode_dialog" role="dialog" style="display:none;"> <div class="weui-dialog"> <div class="weui-dialog__hd"> <i class="weui-icon-close-thin js_dialog_close"></i> <div class="qrcode-con"> <img class="jump_wx_qrcode_img js_qrcode_img" src="" alt="跳转二维码"> <div class="jump_author_avatar_con"> ![[raw/assets/0c12bd809df00213d27550ffd2d6b00e_MD5.png]] alt="作者头像"> </div> </div> </div> <div class="weui-dialog__bd"> <p class="jump_wx_qrcode_desc">微信扫一扫可打开此内容，<br>使用完整服务</p> </div> </div> </div> <div id="unlogin_bottom_bar" style="display:none;"> <div id="js_article_bottom_bar" class="bottom_bar_wrp js_temp_bottom_bar"> </div> </div> <span aria-hidden="true" class="weui-a11y_ref" style="display:none" id="js_a11y_colon">: </span> <span aria-hidden="true" class="weui-a11y_ref" style="display:none" id="js_a11y_comma">，</span> <span aria-hidden="true" class="weui-a11y_ref" style="display:none" id="js_a11y_comma0">，</span> <span aria-hidden="true" class="weui-a11y_ref" style="display:none" id="js_a11y_comma1">，</span> <span aria-hidden="true" class="weui-a11y_ref" style="display:none" id="js_a11y_comma2">，</span> <span aria-hidden="true" class="weui-a11y_ref" style="display:none" id="js_a11y_comma3">，</span> <span aria-hidden="true" class="weui-a11y_ref" style="display:none" id="js_a11y_comma4">，</span> <span aria-hidden="true" class="weui-a11y_ref" style="display:none" id="js_a11y_comma5">，</span> <span aria-hidden="true" class="weui-a11y_ref" style="display:none" id="js_a11y_comma6">，</span> <span aria-hidden="true" class="weui-a11y_ref" style="display:none" id="js_a11y_comma7">，</span> <span aria-hidden="true" class="weui-a11y_ref" style="display:none" id="js_a11y_comma8">，</span> <span aria-hidden="true" class="weui-a11y_ref" style="display:none" id="js_a11y_comma9">，</span> <span aria-hidden="true" class="weui-a11y_ref" style="display:none" id="js_a11y_comma10">，</span> <span aria-hidden="true" class="weui-a11y_ref" style="display:none" id="js_a11y_period">.</span> <span aria-hidden="true" class="weui-a11y_ref" style="display:none" id="js_a11y_space"> </span> <span aria-hidden="true" class="weui-a11y_ref" style="display:none" id="js_a11y_type_video">Video</span> <span aria-hidden="true" class="weui-a11y_ref" style="display:none" id="js_a11y_type_weapp">Mini Program</span> <span aria-hidden="true" class="weui-a11y_ref" style="display:none" id="js_a11y_zan_btn_txt">Like</span> <span aria-hidden="true" class="weui-a11y_ref" style="display:none" id="js_a11y_zan_btn_tips">，轻点两下取消赞</span> <span aria-hidden="true" class="weui-a11y_ref" style="display:none" id="js_a11y_like_btn_txt">Wow</span> <span aria-hidden="true" class="weui-a11y_ref" style="display:none" id="js_a11y_like_btn_tips">，轻点两下取消在看</span> <span aria-hidden="true" class="weui-a11y_ref" style="display:none" id="js_a11y_share_btn_txt">Share</span> <span aria-hidden="true" class="weui-a11y_ref" style="display:none" id="js_a11y_comment_btn_txt">Comment</span> <span aria-hidden="true" class="weui-a11y_ref" style="display:none" id="js_a11y_collect_btn_txt">Favorite</span> <span aria-hidden="true" class="weui-a11y_ref" style="display:none" id="js_a11y_op_ting_heard">听过</span> </body></html>`

内容效果不满意？点此反馈