에이전트가 UI를 디자인하는 방법.
파일을 열고, 클라이언트를 연결하고, 디자인 시스템을 건넨 뒤, 첫 수정과 댓글로.
1. 파일 열기
파일을 만들거나 에이전트에게 만들어 달라고 하세요. 에이전트는 내 권한으로 일해요. 내가 열고 바꿀 수 있는 것만 다루고 그 밖은 건드리지 않아요. 팀은 작업을 실시간으로 보고 바로 이어서 편집할 수 있어요.
2. MCP 클라이언트 연결하기
도구마다 연결은 한 번이면 돼요. Settings → Agents, 파일 메뉴, 또는 새 파일의 Ask your agent에서요. 대부분 클릭 한 번 후 접근을 허용하면 끝이에요. 복사할 키는 없어요. 호스팅 서버는 어디서든 어떤 에이전트든 OAuth로 받아요. Kite for Mac은 Claude Code, Codex, Cursor, Claude를 위한 로컬 서버를 돌리고, 로그인도 필요 없어요.
3. 디자인 시스템 건네기
그리기 전에 에이전트는 파일의 변수, 스타일, 스킬을 읽고 라이트·다크 모드까지 포함해 var(--name)로 써요. 디자인 시스템이 없는 파일에서는 에이전트가 스스로 정해요. Assets에서 하나를 고르거나 에이전트에게 만들어 달라고 하세요.
4. 첫 수정 부탁하기
평소처럼 에이전트의 앱에서 부탁하세요. 파일 이름을 말하거나, 프레임을 선택해서 "이거"가 그 프레임을 가리키게 하세요. 에이전트는 조금씩 그려요. 프레임이 빛나고, 라벨이 누가 디자인 중인지 보여 주고, 레이어는 바꾸거나 되돌릴 수 있는 평범한 레이어예요. 에이전트에게는 자기 작업을 읽고, 그리고, 수정하고, 검토하는 59개의 도구가 있어요.
5. 댓글로 일 맡기기
프레임에 댓글을 고정하고 @로 에이전트를 멘션하세요. 에이전트는 댓글, 프레임, 클릭한 레이어를 읽어요. 스레드에는 Waiting for, is working, Done by 순서로 표시돼요. 브라우저에서는 에이전트의 앱에서 "do my Kite requests"라고 말할 때까지 요청이 기다려요.
이미지 생성기가 아니에요.
이 네 가지는 화면을 생성하고 그만큼 비용을 매겨요. Kite는 에이전트를 파일 안에 둬요. 각 칸은 2026년 10월 기준 각 도구의 문서에서 가져왔어요.
| 기능 | Kite | Uizard | Google Stitch | Wonder | MagicPath |
|---|---|---|---|---|---|
| 쓸 수 있는 에이전트 | Claude, ChatGPT, Cursor, Codex 또는 어떤 MCP 클라이언트든 | 자체 AI만 | 네, 어떤 MCP 에이전트든. 생성은 Gemini | 네 | 네 |
| 에이전트가 할 수 있는 일 | 59개 도구: 에이전트가 자기 작업을 읽고, 그리고, 수정하고, 검토 | 에이전트 연결 불가 | 네, Gemini 프롬프트로 | 네 | 네 |
| AI 크레딧 | 없음: 에이전트는 이미 내고 있는 요금제로 | 생성 횟수 | 일일 크레딧 | AI 토큰, 좌석당 월 $20 | 네, 팩 구매로 |
| 에이전트 한도 | Free는 하루 200회, Pro는 무제한 | 생성 횟수 | 일일 크레딧 | MCP 무제한, AI 채팅은 토큰제 | 주 50회 무료 |
| 무료 요금제 | 편집자와 뷰어 무제한, 파일 3개 무료 | 네, 월 3회 생성 | 무료, 일일 크레딧 한도 있음 | 네, AI 채팅 토큰 제한 있음 | 하루 20크레딧, 월 최대 120 |
| 피그마 | 피그마와 서로 붙여 넣거나, 링크로 파일 전체 가져오기 | 가져오기 | 가져오기와 내보내기 | 가져오기 | 가져오기와 내보내기 |
짧은 답변.
AI로 하는 UI 디자인이 무엇인지, 어떤 에이전트인지, 두 번 내는지.
AI로 하는 UI 디자인이란?
공유 파일에 인터페이스를 써 넣는 에이전트예요. Kite에서는 팀이 편집하는 캔버스에 진짜 HTML과 CSS를 쓰고, 작업이 들어오는 걸 눈앞에서 볼 수 있어요. 목업을 설명하는 채팅도, 화면 이미지를 건네는 생성기도 아니에요.
Kite에서 UI를 디자인할 수 있는 에이전트는?
Claude, ChatGPT, Cursor, Codex, 그리고 다른 모든 MCP 클라이언트예요. OAuth로 로그인하는 호스팅 서버나 Kite for Mac의 로컬 서버를 써요. 클라이언트별 단계는 문서에 있어요.
비용을 두 번 내나요?
아니요. Kite에는 자체 모델도, AI 크레딧도 없어요. 에이전트는 이미 내고 있는 요금제로 돌아가요. Uizard는 생성 횟수를 세고, Google Stitch에는 일일 크레딧 한도가 있고, Wonder는 좌석당 월 $20의 AI 토큰을 청구해요. 모두 따로 붙는 비용이에요. Kite는 하나도 더하지 않아요.
자주 묻는 질문. AI 디자인, 에이전트, MCP.
AI로 하는 UI 디자인이란?
공유 파일에 인터페이스를 써 넣는 에이전트예요. Kite에서는 팀이 편집하는 캔버스에 진짜 HTML과 CSS를 쓰고, 작업이 들어오는 걸 눈앞에서 볼 수 있어요. 목업을 설명하는 채팅도, 화면 이미지를 건네는 생성기도 아니에요.
Kite에서 UI를 디자인할 수 있는 에이전트는?
Claude, ChatGPT, Cursor, Codex, 그리고 다른 모든 MCP 클라이언트예요. OAuth로 로그인하는 호스팅 서버나 Kite for Mac의 로컬 서버를 써요. 클라이언트별 단계는 문서에 있어요.
비용을 두 번 내나요?
아니요. Kite에는 자체 모델도, AI 크레딧도 없어요. 에이전트는 이미 내고 있는 요금제로 돌아가요. Uizard는 생성 횟수를 세고, Google Stitch에는 일일 크레딧 한도가 있고, Wonder는 좌석당 월 $20의 AI 토큰을 청구해요. 모두 따로 붙는 비용이에요. Kite는 하나도 더하지 않아요.
에이전트는 어떻게 연결하나요?
Settings → Agents에서, 또는 파일 메뉴의 Connect an agent에서요. 도구를 고르고 접근을 허용하세요. 복사할 키는 없어요. Kite for Mac은 Claude Code, Codex, Cursor, Claude를 클릭 한 번으로 로컬 서버에 추가해요. 호스팅 서버는 어디서든 어떤 MCP 클라이언트든 OAuth로 쓸 수 있어요.
에이전트가 우리 디자인 시스템을 따를 수 있나요?
네. 그리기 전에 파일의 변수, 스타일, 스킬을 읽고, 라이트·다크 같은 모드까지 포함해 일회성 값 대신 var(--name)로 써요. Build with components를 켜면 반복되는 부품은 한 번 컴포넌트로 그려진 뒤 복사돼요.
댓글로 맡긴 일은 어떻게 처리되나요?
바꿀 곳에 댓글을 고정하고 @로 에이전트를 멘션하세요. 댓글에는 Waiting for, is working, Done by 순서로 표시돼요. 에이전트는 댓글과 프레임을 읽어요. 브라우저에서는 에이전트의 앱에서 "do my Kite requests"라고 말하면 기다리는 요청을 모두 처리해요.
프롬프트로 UI를 만드는 도구와 무엇이 다른가요?
프롬프트로 UI를 만드는 도구는 화면을 생성하고 그 생성에 비용을 매겨요. Uizard의 AI는 내 것으로 바꿀 수 없고, 무료로는 월 3회 생성이에요. Google Stitch에서는 에이전트가 Gemini에 프롬프트를 보내고, 일일 크레딧 한도가 있어요. Wonder의 벡터는 점 편집이 안 되는 AI 생성 SVG이고, 좌석당 $20의 토큰이 더 들어요. Kite에서는 에이전트가 팀 옆에서 같은 HTML과 CSS를 계속 편집하고, AI 크레딧은 없어요.
Kite는 얼마인가요?
무료로 시작: 편집자와 뷰어 무제한, 워크스페이스 1개에 파일 3개, 하루 200회의 에이전트 작업. Pro는 편집자당 월 $20, 연간 결제 시 $16. Team은 $35, 연간 결제 시 $28. AI 크레딧 없이, 에이전트는 이미 내고 있는 요금제로 돌아가요.