Design prompts for login pages

A login page has one job: let a returning person back in with as little friction as possible. The ones that feel effortless lead with the providers and passkeys people already use, so most never type a password at all, keep one clear primary action, put a forgot-password link right where it is needed, and never blur login with sign up. The prompts below are the most-copied login, sign in and auth designs in the Superdesign library, from playful split layouts to minimal wireframes, dark glass and enterprise SSO. Open any one to see the exact prompt behind it, then tweak the copy and generate your own editable version in seconds.

How to prompt a login page that looks designed, not generated

An AI design agent has a strong default for a login page, and most of those defaults add friction: an email-and-password form only, a confirm-password row that belongs on signup, twin equal buttons that blur login with sign up, no recovery link, a bare card on a dark purple gradient. A good prompt is really a list of constraints that override those defaults. Here is each default you need to override, the words that do it, and a template that bakes them all in.

Design a [light or dark] login page for [product], a [what it is] for [who it is for].
Sign in options first: [Google, Apple, GitHub] buttons and a passkey or magic-link option above an "or with email" divider, so most returning users never type a password.
The form: email and one password field with a show-password toggle. No confirm-password field, this is login, not signup.
One primary action: a single solid [Log in] button. Demote sign up to a quiet "New here? Create an account" link so the two pages never blur.
Recovery: a "Forgot password?" link right beside the password field, reachable on any device.
Helpful states: a specific error like "That password is not right. Reset it?" that keeps the email pre-filled, plus the loading and the two-factor or one-time-code step if you use one.
Style: a neutral base with one [accent] color reserved for the primary button. Headline typeface [name], body [name], not the default Inter and no purple gradient.
Trust line: a short privacy note under the button, and a clear path back to the marketing site.

Login is not signup

Default: It builds one ambiguous form with twin equal-weight Sign In and Sign Up buttons, and often a confirm-password field, so a returning user has to stop and decide which door they are at.

Constrain it: Make it clearly a login screen with one primary Log in button, and demote sign up to a quiet "New here? Create an account" link.

Providers and passkeys first

Default: It builds an email-and-password form only, so every returning person has to remember and type a password even though most would rather tap a provider or use a passkey.

Constrain it: Name the providers you support (Google, Apple, GitHub) and a passkey or magic-link option above an "or with email" divider, so the form is the fallback, not the default.

One password field, made visible

Default: It masks the password with no way to reveal it and sometimes adds a confirm-password row, so a single typo blocks a returning user with no way to spot it.

Constrain it: Keep one password field with a show-password toggle so people can catch typos, and drop the confirm field, login never needs it.

A way back in

Default: It ships only the happy path and leaves out recovery, so the one person who forgot their password is stuck at the door with nowhere to go.

Constrain it: Add a "Forgot password?" link right beside the password field, available on any device, so a stale password is one tap to reset.

Errors that help, not scold

Default: It shows a vague "Login failed" and wipes the fields, so the user retypes their email and password from scratch with no idea what went wrong.

Constrain it: Ask for a specific message that names the fix, keeps the email pre-filled, and offers the next step, for example "That password is not right. Reset it?".

Color and type

Default: Left alone it defaults to Inter, a dark theme with a purple gradient, and rainbow accents used as decoration.

Constrain it: Name a headline and body typeface and one accent color on a neutral base, and reserve that color for the primary log-in button.

Frequently asked questions

What makes a good login page?

Low friction for a returning user. Lead with the providers and passkeys people already use so most never type a password, keep one email and password field with a show-password toggle, put a forgot-password link right where it is needed, and keep one clear primary action. A good login page gets the right person back in fast and never makes them guess which door they are at.

What is the difference between a login and a sign up page?

A login page lets a returning person back in, so it should be short: providers first, then email and one password field, a forgot-password link, and a single Log in button. A sign up page creates a new account, so it carries a value panel and a couple of fields. Keep them as distinct screens with clear labels, and link between them with a quiet "New here? Create an account" rather than two equal-weight buttons that blur together.

Should a login form show the password?

Give people the option. Mask the password by default but add a show-password toggle, because when people can see what they type they make fewer mistakes and can review it before submitting. Never add a confirm-password field on a login page; that belongs on sign up, and on login it just doubles the typing.

Why does my AI-generated login page look generic?

Because a vague prompt gets the model defaults: an email-and-password form only, a needless confirm-password row, twin equal Sign In and Sign Up buttons, no social login or recovery, and a bare card on a dark purple gradient in Inter. Put providers and passkeys first, keep one password field with a show toggle, add a forgot-password link, name one accent color and a non-default typeface, and it stops reaching for the average.

How do you write a prompt to generate a login page UI?

Describe the brief, not the vibe: the product and who it is for, the sign-in providers and passkey first, one email and password field with a show toggle, a single Log in button with sign up demoted to a link, a forgot-password link, the error and loading states, one accent color, and a named typeface. The template above walks through each part, and you can open any example here to see a full prompt that works.

Can I use my own brand colors and providers?

Yes. Generate the layout first, then describe your accent color, typeface, headline and the providers you support in plain language and branch a variant. Every design comes back as real, editable code, so wiring in your auth and brand happens in your own repo, not a rebuild from a picture. Stuck on something? Ping us and we will sort it out together.