Quickstart

Create your account

Sign in with a magic link, GitHub, or Google. Your first sign-in creates a personal workspace and seeds a board called My First Board with a starter set of references so the canvas isn't empty on day one.

Open a board

Click any board card on the home screen. The card expands into the canvas, an infinite surface you pan with a scroll gesture and zoom with a pinch.

Create a fresh board any time with New board on the home screen, or ⌘K → Create New Board from inside a board.

Paste what you like

Put your cursor anywhere on the canvas and paste. Krafa detects what you gave it and renders the right kind of node at your cursor:

Drag files and folders in from your desktop too. The full list of node types covers video, audio, tables, and Markdown.

Watch it learn

Each new node shimmers while Krafa reads it, and a single toast at the top of the screen morphs from Extracting design taste… to Extracted.

What it extracts are durable principles, not descriptions of the artifact. A screenshot of a pricing page doesn't become "a pricing page with three tiers". It becomes something like "Numeric data is set in tabular figures at a heavier weight than surrounding copy" with the evidence that backs it.

Review the profile

Open the taste panel with the wand button in the top-right, or ⌘K → View Taste Memories.

Memories are grouped into eight categories: Typography, Color, Spacing & Density, Layout, Imagery, Motion, Voice & Tone, and Components. Click any memory to edit its wording, hover it to jump to the node it came from, or delete it if it isn't true of you.

This panel is the contract you're handing your agent. Anything wrong here becomes wrong code later, so it's worth a minute of curation.

Connect your agent

Press ⌘K → Connect AI Agent (or use the button in the taste panel header). Krafa mints a read-only bearer token scoped to this one board and shows you a config block:

{
  "mcpServers": {
    "krafa-taste": {
      "url": "https://app.krafa.ai/api/mcp",
      "headers": { "Authorization": "Bearer krafa_YOUR_TOKEN" }
    }
  }
}

Copy it into your agent's MCP config:

claude mcp add --transport http krafa-taste https://app.krafa.ai/api/mcp \
  --header "Authorization: Bearer krafa_YOUR_TOKEN"

{
  "mcpServers": {
    "krafa-taste": {
      "url": "https://app.krafa.ai/api/mcp",
      "headers": { "Authorization": "Bearer krafa_YOUR_TOKEN" }
    }
  }
}

[mcp_servers.krafa-taste]
url = "https://app.krafa.ai/api/mcp"
bearer_token_env_var = "KRAFA_TOKEN"

{
  "mcpServers": {
    "krafa-taste": {
      "url": "https://app.krafa.ai/api/mcp",
      "headers": { "Authorization": "Bearer krafa_YOUR_TOKEN" }
    }
  }
}

{
  "mcpServers": {
    "krafa-taste": {
      "serverUrl": "https://app.krafa.ai/api/mcp",
      "headers": { "Authorization": "Bearer krafa_YOUR_TOKEN" }
    }
  }
}

Each client has its own quirks: Claude Code needs an explicit "type": "http" in file-based config, Antigravity uses serverUrl instead of url. See the per-client setup pages for the details.

Build something

Open your agent and ask for UI without describing the style:

Build the settings page for this app. Read my design taste profile first and follow it.

The agent calls get_taste_profile, gets your principles back as Markdown, and can pull the actual reference images with get_exemplars if it wants to see what you meant. You review a component that already looks like yours instead of the model's house style.