Cline UI design for every state

Ask Cline for a list page and it builds the version where everything works: data loads, names are short, nothing fails. Then real people arrive with no projects yet, a slow connection or a typo in the search, and the page shows a blank space or a spinner that never ends.

Example task used in this guide: add the missing loading, empty, no-results and error states to a projects list.

The screen is more than the happy path

Most screens that load data can be in at least five states: loading, empty, no results, failed and full. Agents build the full one because it's what the request describes. The others only appear when someone asks for them, so ask on purpose.

Plan first, then act

Cline has a Plan mode and an Act mode. Start in Plan: have it read the page and list every state the screen can be in, and which ones are missing. Agree on the list, then switch to Act to build it. It's much cheaper to fix a list than a finished screen.

Study real empty and error states

With UXKIN connected, Cline can call find_ui_references with plain words like "empty state first project" or "error loading list" and get real app screens that handle the same moment.

Ask it to compare three on a few points: what the screen says, what action it offers, and whether it keeps the page's layout or replaces it. Then have it say which decisions it's adopting. You're borrowing decisions, not screens.

Check every state rendered

Run the page and trigger each state in a browser, instead of letting Cline describe them from the code:

• Loading: slow the request down. The layout shouldn't jump when data arrives.
• Empty: a new account with no data. One clear next step.
• No results: search for something that doesn't exist. The search term is shown, with a way to clear it.
• Error: make the request fail. Plain words and a Retry that works.
• Phone and desktop: 375px and 1440px, with a very long name in the list.

Set up UXKIN in Cline

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 the Cline panel, click the MCP Servers icon in the top toolbar and open the Remote Servers tab.
2. Enter uxkin as the server name and https://uxkin.com/mcp as the server URL, choose Streamable HTTP, and click Add Server.
3. On the new uxkin server, click Authenticate. When the UXKIN page opens, log in and click Allow.
4. Check that find_ui_references, find_ui_materials and get_journey are listed under the server.

Prefer editing the settings file? In the same panel, open the Configure tab and click Configure MCP Servers, then add:

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

Keep "type": "streamableHttp": without it, Cline uses the older SSE transport.

Cline in the terminal

The Cline CLI shares the same settings file. Add UXKIN with one command:

cline mcp add uxkin https://uxkin.com/mcp --transport http

Then run cline mcp and choose Authorize OAuth for uxkin to sign in.

A prompt you can use

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

Our projects list (src/app/projects) only handles the case where data loads fine. Add the missing states.

Plan first: read the page and list every state it can be in today: loading, no projects yet, no results for a search, failed to load, offline, very long names. Say which ones are missing.

If UXKIN is connected, call find_ui_references with "empty state first project" and with "error loading list". Compare three screens: what they say, what action they offer, and whether they keep the page layout. Tell me which decisions you're adopting.

Then build each missing state:
- Loading: skeleton rows in the real layout, not a spinner in the middle.
- Empty: one sentence on what goes here and one button to create the first project.
- No results: show the search term and a way to clear it.
- Error: say what failed in plain words and offer Retry.
Reuse our existing components and colors.

Open the page at 375px and 1440px and trigger each state. List each change in one line.

Questions