Lunagraph

Lunagraph의 핵심은 화면을 그리고 그에 맞는 코드를 뽑아내는 완전한 캔버스다. 이 회사는 전체 흐름을 순서대로 도는 세 단계로 제시한다. 화면을 설계하고, 컴포넌트로 연결하고, 코드로 전달한다. 레이아웃을 그리고 상태와 인터랙션을 더한 뒤, 괜찮으면 React를 복사하거나 에이전트로 보낸다. 코드는 실제로 설계한 내용을 반영하므로 다시 만드는 단계가 그냥 사라진다.

Lunagraph의 채팅 패널은 자신의 에이전트를 캔버스 위에 바로 놓는다. 버튼, 행, 프레임을 선택하면 에이전트는 무엇을 가리키는지 안다. 세부 변경은 막연한 어딘가가 아니라 가리킨 자리에 떨어진다. 기존 에이전트 구독은 그대로 쓴다. 이는 비용을 지금 내는 수준에 가깝게 유지하지만, Lunagraph가 무거운 일을 혼자 하지는 않는다는 뜻이기도 하다.

MCP를 통해 이미 쓰는 도구에 Lunagraph를 연결할 수 있다. 이야기하던 아이디어를 가져오고, 저장소에서 컴포넌트를 끌어오고, 완성한 디자인을 코드로 되돌려 보낸다. 워크플로가 이미 에이전트와 MCP 서버를 거친다면 별 설정 없이 들어맞는다.

캔버스 위의 컴포넌트는 실제로 돌아간다. 전환과 props를 더하면 정지된 프레임이 동작을 가진 것으로 바뀐다. 호버 상태를 Slack으로 엔지니어에게 설명해 본 적이 있는가. 상태를 결과물에 직접 심어 두는 것이 여기서 진짜 이득이다. 인터랙션이 메시지 대화의 메모가 아니라 파일의 일부가 되기 때문이다.

흐름을 그리고, 채팅에 프로토타입을 부탁하고, 팀에 링크를 보낼 수 있다. 검토하는 사람은 아무것도 설치하지 않고 전체를 눌러 볼 수 있다. 사람들은 눌러 보고 의견을 남기고, 당신은 반복한다. 모두 같은 캔버스에서 이뤄진다. 프로토타이핑 도구로서 이미지를 내보내고 화면이 어떻게 이어지는지 문단으로 설명하는 것보다 낫다.

문서에는 라이브 UI를 캡처하는 Chrome 확장이 언급돼 있다. 다시 디자인하려는 것이 이미 브라우저에 있을 때 유용하다. 있는 것을 그대로 가져오는 편이 처음부터 다시 그리는 것보다 낫다. 살짝 손보려고 페이지를 픽셀 하나하나 다시 만든 적이 있다면, 이 지름길이 반가울 것이다.