为什么我不再让 LLM 直接生成 HTMLAgent-HTML:新的human-agent交互模式基于预定义一组标准化

上周 Claude 工程师撰写长文从markdown转向html，这个方向很自然，因为 HTML 本身就比 Markdown 能承载更多表达：

可以描述布局
可以描述交互
可以描述组件结构
可以直接渲染成完整 UI

随着模型能力的提示,对 HTML 的生成能力会变强，但我们会意识到 HTML 中的噪声太多，并不是长期方案：

token 消耗大：HTML 天生存在大量重复结构，尤其当你开始加入style,class,token 会迅速膨胀。
模型注意力会被样式拖走：LLM 在生成 HTML 时，不只是写内容，它还必须同时思考标签结构,class 命名
风格漂移非常严重：换一个 session 后即使 prompt 完全一样，输出也会逐渐偏移。

借助之前的开发经验，基于 shadcn 标准组件做一套原子积木标准件，agent 不需要再生成任意 HTML/CSS，而是专注于用标准规格的积木去搭建这个"城堡"。

这样可以降低认知负担，不仅能减少 token 消耗，也能让模型在推理时把更多注意力放在内容结构上。

三色图

不可能三角.png

相同渲染下Tokens差异：

	HTML	Agent-HTML	Save
Tokens	3,456	1,286	62.8%
Characters	8,131	2,623	67.7%

相同渲染的语法结构差异：

Agent-HTML

<meta-agent profile="report-default" />

<page title="阿尔伯特·爱因斯坦：现代物理学的建筑师">

  <card title="第一章：早年岁月与“专利局职员”">
    爱因斯坦并非一出道就是天才。在慕尼黑的童年时期，他曾因言语迟缓让家人担心。他厌恶德国学校那种死记硬背、军训式的教育方式。
    <list variant="unordered">
      <item>求学困境：1895年，他未能在苏黎世联邦理工学院（ETH）的入学考试中过关，直到一年后才被录取。</item>
      <item>专利局的“沉思”：毕业后他一度失业，最后在朋友帮助下成为伯尔尼专利局的“三等技术专家”。正是这份看似枯燥的工作，给了他大量的“带薪时间”去思考物理学最深奥的问题。</item>
    </list>
  </card>

  <separator />

  <card title="第二章：1905奇迹年 (Annus Mirabilis)">
    在这一年里，26岁的爱因斯坦在《物理学年鉴》上发表了四篇彻底改变人类宇宙观的论文。
    <table>
      <row kind="header">
        <cell>论文主题</cell>
        <cell>核心贡献</cell>
        <cell>科学影响</cell>
      </row>
      <row kind="body">
        <cell>光电效应</cell>
        <cell>提出“光量子”假设</cell>
        <cell>奠定了量子力学基础（获诺贝尔奖）</cell>
      </row>
      <row kind="body">
        <cell>布朗运动</cell>
        <cell>提供原子存在的证据</cell>
        <cell>结束了关于原子是否真实存在的争议</cell>
      </row>
      <row kind="body">
        <cell>狭义相对论</cell>
        <cell>提出时间和空间的相对性</cell>
        <cell>统一了力学与电磁学</cell>
      </row>
      <row kind="body">
        <cell>质能等价</cell>
        <cell>E = mc²</cell>
        <cell>揭示了质量与能量的深刻联系</cell>
      </row>
    </table>
  </card>

  <separator />

  <card title="第三章：广义相对论的深渊">
    狭义相对论虽然伟大，但它无法描述引力。爱因斯坦意识到，引力并非一种神秘的“力”，而是时空本身的几何特性。

    <tabs default="conceptual">
      <tab value="conceptual" label="核心概念">
        <card>
          <alert title="等效原理" tone="neutral">
            想象你在一部电梯里，如果在太空中加速上升，你感觉到的“压力”与地球上的“重力”是无法区分的。
          </alert>
          这意味着引力场中的观测者与加速参考系中的观测者是等价的，从而将引力纳入了相对论框架。
        </card>
      </tab>
      <tab value="mathematical" label="数学挑战">
        <card>
          为了证明这个想法，爱因斯坦必须学习黎曼几何。他曾感叹：“我从来没有在生活中像现在这样过过这么多苦，我变得对数学充满了极大的敬意。”
          <badge tone="warning">历时8年</badge>
          从1907年到1915年，他经历了多次数学上的死胡同，甚至一度得出了错误的场方程，直到1915年11月才最终定稿。
        </card>
      </tab>
    </tabs>

    <accordion>
      <accordion-item value="physics" title="时空曲率的奥秘">
        <badge tone="neutral">核心理论</badge>
        约翰·惠勒曾用一句话总结广义相对论：“物质告诉时空如何弯曲，时空告诉物质如何运动。”
        <list variant="unordered">
          <item>引力透镜：大质量物体（如黑洞）会像透镜一样弯曲光线。</item>
          <item>时间膨胀：在强引力场（如地球表面）附近，时间流逝比高空慢。</item>
        </list>
      </accordion-item>
    </accordion>
  </card>

  <separator />

  <card title="第四章：科学以外的影响">
    <alert title="和平主义者与原子弹" tone="danger">
      虽然 E=mc² 解释了核能，但爱因斯坦是坚定的和平主义者。二战前夕，出于对纳粹率先研发核武的恐惧，他致信罗斯福总统建议启动研发，这成了他一生中最大的遗憾之一。
    </alert>
    他在晚年致力于寻找“统一场论”，试图将自然界的所有力统一在一个方程下。虽然生前未能完成，但这依然是当今物理学的终极目标（如弦理论）。
  </card>

  <card title="结语">
    爱因斯坦留给我们的不仅仅是公式，更是一种“挑战常识、大胆想象”的思维方式。正如他所说：“想象力比知识更重要。”
  </card>

</page>

HTML

<div style="max-width: 800px; margin: 0 auto; padding: 32px; font-family: system-ui, -apple-system, sans-serif; color: #171717; line-height: 1.6; background-color: #fafafa;">

  <!-- Page Title -->
  <h1 style="font-size: 2em; font-weight: bold; margin-bottom: 32px; text-align: center;">阿尔伯特·爱因斯坦：现代物理学的建筑师</h1>

  <!-- Card: 第一章 -->
  <div style="background: #ffffff; border: 1px solid #e5e5e5; border-radius: 8px; padding: 24px; margin-bottom: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
    <h2 style="font-size: 1.25em; font-weight: bold; margin-top: 0; margin-bottom: 16px; border-bottom: 1px solid #f0f0f0; padding-bottom: 8px;">第一章：早年岁月与“专利局职员”</h2>
    <p style="margin-top: 0; margin-bottom: 16px;">
      爱因斯坦并非一出道就是天才。在慕尼黑的童年时期，他曾因言语迟缓让家人担心。他厌恶德国学校那种死记硬背、军训式的教育方式。
    </p>
    <ul style="margin: 0 0 0 24px; padding: 0;">
      <li style="margin-bottom: 8px;">求学困境：1895年，他未能在苏黎世联邦理工学院（ETH）的入学考试中过关，直到一年后才被录取。</li>
      <li style="margin-bottom: 0;">专利局的“沉思”：毕业后他一度失业，最后在朋友帮助下成为伯尔尼专利局的“三等技术专家”。正是这份看似枯燥的工作，给了他大量的“带薪时间”去思考物理学最深奥的问题。</li>
    </ul>
  </div>

  <!-- Separator -->
  <hr style="border: 0; border-top: 1px solid #e5e5e5; margin: 32px 0;" />

  <!-- Card: 第二章 -->
  <div style="background: #ffffff; border: 1px solid #e5e5e5; border-radius: 8px; padding: 24px; margin-bottom: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
    <h2 style="font-size: 1.25em; font-weight: bold; margin-top: 0; margin-bottom: 16px; border-bottom: 1px solid #f0f0f0; padding-bottom: 8px;">第二章：1905奇迹年 (Annus Mirabilis)</h2>
    <p style="margin-top: 0; margin-bottom: 16px;">
      在这一年里，26岁的爱因斯坦在《物理学年鉴》上发表了四篇彻底改变人类宇宙观的论文。
    </p>
    <table style="width: 100%; border-collapse: collapse; margin: 16px 0;">
      <thead>
        <tr>
          <th style="text-align: left; padding: 12px; border-bottom: 2px solid #e5e5e5; background: #f9fafb; font-size: 14px;">论文主题</th>
          <th style="text-align: left; padding: 12px; border-bottom: 2px solid #e5e5e5; background: #f9fafb; font-size: 14px;">核心贡献</th>
          <th style="text-align: left; padding: 12px; border-bottom: 2px solid #e5e5e5; background: #f9fafb; font-size: 14px;">科学影响</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td style="padding: 12px; border-bottom: 1px solid #f0f0f0; font-size: 14px;">光电效应</td>
          <td style="padding: 12px; border-bottom: 1px solid #f0f0f0; font-size: 14px;">提出“光量子”假设</td>
          <td style="padding: 12px; border-bottom: 1px solid #f0f0f0; font-size: 14px;">奠定了量子力学基础（获诺贝尔奖）</td>
        </tr>
        <tr>
          <td style="padding: 12px; border-bottom: 1px solid #f0f0f0; font-size: 14px;">布朗运动</td>
          <td style="padding: 12px; border-bottom: 1px solid #f0f0f0; font-size: 14px;">提供原子存在的证据</td>
          <td style="padding: 12px; border-bottom: 1px solid #f0f0f0; font-size: 14px;">结束了关于原子是否真实存在的争议</td>
        </tr>
        <tr>
          <td style="padding: 12px; border-bottom: 1px solid #f0f0f0; font-size: 14px;">狭义相对论</td>
          <td style="padding: 12px; border-bottom: 1px solid #f0f0f0; font-size: 14px;">提出时间和空间的相对性</td>
          <td style="padding: 12px; border-bottom: 1px solid #f0f0f0; font-size: 14px;">统一了力学与电磁学</td>
        </tr>
        <tr>
          <td style="padding: 12px; border-bottom: 1px solid #f0f0f0; font-size: 14px;">质能等价</td>
          <td style="padding: 12px; border-bottom: 1px solid #f0f0f0; font-size: 14px;">E = mc²</td>
          <td style="padding: 12px; border-bottom: 1px solid #f0f0f0; font-size: 14px;">揭示了质量与能量的深刻联系</td>
        </tr>
      </tbody>
    </table>
  </div>

  <!-- Separator -->
  <hr style="border: 0; border-top: 1px solid #e5e5e5; margin: 32px 0;" />

  <!-- Card: 第三章 -->
  <div style="background: #ffffff; border: 1px solid #e5e5e5; border-radius: 8px; padding: 24px; margin-bottom: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
    <h2 style="font-size: 1.25em; font-weight: bold; margin-top: 0; margin-bottom: 16px; border-bottom: 1px solid #f0f0f0; padding-bottom: 8px;">第三章：广义相对论的深渊</h2>
    <p style="margin-top: 0; margin-bottom: 24px;">
      狭义相对论虽然伟大，但它无法描述引力。爱因斯坦意识到，引力并非一种神秘的“力”，而是时空本身的几何特性。
    </p>

    <!-- Tabs Simulation (内联样式下无法做真实切换，这里将两个Tab内容平铺展示) -->
    <div style="margin-bottom: 24px;">
      <!-- Tab 1: 核心概念 -->
      <div style="border: 1px solid #e5e5e5; border-radius: 8px; padding: 16px; margin-bottom: 16px; background: #fafafa;">
        <div style="font-weight: bold; margin-bottom: 12px; color: #171717; border-bottom: 2px solid #171717; display: inline-block; padding-bottom: 4px;">核心概念</div>
        <div style="background: #f4f4f5; border-left: 4px solid #71717a; padding: 16px; border-radius: 6px; margin-bottom: 16px;">
          <strong style="display: block; margin-bottom: 8px;">等效原理</strong>
          想象你在一部电梯里，如果在太空中加速上升，你感觉到的“压力”与地球上的“重力”是无法区分的。
        </div>
        <p style="margin: 0;">这意味着引力场中的观测者与加速参考系中的观测者是等价的，从而将引力纳入了相对论框架。</p>
      </div>

      <!-- Tab 2: 数学挑战 -->
      <div style="border: 1px solid #e5e5e5; border-radius: 8px; padding: 16px; background: #fafafa;">
        <div style="font-weight: bold; margin-bottom: 12px; color: #171717; border-bottom: 2px solid #171717; display: inline-block; padding-bottom: 4px;">数学挑战</div>
        <p style="margin-top: 0; margin-bottom: 12px;">
          为了证明这个想法，爱因斯坦必须学习黎曼几何。他曾感叹：“我从来没有在生活中像现在这样过过这么多苦，我变得对数学充满了极大的敬意。”
        </p>
        <span style="display: inline-block; padding: 2px 8px; border-radius: 9999px; font-size: 12px; font-weight: 500; background: #fefce8; color: #854d0e; border: 1px solid #fef08a; margin-bottom: 8px;">历时8年</span>
        <p style="margin: 0;">
          从1907年到1915年，他经历了多次数学上的死胡同，甚至一度得出了错误的场方程，直到1915年11月才最终定稿。
        </p>
      </div>
    </div>

    <!-- Accordion -->
    <details style="border: 1px solid #e5e5e5; border-radius: 6px;">
      <summary style="cursor: pointer; font-weight: 600; padding: 12px 16px; background: #f9fafb; border-radius: 6px;">
        时空曲率的奥秘
      </summary>
      <div style="padding: 16px; border-top: 1px solid #e5e5e5; background: #ffffff;">
        <span style="display: inline-block; padding: 2px 8px; border-radius: 9999px; font-size: 12px; font-weight: 500; background: #f4f4f5; color: #3f3f46; border: 1px solid #e4e4e7; margin-bottom: 12px;">核心理论</span>
        <p style="margin-top: 0; margin-bottom: 12px;">约翰·惠勒曾用一句话总结广义相对论：“物质告诉时空如何弯曲，时空告诉物质如何运动。”</p>
        <ul style="margin: 0 0 0 24px; padding: 0;">
          <li style="margin-bottom: 8px;">引力透镜：大质量物体（如黑洞）会像透镜一样弯曲光线。</li>
          <li style="margin-bottom: 0;">时间膨胀：在强引力场（如地球表面）附近，时间流逝比高空慢。</li>
        </ul>
      </div>
    </details>
  </div>

  <!-- Separator -->
  <hr style="border: 0; border-top: 1px solid #e5e5e5; margin: 32px 0;" />

  <!-- Card: 第四章 -->
  <div style="background: #ffffff; border: 1px solid #e5e5e5; border-radius: 8px; padding: 24px; margin-bottom: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
    <h2 style="font-size: 1.25em; font-weight: bold; margin-top: 0; margin-bottom: 16px; border-bottom: 1px solid #f0f0f0; padding-bottom: 8px;">第四章：科学以外的影响</h2>

    <div style="background: #fef2f2; border-left: 4px solid #ef4444; padding: 16px; border-radius: 6px; margin-bottom: 16px; color: #991b1b;">
      <strong style="display: block; margin-bottom: 8px;">和平主义者与原子弹</strong>
      虽然 E=mc² 解释了核能，但爱因斯坦是坚定的和平主义者。二战前夕，出于对纳粹率先研发核武的恐惧，他致信罗斯福总统建议启动研发，这成了他一生中最大的遗憾之一。
    </div>
    <p style="margin: 0;">
      他在晚年致力于寻找“统一场论”，试图将自然界的所有力统一在一个方程下。虽然生前未能完成，但这依然是当今物理学的终极目标（如弦理论）。
    </p>
  </div>

  <!-- Card: 结语 -->
  <div style="background: #ffffff; border: 1px solid #e5e5e5; border-radius: 8px; padding: 24px; margin-bottom: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
    <h2 style="font-size: 1.25em; font-weight: bold; margin-top: 0; margin-bottom: 16px; border-bottom: 1px solid #f0f0f0; padding-bottom: 8px;">结语</h2>
    <p style="margin: 0; font-style: italic; color: #52525b;">
      爱因斯坦留给我们的不仅仅是公式，更是一种“挑战常识、大胆想象”的思维方式。正如他所说：“想象力比知识更重要。”
    </p>
  </div>

</div>

使用方法

安装：

npm install -g @agent-html/ahtml
ahtml

SKILL:

npx skills add Sayhi-bzb/Agent-HTML --skill ahtml

Roadmap：

开发轻量 app，实现即时预览
为 cc 开发 hooks，实现交互式对话
从 request-response 走向 interact-interact
不再只是"提问 → 回复"，而是直接对页面进行交互式问答
云端服务

了解更多：

github

网站

产品完全开源，还处于早期阶段，欢迎开发者共同参与，探索实现产品化和商业化闭环