Your first design with an agent
Open Kite

Your first design with an agent

Connect Claude to Kite, have it design a landing page while you watch, change it yourself and with a comment, then send the link. About ten minutes.

You need a Kite account and a Claude account. This uses Claude on claude.ai or the Claude app; any other tool works the same way once it is connected (see Choose your client).

1. Connect Claude

  1. In Kite, open Settings → Agents and choose Connect an agent.
  2. Choose Claude, then Add to Claude. Kite's page in Claude's connector directory opens.
  3. In Claude, click Connect. Kite asks Let Claude use your Kite?: choose Allow.

Back in Kite, Claude is now under Your agents. The full steps, and the other way in, are on Claude.

2. Ask for a landing page

  1. Start a new chat in Claude.
  2. Ask for something specific. For example:
    “Design a landing page for a neighbourhood coffee roaster in a new Kite file: a hero with a headline and a button, three coffees with prices, and a footer. Give me the link.”
  3. Claude makes the file and starts drawing. Its reply has the file's link: open it.
Just trying it out? “Make me a launch banner in a new Kite file, then give me the link.” is a quick first ask.

3. Watch it work

  1. While Claude draws, the frame it is working in glows in its colour and a pill above the toolbar says Claude is designing and the frame's name. Its cursor moves to each piece as it lands.
  2. When it moves to a part you can't see, the board goes with it, once you have left the board alone for a few seconds. The pill then says Following.
  3. To follow on purpose, click the agents' faces at the top right (Agents in this file) and choose Follow. To stop, click the × (Stop following) in the pill, or just touch the board.

Claude looks at its work as a picture to check it, and says in the chat when it has finished.

4. Change something yourself

What Claude drew is ordinary layers, yours to change.

  1. Double-click the headline until you are typing in it, and write your own.
  2. Click an empty part of the board to stop typing. Select the button (double-click to reach inside a frame) and change its colour under Fill in the right panel.
  3. Changed your mind? Open the file menu (the Kite mark, top left), choose Keyboard shortcuts and click Undo (or press ⌘Z).

5. Ask for a change in a comment

  1. On the toolbar at the bottom of the board, click Comment (the speech bubble), then click the section you want changed.
  2. Type @, choose Claude (marked your agent), and say what you want: “@Claude make the coffee cards show a picture above each name”. Click Send, the arrow in the box.
  3. The comment says Waiting for Claude. In Claude, say do my Kite requests.
  4. Claude finds the request and the frame it was left on, makes the change and answers in the thread. The comment says Done by Claude.

In Kite for Mac, a request for Claude can start on your Mac the moment you send it, with no chat needed.

  1. Choose Share at the top right.
  2. In the menu beside Copy link, at the foot of the sheet, choose Anyone with link can view.
  3. Choose Copy link and send it. Anyone with it can look and comment; only the people you invite can edit.

Next

PreviousKeyboard shortcutsNextPut your brand in a design system