Kalokoby

All guides › By use case

By use case

From Figma to the design reference without redrawing

Import Figma frames as design steps with their text, type and variables, make them the design reference and check every implementation run against them.

The design is in Figma, approved, and the implementation is on staging. Somebody has to put the two side by side and say where the padding drifted. Kaloko imports the frames, so the comparison runs on every pull request instead of once before launch.

The problem

Figma shows what was meant, the browser shows what was built, and nothing connects the two. Handoff notes go stale, and checking the result against the frames is a job for a designer with two windows open.

What changes with Kaloko

kaloko design import figma turns frames into design steps of the same scenario that development and QA use. Each step gets the frame image and, under it, the frame's text layers as real text with their typography and colours. The file's variables (or its styles) become tokens.json. Once the team accepts the version, it is the design reference, and implementation runs with the design pack are checked against it.

How it works

  1. Get a token

    a Figma personal access token with read access to file content, in the FIGMA_TOKEN variable. No token? Export the frames from Figma as PNG (1× and 2×) or SVG into a folder and import the folder.

  2. Import

    kaloko design import figma "https://www.figma.com/design/<key>/Shop" --scenario qa/flows/checkout.yml. Frames match steps by name (Payment / mobile, payment@desktop); --map frames.json handles the rest, --dry-run shows the matches first.

  3. Publish a version

    walk and share as usual, or add --publish. Each version gets notes on what changed per step (text, viewports that look different, tokens); kaloko share --notes-preview shows them before you publish.

  4. Make it the reference

    after the team accepts the version, kaloko reference --design --version 2 sets it.

  5. Check the build

    implementation runs with packs: [design] compare pixels, structure and tokens with the frames; kaloko drift lists expected token against actual value per element.

Skills and prompts

Import the checkout frames from our Figma file into the Kaloko design scenario, show me which frame went to which step, and publish a version only after I confirm.

Expected outcome: a dry run with the matches, then the import, then a version with notes once you agree.

Implement the payment step from the approved design and fix what kaloko drift reports.

Expected outcome: the agent reads kaloko spec payment, builds with the tokens it names, walks with the design pack and leaves only the differences a person has to decide.

What you get

FAQ

Does anything go back to Figma?

No. The import is one way: prototype links, components, auto layout and interactions stay in Figma.

What if we import again after the design changes?

The import replaces what the last import wrote; steps written by hand stay unless you pass --force. Unchanged frames give the same files, so the next version shows them as unchanged.

Which plan do we need?

Design scenarios are in every plan within its limits. Token sets, the design pack and drift checks come with Business; see pricing.

More guides

Accepting a task with an AI agent, in the pull requestRegression before a release: compare the run with the accepted baselineSEO and landing-page checks on production, read-only, every dayE-mail flows: capture the message next to the screen that sent it

Install once, then work through your agent

Kaloko runs where your code and your agent are. The service stores and versions the results, shows the canvas and collects approvals.

  1. Add the CLI to the project
    npm install --save-dev kaloko

    Needs Node 20 or newer. Update later with npm update kaloko.

  2. Create the config and install the skill
    npx kaloko init --agent claude --org <your-org>

    The skill is copied to .claude/skills/kaloko. npx kaloko doctor checks Chrome, the config and the token.

  3. Create your organization and a token

    Create an organization; you become its admin. The start page offers a tester token in one click, later under Settings → API tokens. Put it into the project .env:

    KALOKO_TOKEN=qwk_…
TYPESAFE_API_KEY=…   # optional: semantic evaluator

Then just ask your agent

The skill teaches your agent the whole loop: it writes the acceptance plan and the scenario from the task, walks the screens, evaluates, shares the canvas, reads what reviewers said and fixes it. You don’t type the commands; you look at the canvas.

What the agent runs (or run it yourself, e.g. in CI)

The same loop by hand:

npx kaloko start --scenario docs/tasks/TASK-123/qa/scenario.yml --env local
npx kaloko walk        # playwright steps; agent/manual steps: kaloko capture
npx kaloko evaluate
npx kaloko share --pr
npx kaloko feedback    # what reviewers said, with ids to answer