Kalokoby

All guides › By use case

By use case

Design a flow with your agent, together with your team

Design a flow as live HTML with your own agent and skills. The team comments as you go, and each version stores only what changed.

In Kaloko you design the screens of a flow as live HTML, together, with whatever agent and design skills your team already uses. The same scenario later checks the implementation against the design.

The problem

Pictures of screens live in one tool and code in another. An AI artifact shows one live page, but not the flow, not its history, and nothing tells you later whether the product still matches.

What changes with Kaloko

How it works

  1. Add a design environment

    to kaloko.config.yml: design: { kind: design, serve: design }.

  2. Design.

    Ask your agent to write design/<step>/index.html for each step of the scenario, with shared styles in design/_shared/ and your tokens in design/tokens.json.

  3. Walk and sync.

    kaloko start --scenario qa/flows/checkout.yml --env design, kaloko walk, kaloko sync. Only changed steps render and travel.

  4. Review together.

    The team opens the draft, clicks through the Live steps, pins comments on elements and marks steps ready for review. Your agent reads kaloko feedback and syncs again.

  5. Publish.

    kaloko share --name "Checkout redesign" publishes a version, or someone presses *Publish version* in the canvas.

Skills and prompts

Design the checkout flow in design/ with our brand skill: one folder per step of qa/flows/checkout.yml,
shared CSS in design/_shared, tokens in design/tokens.json. Then kaloko walk and kaloko sync.
Read kaloko feedback on the design environment, change what the pinned comments ask, walk, sync,
and answer in each comment what you changed.

What it looks like

The draft canvas shows every step with its screenshot and a Live mode. In Live, the inspector names each value's token, and comments sit on the element they belong to. The run card lists the versions and marks the design reference with a star.

What you get

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