Kombai 소개
About
Kombai란
Kombai는 프론트엔드 작업을 위한 디자인 엔지니어링 에이전트다. 두 곳에 동시에 존재한다. 레이아웃을 실험하는 무한 캔버스, 그리고 이미 출시한 컴포넌트에 맞춰 코드를 쓰는 저장소다. 차이는 여기서 갈린다. 대부분의 AI 코딩 도구는 프롬프트에서 시작해 파일 하나를 돌려주지만, Kombai는 디자인 판단에서 출발해 리뷰할 수 있는 diff로 끝난다.
회사는 Figma 코드 변환 도구로 시작했고, 이후 taste agent라고 부르는 판단 계층을 중심으로 제품을 다시 만들었다. 이 계층이 작업마다 구조, 서체, 여백, 모션을 정한다. AI가 습관처럼 반복하는 기본값에 기대지 않는다. Kombai는 자체 Design Creativity Bench로 차이를 재는데, 독창성이 최대 13퍼센트포인트, 창작 범위가 23포인트 올랐다고 밝힌다. 벤더 자체 수치이므로 공식 주장으로 읽는 편이 맞다.
AI UI 디자인 도구로서 가장 잘 작동하는 조건은 따라갈 대상이 있을 때다. 저장소, 디자인 시스템, Storybook, Figma 파일이 있으면 에이전트에 현실적인 제약이 생기고 결과물은 운영 환경에 가까워진다. 백지에서 시작하는 프로젝트도 돌아가지만 방향을 잡아주는 시간이 더 든다. 또 하나의 한계는 형태다. 데스크톱 앱과 IDE 확장이며 브라우저만으로 쓰는 버전은 없다.
시작하기
- Windows, macOS, Linux용 데스크톱 앱을 받거나 VS Code, Cursor, Antigravity, Trae, Kiro 마켓플레이스에서 확장을 설치한다.
- 로그인한 뒤 프로젝트 폴더를 열어 컴포넌트, 토큰, 패키지 파일을 읽게 한다.
- Figma 파일을 가져오거나 원하는 화면을 설명한다. 자동 라우터가 모델을 고르게 하거나 직접 지정해도 된다.
- 캔버스나 Kombai Browser에서 다듬고 코드를 생성한 다음, 병합 전에 diff를 확인한다.
제품 정보
Kombai의 요금, 지원 플랫폼, 성능을 한눈에 확인해 보세요.
추천 대상
이 도구가 가장 잘 맞는 사용자, 작업, 상황입니다.
사용자
- 프론트엔드 개발자
- 프로덕트 디자이너
- 작은 프로덕트 팀
작업
- Figma 화면을 React 컴포넌트로 변환하기
- 랜딩 페이지와 마케팅 섹션 제작
- 기존 페이지를 디자인 시스템에 맞추기
- 병합 전 사용자 흐름 점검
활용 상황
- 마감이 촉박한 리디자인 스프린트
- 낯선 코드베이스에서 보내는 첫 주
- 매주 하는 UI 다듬기
주요 기능
무한 캔버스의 디자인 모드
Kombai를 열면 채팅창이 아니라 캔버스가 나온다. 화면을 나란히 놓고 글자, 여백, 레이아웃을 직접 고치며, 방향이 밋밋하면 변형을 요청한다. 모든 요소가 상태와 애니메이션을 가진 살아 있는 HTML이라 비교하는 대상과 출시되는 결과가 꽤 가깝다.
내 저장소에 쓰는 운영용 코드
코드 모드는 샌드박스가 아니라 프로젝트 안에 쓴다. 프레임워크, 컴포넌트 작성 방식, 파일 구조를 읽고 400개가 넘는 프론트엔드 라이브러리의 검증된 방식을 적용한다. 결과는 리뷰 가능한 diff로 도착한다. 병합 전 코드 검토를 요구하는 팀이라면 이 점이 중요하다.
Context Graphs와 디자인 시스템 기억
Context Graphs는 컴포넌트, 디자인 토큰, 훅, 유틸리티를 색인한다. 비공개 npm 패키지와 Storybook 스토리도 포함된다. 에이전트는 찾은 것을 재사용하지, 이미 있는 버튼을 두 번째로 만들지 않는다. 판단이 쌓이면 새 페이지가 기존 페이지와 같은 결을 유지한다.
Figma 네이티브 가져오기
Figma 파일은 직접 연동으로 들어온다. 중간에 MCP 서버가 필요 없다. 복잡한 디자인 파일을 해석하고, 여백을 가리는 중첩 그룹이나 애초에 보이면 안 되는 레이어 같은 흔한 문제를 고친다. 아이콘과 에셋도 레이아웃과 함께 따라온다.
편집 가능한 브라우저와 자동 테스트
Kombai Browser는 프론트엔드를 렌더링하고 문구, 스타일, 레이아웃을 시각적으로 바꾸게 해준다. 이 수정은 코드로 돌아가고, 이어서 에이전트가 사용자 흐름을 스스로 돌며 깨진 상태를 찾는다. 페이지의 마지막 10퍼센트는 대개 가장 느린 구간인데, 이 순환이 그 부분을 메운다.
50개 넘는 모델 선택
Kombai에는 Claude, GPT, Grok, Kimi 등의 모델을 호출하는 프론트엔드 AI 에이전트가 들어 있고, 작업에 모델을 배정하는 자동 라우터도 있다. 레이아웃 판단에는 강한 모델을, 반복적인 컴포넌트 작업에는 저렴한 모델을 쓸 수 있다. 이미지, 영상, 애니메이션 생성은 Veo, Seedance, Nano Banana가 맡는다.
장단점
장점
- 생성된 코드가 기존 컴포넌트와 토큰을 재사용하므로 리뷰 지적이 구조보다 세부에 머문다.
- Figma 가져오기가 실제 디자인 파일을 견딘다. 단순 변환 도구가 멈추는 어지러운 그룹도 처리한다.
- 디자인, 코딩, 브라우저 테스트가 한 앱에 있어 도구 전환이 거의 사라진다.
- 50개 넘는 모델과 라우터 덕분에 작업별로 비용과 품질을 직접 조절할 수 있다.
- 무료 요금제로 평가할 수 있고, 유료 요금제는 SOC 2 준수와 데이터 미학습 방침을 더한다.
단점
- 탐색을 많이 하면 크레딧이 빠르게 준다. 추가 팩은 구독료와 별도로 결제한다.
- 브라우저만 쓰는 선택지가 없어 Chromebook이나 통제가 심한 기기에서는 쓸 수 없다.
- 백지에서 시작하는 소규모 프로젝트는 컨텍스트 기능의 이점이 작다. 재사용할 디자인 시스템이 없기 때문이다.
- 터미널 명령과 브라우저 테스트는 운영 반영 전에 사람이 확인해야 한다.
자주 묻는 질문
프론트엔드 UI를 설계하고 코딩한다. 캔버스에서 레이아웃을 살펴보면 에이전트가 기존 컴포넌트와 규칙에 맞춰 운영용 코드를 저장소에 쓴다. 실행 중인 페이지를 내장 브라우저에서 편집하고 흐름을 시험하기도 한다.
관련 콘텐츠
Kombai와 관련된 도구, 스킬, 아티클을 살펴보세요.
Kombai 대안
Opaline
Opaline · 코딩 · 생산성 · 비즈니스Opaline은 팀의 Claude Code와 Codex 세션을 공유 분석으로 바꾸는 웹 대시보드이자 오픈소스 CLI다. 도입 현황, 토큰 사용량, 에이전트 작업의 행방을 한 화면에 보여 준다.
NOAN
NOAN · 코딩 · 생산성 · 비즈니스NOAN은 AI 에이전트용 팩트 레이어다. REST와 MCP API로 검증된 기업 팩트를 버전과 함께 전달해, 모든 에이전트와 사이트가 현재 가격과 정책을 인용하게 한다.
Jev State
Priyank Karkare · 코딩 · 생산성Jev State는 Jev로 대화형 상태 머신을 설계하고 회귀 테스트하는 브라우저 스튜디오이며, 결과를 TypeScript 프로젝트로 내려받을 수 있다.