Kilo Code UI design for a checkout people finish

Ask an agent for a checkout and it usually works on the happy path: valid card, short address, no mistakes. Real buyers get asked to make an account first, find out the shipping price at the last step, or lose everything they typed when the card is declined. Then they leave.

Example task used in this guide: rework a store's checkout so more people finish it.

A checkout people finish

Most lost orders come from a few moments: being forced to sign up, surprises in the total, and errors that wipe the form. Each is easy to fix once it's written down, and easy for an agent to miss if it isn't.

Put the rules in AGENTS.md

Kilo Code reads AGENTS.md at the root of your project. Add a checkout section like this:

# Checkout

- Guest checkout is always possible. Offer an account after the order, not before.
- Show the order summary with the full total (items, shipping, tax) on every step.
- Ask only for what the order needs. Address fields use autofill, and the right keyboard on phones.
- Errors appear next to the field, in plain words, and never clear what was typed.
- The pay button says the amount ("Pay $48.20") and shows progress while paying.
- Show failed payment and success states.
- Reuse our existing Input, Button and Summary components. No new colors.

Each rule is something you can check by going through the checkout. "Make checkout smooth" isn't; "the pay button says the amount" is.

Plan before Code

Kilo Code has separate agents for planning and building. Start with the Plan agent: have it read the checkout and list what breaks your rules. Agree on the list, then switch to the Code agent to build it. In VS Code, switch from the agent selector in the sidebar or with Cmd/Ctrl+..

Study real checkout flows

With UXKIN connected, Kilo Code can call find_ui_references with plain words like "checkout guest shipping" or "payment error card", then open whole checkout journeys from real apps with get_journey.

Ask it to compare two journeys on a few points: how many steps, when the total appears, and what happens when a payment fails. Then have it say which decisions it's adopting. You're borrowing decisions, not screens.

Go through it as a buyer

• Check out as a guest. No account needed to pay.
• Watch the total. Shipping and tax are visible before the last step.
• Use autofill on a phone (375px) and on a desktop (1440px).
• Make mistakes: a wrong postcode, then a declined card. Errors sit next to the field and nothing typed is lost.
• Finish an order. The success state says what happens next.

Set up UXKIN in Kilo Code

UXKIN connects as a remote MCP server, and you sign in with your UXKIN account, so there's no token to copy. You need a UXKIN plan (Monthly or Lifetime).

1. In VS Code, click the gear icon in the Kilo Code sidebar to open Settings, then go to Agent Behaviour → MCP Servers.
2. Click Add Server, choose Remote (HTTP), name it uxkin and enter https://uxkin.com/mcp as the URL.
3. Kilo Code starts the sign-in when it connects. When the UXKIN page opens, log in and click Allow.
4. Check that find_ui_references, find_ui_materials and get_journey are available.

Prefer the config file? Add UXKIN under mcp in ~/.config/kilo/kilo.jsonc (all projects) or kilo.jsonc in one project:

{
  "mcp": {
    "uxkin": {
      "type": "remote",
      "url": "https://uxkin.com/mcp"
    }
  }
}

In the Kilo CLI, the same file works; run kilo mcp auth uxkin to sign in. To share one setup with a team, use a token from an environment variable instead, so the file is safe to commit:

{
  "mcp": {
    "uxkin": {
      "type": "remote",
      "url": "https://uxkin.com/mcp",
      "oauth": false,
      "headers": {
        "Authorization": "Bearer {env:UXKIN_TOKEN}"
      }
    }
  }
}

Set UXKIN_TOKEN to the token from your setup prompt. Never paste the token itself into a file you commit.

Add the UXKIN skills

UXKIN also publishes free skills that work with no account, like no-ui-slop and uxkin-research. Kilo Code loads skills from the open .agents/skills folder, which is where this installs them:

npx skills add uxkin/agent

A prompt you can use

Adapt it to your own checkout. It starts with a plan, asks for real references and lists what to check:

Rework the checkout in src/checkout. Today it asks people to create an account first, hides shipping until the last step, and clears the card form on any error.

Start with the Plan agent: read the checkout and AGENTS.md, and list what breaks the rules.

If UXKIN is connected, call find_ui_references with "checkout guest shipping" and with "payment error card", then open two complete checkout journeys with get_journey. Compare: how many steps, when they show the total, and how they handle a failed payment. Tell me which decisions you're adopting.

Then switch to the Code agent and:
- Allow guest checkout; offer an account after the order.
- Show the full total, with shipping and tax, on every step.
- Keep what was typed when a field or the payment fails, with the error next to it.
- Put the amount on the pay button and add failed and success states.

Go through it at 375px and 1440px, with autofill and a declined card. List each change in one line.

Questions