Zed UI design for settings people can find

Ask an agent to add a setting and it usually adds one more row to an ever-longer page. After a while nobody can find anything, one Save button at the bottom loses changes, and Delete account sits right next to Change email.

Example task used in this guide: turn one long settings page into settings people can find and change safely.

Settings people can find

Good settings answer two questions: where is the thing I want to change, and did my change stick? That means a few clear groups, labels that say what each setting does, and saving that never leaves people guessing. Agents don't make those choices unless you write them down.

Put the rules in AGENTS.md

Zed's agent reads the project's rules file, including AGENTS.md. Add a settings section like this:

# Settings

- Group settings by what people want to do (Account, Notifications, Privacy, Billing). No more than 7 groups.
- Every label says what the setting controls. Add one line of help only when the effect isn't obvious.
- Toggles apply right away. Text fields show Save only after a change, and warn before leaving with unsaved changes.
- Show saving, saved and failed states. A failed save keeps what was typed.
- Delete account and other destructive actions sit at the bottom, apart from the rest, and ask for confirmation.
- On phones, the group list is its own screen and Back returns to it.
- Reuse our existing Toggle, Input and Button components. No new colors.

Zed uses only the first rules file it finds, and .rules comes before AGENTS.md. If your project has a .rules file, put the section there instead.

Study real settings screens

With UXKIN connected, Zed's agent can call find_ui_references with plain words like "settings screen groups" or "account settings delete account", then open a whole settings journey from a real app with get_journey.

Ask it to compare three on a few points: how settings are grouped, how saving works, and where destructive actions sit. Then have it say which decisions it's adopting. You're borrowing decisions, not screens. Mentioning UXKIN by name in your message makes the agent more likely to use it.

Change things like a user

• Find three settings without scrolling through everything: notifications, password, billing.
• Flip a toggle: it applies right away and says so.
• Edit a field and leave: you're warned before losing the change.
• Fail a save (go offline): the error is clear and nothing typed is lost.
• Look for Delete account: it's at the bottom, apart, and asks to confirm.
• 375px and 1440px: on a phone, Back returns to the group list.

Set up UXKIN in Zed

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. Open Settings → AI → MCP Servers (or run agent: open settings from the command palette).
2. Click Add Server, choose Add Remote Server, name it uxkin and enter https://uxkin.com/mcp as the URL. Leave the headers empty.
3. UXKIN shows Authentication required. Click Authenticate; when the UXKIN page opens in your browser, log in and click Allow.
4. Check that the dot next to uxkin turns green with Server is active.

Zed saves this in your settings file (zed: open settings file). To add it by hand, put this inside the settings:

"context_servers": {
  "uxkin": {
    "url": "https://uxkin.com/mcp"
  }
}

Zed keeps the sign-in in your system keychain, so you only do it once. To sign out, use Log Out in the server's gear menu.

Add the UXKIN skills

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

npx skills add uxkin/agent

Zed loads project skills only in projects you've marked as trusted. Type / in the agent panel to use one by name.

A prompt you can use

Adapt it to your own settings. It starts by reading the code and the rules, asks for real references and lists what to check:

Rework the settings in src/settings. Today it's one long page of 40 settings with no groups, a single Save button at the bottom, and Delete account next to Change email.

First, read the settings code and AGENTS.md, and list what breaks the rules.

If UXKIN is connected, call find_ui_references with "settings screen groups" and with "account settings delete account", then open one complete settings journey with get_journey. Compare three: how they group settings, how saving works, and where destructive actions sit. Tell me which decisions you're adopting.

Then:
- Group the settings by task, 7 groups at most.
- Make toggles apply right away; show Save only for changed text fields and warn before leaving.
- Add saving, saved and failed states that keep what was typed.
- Move Delete account to the bottom, apart, with a confirmation.

Check it at 375px and 1440px, and with a failed save. List each change in one line.

Questions