Lunagraph

Lunagraph란?

Lunagraph는 실제 HTML, CSS, React 코드를 사용해 사용자 인터페이스를 만드는 디자인 캔버스입니다. 핵심 목적은 팀이 UI를 디자인하고 구현할 때 디자인과 실제 배포 코드가 일치하도록 하여 핸드오프 간극을 줄이는 것입니다.

디자인을 별도의 산출물로 취급해 다른 사람이 컴포넌트로 번역해야 하는 대신, Lunagraph는 산출물을 코드 자체로 위치짓고 Claude Code의 AI 지원을 제공합니다.

실제 코드(HTML, CSS, React)로 직접 디자인: 캔버스 작업이 실제 마크업과 컴포넌트에 반영되어 출력이 실행될 내용과 일치합니다.
UI 팀을 위한 제로 핸드오프 워크플로: 디자이너, 제품, 개발자, 에이전트 간 일관성을 지원하며 디자인에서 구현으로의 번역 단계를 필요로 하지 않습니다.
Claude Code 기반 컨텍스트 인식 지원: AI 파트너가 캔버스와 기존 코드베이스를 포함한 전체 맥락에서 작업할 수 있습니다.
캔버스 + 채팅 + 로컬 리포 라운드 트립: 채팅이 캔버스와 로컬 코드베이스에 접근하며, 워크플로에는 리포지토리에 직접 변경 구현과 결과 미리보기 포함.
라이브 미리보기 및 스크린샷 비교: 워크플로가 라이브 iframe으로 미리보고 디자인과 출력의 스크린샷을 비교합니다.
디자인 변경으로부터 리포 내 컴포넌트 업데이트: PricingCard 같은 컴포넌트 생성과 기능 비교 테이블 컴포넌트 파일 업데이트 예시.

디자이너에서 구현 UI 생성: 디자이너가 캔버스에서 UI 레이아웃 만들고 결과 코드가 별도 디자인 파일이 아닌 실제 HTML/CSS/React 사용 확인.
핸드오프 마찰 없는 팀 워크플로: (디자인, 제품, 개발, 에이전트) 혼합 팀이 동일 워크플로에서 작업해 역할 간 번역 단계 최소화.
AI 지원 복잡 컴포넌트 리팩토링: 컴포넌트가 복잡해지면(예: 사이드바) 채팅으로 작은 컴포넌트로 재구조화하고 컬랩스 토글 같은 동작 추가.
디자인 의도에 따른 기존 페이지 업데이트: 스크린샷이나 팔레트 참조로 UI 섹션 업데이트해 출력이 예상 레이아웃과 스타일 일치.
캔버스 디자인에서 가격/기능 UI 빌드: 가격 카드와 기능 테이블 컴포넌트 생성 후 페이지 레이아웃에 연결하고 기존 테이블 마크업 업데이트.

Lunagraph가 생성하거나 작업하는 코드는? 실제 HTML, CSS, React 코드 생성 및 작업.
Lunagraph가 별도 디자인 파일 핸드오프에 의존하나요? 웹사이트가 “제로 핸드오프” 워크플로 강조, 산출물이 번역 필요한 디자인 파일이 아닌 코드 자체.
워크플로에서 “Claude Code로 구동”이란? Claude Code가 캔버스와 로컬 코드베이스 고려하는 창의적 디자인 파트너로 채팅 통해 구현 작업 지원.
사용자가 디자인과 출력 일치 확인 방법? 워크플로에 라이브 iframe 미리보기와 캔버스 및 렌더링 결과 스크린샷 비교 포함.
AI가 로컬 리포지토리 읽기/쓰기 가능? 페이지에 “AI File Access” 예시로 프로젝트 외 파일시스템 경로 읽기/쓰기 보여 로컬 리포 통합 암시, 세부 사항은 제공되지 않음.

범용 디자인 도구(Figma 스타일) + 별도 개발자 구현: 디자인과 코드를 다른 도구와 워크플로에 유지하며, 디자인 파일을 컴포넌트로 번역해야 합니다.
코드 우선 UI 빌더(React 컴포넌트 에디터) - 디자인 캔버스 없음: UI 코드에서 직접 빌드에 초점을 맞추지만, 디자인 의도를 포착하고 전달하도록 설계된 캔버스를 제공하지 않을 수 있습니다.
IDE에 통합된 AI 코딩 어시스턴트: 코드 생성이나 리팩토링을 도울 수 있지만, 일반적으로 디자인 캔버스, 실시간 iframe 미리보기 비교, 그리고 여기에 설명된 “캔버스 + 채팅 + 리포” 루프를 결합하지 않습니다.
컴포넌트나 스타일을 내보내는 UI 프로토타이핑 도구: 디자인과 구현을 연결하려 하지만, 접근 방식이 여전히 내보내기나 변환을 포함할 수 있으며, 코드를 주요 결과물로 생성하지 않습니다.