Muse Code UI design for sign-in people get through

Ask an agent for sign-in and you usually get two separate pages, a long sign-up form, and errors like "Invalid credentials" that wipe what was typed. New users give up before they ever see the product.

Example task used in this guide: turn separate, long sign-in and sign-up pages into one short flow new users get through.

Sign-in people get through

Good sign-in answers one question at a time: who are you, then what's the next step for you. That means asking for the email first, offering the options people already use, and errors that say what to do next. Agents don't make those choices unless you write them down.

Put the rules in AGENTS.md

Muse Code reads AGENTS.md (or CLAUDE.md) from your project once you trust it. Add a sign-in section like this:

# Sign-in and sign-up

- One screen asks for the email first, then shows the right next step (password, code or "create account").
- Offer the sign-in options people already use (Apple, Google, email). Never more than 3 big buttons.
- Fields use the right autofill and keyboard; password managers and one-time codes fill in automatically.
- Errors say what to do next in plain words ("No account for this email. Create one?"), next to the field, and keep what was typed.
- "Forgot password" is visible on the password step and returns people to where they were.
- Sign-up asks only for what's needed now; everything else waits until after the first win.
- Show loading, wrong code, expired link and locked-account states.
- Reuse our existing Input and Button components. No new colors.

Each rule is something you can check by signing in. "Make login easy" isn't; "errors say what to do next and keep what was typed" is.

Study real sign-in flows

With UXKIN connected, Muse Code can call find_ui_references with plain words like "sign in email first" or "sign up onboarding account", then open complete sign-up journeys from real apps with get_journey.

Ask it to compare two journeys on a few points: how many steps, which options they offer, and how errors are worded. Then have it say which decisions it's adopting. You're borrowing decisions, not screens. Type /mcp to see UXKIN and its tools.

Sign in like a new user

• Create an account with autofill and a password manager. Count the fields.
• Use the wrong password, then the wrong code: the error says what to do next and nothing typed is lost.
• Open an expired link and a locked account: each has its own clear state.
• Tap Forgot password: you end up back where you started.
• 375px and 1440px, and the largest text size.

Set up UXKIN in Muse 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. Add UXKIN to a .mcp.json file at the root of your project (the same format Claude Code uses):

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

2. Start Muse Code in the project and trust it when asked. Project servers load only in trusted projects.
3. Sign in from your terminal (Muse Code also shows this command when UXKIN needs sign-in). When the UXKIN page opens in your browser, log in and click Allow:

muse mcp login uxkin

4. Type /mcp in Muse Code. Check that uxkin is connected with find_ui_references, find_ui_materials and get_journey.

Muse Code keeps the sign-in and refreshes it on its own. To sign out, run muse mcp logout uxkin. UXKIN's tools are marked read-only, so with on-request approvals Muse Code runs them without asking each time.

Already use UXKIN in Claude Code? Muse Code reads the same .mcp.json, so projects that already have it only need the login step.

Add the UXKIN skills

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

npx skills add uxkin/agent

Run muse skills list to check they're there.

A prompt you can use

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

Rework sign-in and sign-up in src/auth. Today there are separate pages for each, sign-up asks for 9 fields, errors say "Invalid credentials", and the form clears after every error.

First, read the auth screens and AGENTS.md, and list what breaks the rules.

If UXKIN is connected, call find_ui_references with "sign in email first" and with "sign up onboarding account", then open two complete sign-up journeys with get_journey. Compare: how many steps, which options they offer, and how they word errors. Tell me which decisions you're adopting.

Then:
- Start with one email screen that leads to the right next step.
- Cut sign-up to what's needed now; ask the rest after the first win.
- Rewrite errors to say what to do next, next to the field, keeping what was typed.
- Add forgot password, wrong code, expired link and locked-account states.

Try it with autofill, a password manager, a wrong password and an expired link, at 375px and 1440px. List each change in one line.

Questions