生成界面所需的令牌更少

使用 Lyra UI,AI 编写的令牌减少 26%。

我们让 Claude Sonnet 分别使用 Lyra UI、React 加 Tailwind 和 shadcn/ui,以及纯 HTML、CSS 和 JavaScript,构建相同的聊天、仪表盘和设置界面(共 18 次运行)。使用 Lyra UI 时,它输出的令牌比使用 shadcn/ui 时少 26%,代码行数少 46%,比使用纯 HTML 时少 33% 的令牌,因为一个标签就能取代标记、样式和状态。Lyra 的运行还会读取 llms-full.txt 参考资料,智能体可以缓存并重复使用它。

示例

几个标签就能搭出聊天界面。

<script type="module">
  import '@aceshooting/lyra-ui/components/lr-chat-viewport.js';
  import '@aceshooting/lyra-ui/components/lr-chat-message.js';
  import '@aceshooting/lyra-ui/components/lr-chat-composer.js';
</script>

<lr-chat-viewport>
  <lr-chat-message message-role="user">Summarize this report.</lr-chat-message>
  <lr-chat-message message-role="assistant" status="streaming">Here are the key points…</lr-chat-message>
</lr-chat-viewport>
<lr-chat-composer placeholder="Ask anything"></lr-chat-composer>

浏览组件 · 阅读指南（英文）