UI 생성에 필요한 토큰 절감

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>

컴포넌트 둘러보기 · 가이드 읽기(영어)