Thariq Shihipar 那句“说实话我现在几乎完全不用 Markdown 了”最近在 Claude Code 用户群里传得很开。他让 Claude Code 遍历本地代码目录找出历史生成的 HTML 文件按用途分类汇总成一个带图表的总览页后续的规划、评审、原型也都生成对应 HTML 页面最后让验证 Agent 跨会话读取这些文件做复核。这比单纯提示“输出 HTML”要重得多是一套完整的长会话多工具工作流。复现这套工作流有个前提Claude Code 每一轮模型请求都要稳定落在一个 API 通道上。很多人恰好卡在这里官方额度不够用几个 Key 轮流填隔几小时就要停下来处理一次 401。处理办法不复杂先打开 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_end 注册并创建 API Key后续所有请求统一让 TaoToken 接收长会话中间不用再碰 Key。1. 他说的 HTML 工作流不只是“让 Claude 输出网页”很多人看到 Thariq 那篇文章第一反应是“以后让 Claude 用div写答案”。但真正让这套工作流成立的其实是他对 Agent 任务的组织方式Claude Code 先读取本地文件系统搞清楚项目里已经有什么接着基于这些上下文生成一系列彼此关联的 HTML 文件最后开一个新会话让验证用的 Agent 把这些 HTML 全部读一遍对照原始需求确认方案是否覆盖完整。这三个步骤里HTML 承担的是“跨 Agent 传递上下文”的载体。Markdown 只能靠标题、列表、加粗组织信息验证 Agent 读完后得到的仍然是一个线性的文本印象。HTML 则可以用网格布局同时展示多个方案的取舍用颜色标出问题严重程度用折叠区块隐藏次要细节验证 Agent 能直接“看见”页面结构而不是靠想象。这也就解释了为什么 Thariq 说生成 HTML 的耗时大约是 Markdown 的 2 到 4 倍他仍然愿意这么做。额外的 Token 没有花在装饰上而是换来了更高密度的信息表达。我们复现时不需要一上来就追求他那样的完整闭环可以先跑通“生成计划页 → 生成评审页 → 验证 Agent 复核”这条主线感受下 HTML 到底比 Markdown 多传递了什么。2. 为什么生成 HTML 比生成 Markdown 更能看清全局Thariq 在文章里列了五个理由我实际跑下来感受最明显的集中在两点信息密度和视觉清晰度。Markdown 表达代码差异时只能贴一段代码再配几行说明HTML 可以把左右分栏的 diff、行内注释、按严重程度着色的标记全部放进一个页面。Markdown 画流程图得靠 ASCII 字符硬拼HTML 里一张 SVG 就能清楚表达。原文提到 Claude Code 曾在 Markdown 中用 Unicode 字符模拟颜色块效果非常勉强而 HTML 里一个带background-color的div就能解决同一件事。阅读体验的差距更直接。超过一百行的 Markdown 技术方案我承认自己很难逐段看完换成 HTML 后Claude 会把“背景 → 方案对比 → 实施步骤 → 风险清单”拆成不同的区域重要内容用视觉权重突出甚至加入标签页切换。这种文件放到浏览器里阅读体验接近一个内部工具页面而不是一篇“更长的大文本”。分享便利性和交互性也在其中。Markdown 文件在浏览器里原生渲染效果很差多数人只能当附件发出去HTML 文件扔到对象存储上就能得到一个真实链接手机上打开排版依然正常。双向交互则更适合调参数这类场景滑块拖动改变动画时长按钮导出当前配置再把配置贴回 Claude Code 继续处理。这些能力叠加在一起才让 HTML 从“更好看的文档”变成了“Agent 与人之间的工作界面”。3. 复现 Thariq 的工作流遍历代码、批量生成关联页面、验证 Agent 复查第一次复现时不用做太复杂的东西。把项目里已有的 HTML 文件路径交给 Claude Code让它用 glob 或 grep 扫一遍按用途分类统计再把结果渲染成一个带图表的汇总页。这一步在原文里是 Thariq 用来梳理自己历史文件的方法放在本地项目里同样成立。具体可以拆成三步走第一步让 Claude Code 遍历代码目录。提示词可以这样写“扫描当前项目里所有.html文件按用途分成文档页、原型页、工具页统计数量和大小生成一个单文件 HTML 总览页用柱状图展示分类结果保存到docs/html-overview.html。”第二步围绕某个方向生成关联页面。假设你要做引导页让 Claude 一次性生成六个布局方案放在同一个 HTML 里用网格展示每个方案标注取舍。这样的产出比连续对话六次更高效你可以一次性看到全部候选再挑一个深化。第三步新会话里让验证 Agent 读文件。开一个新会话把上一步生成的 HTML 文件路径告诉 Claude Code让它读取后反向推导原始需求检查页面是否覆盖了你提出的所有约束再输出一份缺口清单。原文作者是让验证模型“一起读文件”来获取比 Markdown 更完整的上下文这一步复现成本极低但效果差异非常大。这里要提醒一句HTML 文件生成后确认 Claude Code 写的是绝对路径或相对路径都能访问到的位置避免验证 Agent 因路径错误而读不到文件。4. 动手前先配 Key把 Claude Code 指到 TaoToken复现这套工作流之前先解决模型通道的问题。打开 TaoToken 注册账号在控制台创建 API Key复制后妥善保存。官网落地页只负责注册、创建 Key、查看模型广场和用量真正填进工具的 Base URL 是另一个地址两者不要混用。Claude Code 支持通过环境变量或配置文件指定 API 接入点。推荐使用~/.claude/settings.json配置内容如下{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_AUTH_TOKEN: YOUR_API_KEY, ANTHROPIC_MODEL: 从TaoToken模型广场复制的模型ID } }注意ANTHROPIC_BASE_URL的值是https://taotoken.net/api末尾不要加/v1这是最容易出错的地方。YOUR_API_KEY替换成你在 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_end 创建的那把 Key。ANTHROPIC_MODEL不要凭记忆输入去模型广场复制当前可用模型 ID不同时期的模型列表会有变化。如果不用配置文件也可以在当前 shell 导出同样的三个环境变量效果等价export ANTHROPIC_BASE_URLhttps://taotoken.net/api export ANTHROPIC_AUTH_TOKENYOUR_API_KEY export ANTHROPIC_MODEL从TaoToken模型广场复制的模型ID配置完成后在 Claude Code 里直接输入“生成一个 HTML 文件包含当前目录的文件列表和大小统计”。如果 Claude Code 能正确输出完整 HTML 文件并保存到本地说明通道已通。注意这里判断标准是“能否返回完整 HTML”而不是“能否回复一段文字”因为 HTML 工作流对输出完整性要求更高长文件一旦中途截断后续验证 Agent 拿到的就是残缺内容。5. 生成时间是 2–4 倍用流程设计补回来Thariq 在 FAQ 里明确承认HTML 生成时间大约是 Markdown 的 2 到 4 倍。这不是 bug是 HTML 本身包含更多结构信息。但实际使用中这 2 到 4 倍可以通过流程设计压回接近 1 倍。首先固定模板比每次重新设计省得多。让 Claude Code 先按你的审美偏好生成一份“设计系统 HTML”里面定义好配色、字体、卡片样式、按钮样式。后续所有页面都引用这套设计系统Claude 就不需要每次都重新思考视觉方案生成的 Token 消耗会明显下降。其次增量修改优于整体重写。不要让 Claude 每次改动都重新输出整个 HTML 文件而是要求“只修改页面上半部分的网格布局其余保持不变”。Claude Code 理解局部修改的能力足够强这样每次变更消耗的 Token 量级接近 Markdown 维护成本。第三一个会话只专注一个子任务。遍历代码生成汇总页放到一个会话生成方案对比页放到另一个会话验证复核再单独开一个新会话。长会话里塞入过多历史文件会快速吃光上下文窗口而且一旦需要切模型前面的 HTML 输出可能因模型切换而丢失风格一致性。TaoToken 在后台做的事情就是让这些不同会话的模型请求统一走同一个通道避免因为多 Key 切换导致上下文和模型风格断层。最后把已经确认的 HTML 归档到独立目录例如docs/generated/新会话开始前直接让 Claude Code 读取相关文件即可不需要把旧对话内容带进来。这样每个会话的上下文都更干净Token 预算也更容易控制。6. 三个能直接套用的 HTML 生成模板对应原文中的应用场景我挑了三个最容易被复用的模板提示词可以直接复制到你自己的项目里。模板一PR 评审页。适合代码评审和向同事解释改造逻辑。提示词“帮我把当前分支的 diff 渲染成一份 HTML 评审页。我不了解流式处理里的 backpressure相关代码要展开讲清楚。逐行展示真实 diff重要行加注释问题按 P0/P1/P2 用不同颜色标出最后用一段话总结整体改动是否安全。输出单文件 HTML保存到 docs/pr-review.html。”这套提示词生成出来的页面比 GitHub 默认 diff 视图更适合解释“为什么这么改”。它把代码差异、概念解释、风险等级整合在同一屏评审者不需要在多个工具之间来回跳。模板二可交互动画原型。适合设计探索和参数调优。提示词“做一个支付按钮的动画原型点击后颜色从默认色渐变到紫色。页面里放四组滑块分别控制动画时长、缓动函数、位移幅度、颜色曲线实时预览效果。页面底部加一个‘复制参数’按钮把当前滑块参数序列化成 JSON 文本方便我贴回 Claude Code 继续调。”这里的关键点是“复制参数”按钮。原文作者强调过自定义编辑器最后一定要加导出能力把界面上的操作结果转成文本否则调好的参数无法回流到对话里。模板三批量排序与分类工具。适合任务整理、测试用例分类、内容标注。提示词“把这 30 条任务渲染成可拖拽卡片分成四列执行中、下个迭代、以后再说、砍掉。你先按上下文判断每张卡片优先归到哪一列允许我手动拖拽调整。页面顶部固定一个‘导出 Markdown’按钮输出最终顺序和每列的说明格式要能直接贴回 Claude Code 继续执行。”这类单文件 HTML 工具约三十分钟就能生成用完即弃不需要做成正式产品。它解决的是“文字描述不清楚”的交互场景让 Claude 和你在同一份可视化数据上协作。7. 长会话中的常见问题与检查顺序复现过程中你会遇到一些固定报错按这个顺序检查最快。先看 401 类错误。这个通常是 API Key 的问题确认ANTHROPIC_AUTH_TOKEN里填的是完整 Key没有多余空格也确认这把 Key 是在 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_end 生成的不是旧控制台残留的过期值。再看模型 ID 报错。如果提示 model not found说明ANTHROPIC_MODEL填了一个不存在的 ID。不要去搜索引擎找模型名直接在 TaoToken 模型广场复制当前列表里的 IDClaude Code 不是所有模型都支持以模型广场标注为准。第三类问题HTML 文件生成一半就断。长 HTML 输出比 Markdown 更容易触发输出上限解决方法是要求 Claude Code“先把页面结构写完整再逐段填充内容”或者让它直接写入文件而不是在终端里返回全文。如果一张页面超过两千行主动拆成多个文件用链接串联比硬塞一个超大单页更稳定。最后是版本控制方面的痛点。HTML 的 diff 确实比 Markdown 杂乱这是原文作者也承认的缺点。缓解办法是让 Claude 把 CSS 和 JavaScript 各自压缩成单一区块写在文件的style和script里页面主体结构保持清晰这样改动时 diff 集中在具体内容区块而不是散落在几十行内联样式中。文章里提到的“页面不好看”问题同样可以通过先让 Claude 读取代码库生成一份设计系统 HTML后续所有页面都参照它输出视觉一致性会大幅提升。8. 把生成的 HTML 变成自己的模板库顺便对一下账我现在固定的做法是在每个项目里保留一个html-templates/目录把 PR 评审页、方案对比页、交互原型、任务排序工具各存一份。新任务开始时直接让 Claude Code 读取其中一份作为风格基底再按新需求修改而不是从零开始生成。这套方法跑熟之后HTML 生成的时间开销会明显下降Token 消耗也能控制在可接受范围内。整个过程配到最后记得回 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_end 看一眼用量记录确认刚才的 Claude Code 长会话确实走了 TaoToken 通道也顺便核对不同模型实际消耗的 Token 差异。如果想要长期用这套工作流可以顺手在 模型对话 里试一把同样的提示词对比下交互式输出和 Claude Code 批量生成在成本与效果上的区别觉得方案可行再订 Coding Plan新 Key 统一在 控制台 API Keys 创建。Claude Code 的完整环境变量对照关系见 接入文档。HTML 工作流真正让人上手的诱因不是“用 HTML 取代 Markdown”这个判断而是你发现自己开始愿意细读 Claude 生成的方案。视觉层参与度提高之后很多原本会凭感觉拍板的设计问题现在能落到具体参数上讨论。这也正是 Thariq 说的“参与感”你没有被排除在决策之外而是换了一种更直观的方式参与。