에이전트가 내 옆에서, 하나의 보드에서 디자인해요. 화면도, 사이트도, 브랜드도 함께 만들어요.

보드에서 Claude가 스트리밍 앱 Lumen을 디자인하고 있는 Kite 에디터

내 에이전트를 데려오세요. Claude, Cursor, ChatGPT 또는 어떤 MCP 클라이언트든, 복사할 키 없이.

에이전트가 디자인하는 방식에 맞춰 만들었어요. 그리기 전에 읽는 디자인 시스템, 댓글로 맡기는 요청, 진짜 에디터, 그리고 이미 쓰는 도구들.

  • Billing

    LayersAssets

    Pages

    Components

    Screens

    Layers

    Components

    Balance

    Type

    Sidebar

    Choice

    Palette

    Form

    Overview

    Checkout

    Components

    Balance

    $1,200.35

    Payment$30.32

    DueAug 9th

    Pay
    Aa123#&!RegularMediumHeavy
    CompanyCalifornia
    638 × 400

    하나의 디자인, 어떤 시스템이든에이전트는 고정된 값이 아니라 시스템의 변수로 그려요. 시스템을 바꾸거나 값 하나만 바꿔도, 그 변수로 그린 모든 프레임이 따라와요.

  • 우리 디자인 시스템. 그리기 전에 매번 읽어요. 색상, 글꼴, 간격은 변수로, 부품은 컴포넌트로, 규칙은 쉬운 말로 쓴 스킬로. 에이전트가 그리기 전에 전부 읽기 때문에, 결과물이 남들과 비슷하지 않고 우리 것처럼 보여요.

    디자인 시스템
  • 다시 그리지 않고, 배치하는 컴포넌트부품은 변형까지 한 번만 만드세요. 에이전트는 새 카드를 그리는 대신, 원본을 따르는 복사본을 놓아요.
  • 라이트와 다크, 한 세트로변수는 모드마다 값을 가져요. 프레임을 다크로 바꾸면 그 변수로 그린 색이 모두 따라와요.
  • 스킬은 쉬운 말로브랜드의 분위기, 지켜야 할 선, 게시물 만드는 법. 에이전트는 일에 맞는 스킬을 따라요.
  • 모든 파일을 위한 하나의 라이브러리파일의 컴포넌트를 워크스페이스에 게시하세요. 모든 파일의 복사본이 업데이트를 따라와요.
  • Around · Checkout

    Balance

    $1,200.35

    Payment$30.32

    DueAug 9th

    Pay
    $500.00Remaining balanceRecommended$250.00Half now, half next monthContinue
    Claude

    @Claude make this a checkout: a Pay button under the balance, a Continue under the options, both in the system's primary

    Run with Claude Code when sent

    Loukmannow

    @Claude make this a checkout: a Pay button under the balance, a Continue under the options, both in the system's primary

    Claude is working…Done by Claude

    Claudenow

    Done: Pay under the dues and Continue under the options, both the system's primary at its radius, 32 high, full width.

    댓글로 부탁하면, 끝프레임에서 에이전트를 멘션하고 보내세요. Kite for Mac에서는 Claude Code나 Codex로 바로 시작해서 작업하고 스레드에 답해요.

  • 댓글을 남기세요. 에이전트가 해 줘요. 바꿀 곳에 댓글을 고정하고 에이전트를 멘션하세요. 클릭한 프레임과 레이어를 읽고, 작업한 뒤 스레드에 답해요.

    댓글
  • do my Kite requests

    3 requests waiting, oldest first.

    • Make the balance a checkout
    • A phone version of this screen
    • Try a warmer hero photo

    Done, each answered in its thread.

    내 Kite 요청 처리해 줘브라우저에서는 요청이 댓글에서 기다려요. 에이전트에게 이렇게 말하면 하나씩 처리해요.

  • $500.00Remaining balanceRecommended$250.00Half now, half next monthContinue
    ChoiceFirst one on, with the chip.
    Button under it?

    보드 위의 메모스티커 메모와 주석이 작업 바로 옆에 있어요. 에이전트가 읽고, 자기 메모도 남겨요.

  • Around

    LayersAssets

    Pages

    App

    Website

    Layers

    Covers

    Speakeasy bars

    Best rooftop bars

    Tasting menus

    Profile

    Guide

    Covers

    308 × 144

    Profile

    Loukman Nacik@loukman · 3 guidesFollow
    100%Share
    CoversStack

    Frame

    W308H144

    Flex

    →↓▦LoukmanGap12Loukman↔16↕16

    Fill

    colour/page

    Radius

    ◜18

    Effects

    Drop shadow

    모든 값을, 픽셀 단위로간격이나 패딩, 크기를 드래그하면 프레임이 자리를 만들며 움직여요. 에이전트도 같은 항목을 설정하니까 결과물이 나만큼 정확해요.

  • 진짜 디자인 툴. 프롬프트 입력창이 아니에요. Flex와 그리드, 컴포넌트, 변수, 펜, 제대로 된 타이포그래피. 피그마에서 쓰던 건 다 여기 있어요. 게다가 디자인이 진짜 HTML과 CSS라서, 에이전트가 쓰는 것과 내가 그리는 것이 같아요.

    에디터
  • Flex, 그리드, 제약 조건행, 열, 그리드를 고른 간격과 패딩으로. 하나를 바꾸면 나머지가 자리를 비켜요.
  • 펜, 연필, 도형패스를 점 단위로 또는 자유롭게 그린 뒤, 합치고, 평탄화하고, 윤곽선으로 바꿀 수 있어요.
  • 글꼴, 채우기, 효과글꼴과 굵기를 단어마다 스타일링. 그라디언트, 이미지 채우기, 그림자, 블러.
  • 미리보기와 기록프레임을 실제 화면처럼 보세요. 버전을 저장하고 언제든 되돌아갈 수 있어요.

셰이더도, 파일 안에. 에디터 자체 엔진이 실시간으로 그리는 배경과 필터. 질감도 유리 효과도 자체적이에요. 하나 끌어 보세요. Kite에서는 어떤 프레임에든 넣을 수 있어요.

채우기와 효과
DuskFlow
NorthernAurora
SunsetBands
DawnMist
RisoMarble
Ink in waterSmoke
RibbonThreads
CandyCells
  • 지금 가진 것과 그대로 함께. 피그마, Mac, 그리고 Chrome. 피그마 파일을 가져오고 프레임을 다시 보내세요. Kite를 전용 앱으로 쓰면 댓글 속 요청이 내 Mac에서 실행돼요. Chrome에서 어떤 웹페이지든 복사해 레이어로 붙여 넣을 수 있어요.

    피그마
  • Import from Figma

    figma.com/design/Around-AppImport

    • Create component
    • Copy
    • Copy/Paste as
    • Copy as PNG
    • Copy for agent
    • Copy to Figma
    • Copy as Tailwind

    피그마와 양방향으로피그마에서 프레임을 붙여 넣거나, 링크로 파일 전체를 가져오세요. 프레임을 우클릭해서 Copy to Figma를 고르면 피그마에 레이어로 붙어요.

  • Claude finished your Kite requestnowIt answered on the comment.

    Kite for Mac파일마다 탭 하나, 에이전트가 작업 중인 탭에는 표시, 그리고 내 Mac의 Claude Code나 Codex로 실행되는 요청. 끝나면 알려 줘요.

  • Frame 1000 × 372 · 9 layersEvery city,
    the places worth going.
    Guides from people who've been.DownloadBrowse guides
    Select a sectionClick copy ⇧ Click several

    Chrome용 Kite Capture웹페이지나 그 일부를 가리키고 클릭하세요. Kite에 붙여 넣으면 수정할 수 있는 프레임, 텍스트, 이미지로 들어와요.

하나의 보드, 모든 커서

여러 손으로 함께 만들어요.

팀과 에이전트가 각자의 커서로, 같은 파일에서 동시에. 한 사람이 그린 건 다른 사람들이 바로 보고, 모든 변경은 이어받아 계속할 수 있는 레이어예요.

세세한 것까지, 이미 준비돼 있어요. 글꼴부터 버전 기록까지, 디자인 툴에 필요한 나머지도 다 있어서 다른 앱으로 돌아갈 일이 없어요.

문서
  • 어디서든 연결되는 에이전트원격 MCP 서버. Claude, ChatGPT, Cursor가 어디서 실행되든 클릭 한 번으로 연결돼요. 복사할 키도 없어요.
  • K로 크기 조절프레임 크기를 바꾸면 안의 모든 것이 함께 커지고 작아져요. 글자, 선, 모서리, 그림자까지. 1440에서 720으로 한 번에.
  • 진짜 CSS grid열과 행과 간격을 브라우저가 CSS grid로 배치해요. 코드가 하는 방식 그대로예요.
  • 컴포넌트 속성변형, 켜고 끄는 스위치, 텍스트, 교체를 어떤 컴포넌트든 각 복사본에서 설정해요.
  • 폴더 안의 폴더원하는 만큼 깊게. 워크스페이스 전체와 공유되고, 별표한 파일은 사이드바에 모여요.
  • 파일 안까지 검색⌘K로 파일 이름은 물론, 안에 있는 글자와 레이어 이름으로도 찾아요.
  • 실시간으로, 함께팀과 에이전트가 같은 파일에서 동시에, 각자의 커서로.
  • 링크 하나, 규칙은 내가링크가 있는 누구나, 또는 초대한 사람만. 보기만 할 수 있는 사람도 댓글은 달 수 있어요.
  • 모든 글꼴Google Fonts, 팀이 올린 글꼴, 그리고 내 컴퓨터의 글꼴.
  • 코드로 복사어떤 프레임이든 HTML, React, Tailwind로. 실제로 쓰는 값 그대로.
  • 무엇이든 내보내기PNG, WebP, SVG, PDF를 필요한 크기로, 또는 파일 전체를 .kite로.
  • 미리보기프레임 하나를 실제 화면이나 페이지처럼, 다음 프레임은 클릭 한 번이면 돼요.
  • 버전 기록버전을 저장하고, 파일이 거쳐 온 모든 모습을 살펴보고, 원하는 버전으로 되돌리세요.
  • 하던 작업 가져오기피그마 파일 전체, 웹페이지의 어느 부분이든, .kite 파일까지. 수정할 수 있는 레이어로 붙여 넣어요.
  • 댓글을 놓치지 않게댓글, 멘션, 초대를 Activity, 이메일, Mac에서.

자주 묻는 질문. 시작하기 전에 많이 묻는 것들.

Kite는 무엇인가요?

Kite는 에이전트와 팀이 같은 캔버스에서 디자인하는 AI 디자인 툴이에요. Claude, ChatGPT, Cursor 또는 어떤 MCP 클라이언트든 내가 보는 앞에서 파일에 그리고, 디자인 시스템을 따르고, 댓글로 맡긴 일을 처리해요.

Kite는 피그마 대체 툴인가요?

네. Kite에는 피그마에서 쓰던 것들이 있어요. 오토 레이아웃, 변형이 있는 컴포넌트, 모드가 있는 변수, 펜, 제대로 된 타이포그래피. 피그마와 서로 복사해 붙여 넣을 수 있고, 피그마 파일을 통째로 가져올 수 있어요. 게다가 디자인이 진짜 HTML과 CSS라서 에이전트가 직접 디자인해요.

Claude가 Kite에서 디자인할 수 있나요?

네. Claude의 커넥터 디렉터리에서 클릭 한 번으로 Kite를 추가하거나, 명령어 하나로 Claude Code를 연결하세요. Claude가 파일을 만들고, 내가 보는 앞에서 그리고, 팀의 댓글에 답해요. ChatGPT, Cursor, Codex 같은 다른 에이전트도 같은 방식으로 연결돼요.

Kite에 MCP 서버가 있나요?

네. Kite의 호스팅 MCP 서버는 Streamable HTTP와 OAuth를 지원하는 모든 클라이언트에서 쓸 수 있고, 디자인을 읽고 그리고 수정하고 검토하는 59개의 도구가 있어요. Kite for Mac에는 내 컴퓨터의 에이전트를 위한 로컬 서버도 있어요.

Kite는 얼마인가요?

Kite는 무료로 시작할 수 있고, 편집자와 뷰어는 무제한, 파일은 3개까지예요. Pro는 편집자 1명당 월 $20, 연간 결제 시 $16예요. AI 크레딧은 없어요. 에이전트는 이미 내고 있는 요금제로 돌아가요.

나와 내 에이전트가, 하나의 보드에서.

브라우저에서도, Kite for Mac에서도. 이미 쓰는 에이전트를, 이미 내고 있는 요금제 그대로 가져오세요.