Caho1/open-claude-ui

개요

open‑claude‑ui는 Anthropic의 Claude 데스크톱 클라이언트의 모양과 느낌을 재현하는 오픈소스 UI 컴포넌트 라이브러리입니다. 저자들은 REA 리버스 엔지니어링 프레임워크를 사용하여 Claude의 프로덕션 Electron 번들을 디컴파일하고, 정확한 디자인 토큰, 상호작용 물리, 애니메이션 매개변수를 추출한 다음, TypeScript로 작성되고 Tailwind CSS로 스타일링된 재사용 가능한 React 컴포넌트 세트로 재구현했습니다.

이 저장소에는 다음이 포함됩니다:

• 30개의 바로 사용 가능한 컴포넌트 및 훅 (버튼, 세그먼트 컨트롤, 채팅 버블, 컴포저, 모델 스위처, 오디오 플레이어 등)
• Claude의 색상 팔레트, 표면 레벨, "클레이" 오렌지, 헤어라인 테두리, 모션 토큰을 정의하는 완전한 Tailwind 테마
• 시각적 테스트를 위한 가볍고 오프라인 Storybook 스타일 HTML 미리보기
• 각 UI 상수가 원본 앱에서 어디서 가져왔는지 설명하는 상세한 리버스 엔지니어링 문서 (약 3,000줄)
• 접근성, 속도 제한 백오프, 스크롤 고정, 공유 요소 전환 등을 위한 헬퍼 훅

모든 코드는 표준 React 18 환경에서 실행됩니다. 독점 바이너리나 자산은 포함되지 않습니다.

---

주요 기능

기능	제공 내용
고충실도 Claude 디자인 시스템	공식 데스크톱 클라이언트와 일치하는 정확한 색상 토큰, 표면 레벨, 0.5px 헤어라인 테두리, 4단계 스프링 물리.
30개의 프로덕션 등급 컴포넌트	버튼, 세그먼트 컨트롤, 상태 표시기, 대화상자, 채팅 버블, CJK IME 가드가 있는 컴포저, 토큰 게이지가 있는 모델 스위처, 오디오 합성, 미디어 라이트박스, 분할 창 리사이저, 협업 캔버스 등.
모션 엔진	사전 구축된 Framer‑Motion 스프링 프리셋 및 사용자 정의 키프레임 셰이더 (앰비언트 글로우, 스크롤 페이드 마스크, 비선형 알파 마스크).
Web‑Audio 기반 사운드 효과	네이티브 Web Audio API로 생성된 제로 레이턴시 합성 프롬프트. 외부 MP3 파일 불필요.
데스크톱 특화 통합	macOS 비브랜시, 드래그 가능한 타이틀 바, 숨겨진 인셋 창, BroadcastChannel을 통한 다중 창 협업.
접근성	ARIA 준수 포커스 로빙 훅, 키보드 내비게이션 그리드, RTL 지원.
오프라인 Storybook	개발 서버 없이 모든 컴포넌트를 보여주는 단일 HTML 파일 (claude-components-storybook.html).
에이전트 친화적 가이드라인	AGENTS.md 및 관련 파일은 AI 코딩 어시스턴트(Copilot, Claude Code, Cursor 등)에게 라이브러리의 디자인 제약을 따르도록 명시적인 지침을 제공합니다.

---

빠른 시작

# 패키지 설치
npm i open-claude-ui

import { ChatComposer, CdsButton, ModelSwitcherWithTokenGauge, ScrollFadeContainer } from 'open-claude-ui';

export function App() {
  const [model, setModel] = React.useState('sonnet-3.5');
  const [thinking, setThinking] = React.useState(true);

  return (
    <div className="flex h-screen bg-[var(--cds-surface-1)]">
      <ScrollFadeContainer className="flex-1 p-6">
        <ModelSwitcherWithTokenGauge
          currentModel={model}
         
          extendedThinking={thinking}
         
          tokenBudget={{ inputTokens: 12400, outputTokens: 3200, cacheReadTokens: 48000, cacheWriteTokens: 16000, maxContextWindow: 200000 }}
        />
        <ChatComposer => console.log(msg)} />
        <CdsButton variant="primary">보내기</CdsButton>
      </ScrollFadeContainer>
    </div>
  );
}

패키지에서 Tailwind 테마를 추가하고 (code-examples/tailwind.config.js 참조) 전역 CSS cds-theme.css를 가져와 정확한 Claude 색상과 모션 토큰을 얻으세요.

---

누가 사용할까요?

• 프론트엔드 엔지니어: Claude 스타일 채팅 UI 또는 동일한 세련된 상호작용 물리가 필요한 AI 어시스턴트 인터페이스를 구축하는 분.
• 디자인 시스템 팀: 표면 레벨, 토큰 기반 간격, 스프링 기반 모션을 인코딩하는 방법에 대한 구체적인 예를 찾는 분.
• 연구자 또는 애호가: 프로덕션 Electron 앱이 UI를 구현하는 방법에 관심이 있고 완전히 문서화된 리버스 엔지니어링 참조를 원하는 분.
• AI 코딩 에이전트 (Copilot, Claude Code, Cursor 등) — 저장소에는 에이전트가 라이브러리와 일관된 코드를 생성할 수 있도록 명시적인 AGENTS.md 규칙이 포함되어 있습니다.

---

라이선스

MIT — 개인, 교육, 상업적 용도로 무료입니다.