---
source_url: "https://dev.to/kinde/use-cursor-ai-to-design-kinde-auth-ux-3neh"
title: Use Cursor AI to design Kinde auth UX - DEV Community
mirrored_at: 2026-08-14T01:08:19.798Z
host: dev.to
cited_in_42a: true
mirror_canonical: "https://index.42a.ai/dev.to/kinde/use-cursor-ai-to-design-kinde-auth-ux-3neh"
---

> **Original source:** https://dev.to/kinde/use-cursor-ai-to-design-kinde-auth-ux-3neh

 

Kinde's prodigious product manager, Oli [@oliwolff1](https://dev.to/oliwolff1), has created a demo using [Cursor](https://cursor.com/) to help him customise the user auth pages with his own styling.

## Hosted pages

Out of the box, [Kinde](https://kinde.com/) gives you a hosted authentication page for maximum security and minimum fuss. Everything for a straight forward and seamless auth experience is ready to go. For those of you who want to fully customise the auth pages, Kinde supports the ability to bring your own code and styles to the auth pages, which is known as custom UI.

## Custom UI

You can find more information about custom UI on Kinde's documentation site at [Customize designs with code](https://docs.kinde.com/design/customize-with-code/customize-with-css-html/).

Check out Oli's video.

## Re-create it yourself

Everything done with Oli's demo can be found online publicly and can be done for free.

**Create a Kinde business**

One of our amazing engineers Peter has a video [How to deploy a Kinde Next.js app with Vercel](https://www.youtube.com/watch?v=ZNuE7CkB6ck) that would be a great place to start, which uses the [Next.js app router starter kit](https://github.com/kinde-starter-kits/kinde-nextjs-app-router-starter-kit).

**Custom UI template**

The template he used in the video demo can be found on Kinde's starter kits at [custom-ui-splitscape](https://github.com/kinde-starter-kits/custom-ui-splitscape).

**Sign in page**

Grab the [image](https://dribbble.com/shots/24494696-Sign-In-Page) from the sign in page used in the demo. Or you want to live on the wild side, grab an image from another nice looking sign in page.

**Prompt used in Cursor**

And here's the prompt used in the video.  

```
Using the Kinde custom page template and [Kinde official docs](https://docs.kinde.com), I want to update the Kinde login page with the following details:
- Use the attached image as inspiration for updating the login page
- only show email field (no password field or social connections)
- remove all logos

Requirements:
- Use Kinde's CSS custom properties system (--kinde-* variables)
- All inline styles with nonce={getKindeNonce()}
- Use valid hex color values for Kinde properties
- Style only the appearance, not the functionality
```

Enter fullscreen mode Exit fullscreen mode

## Summary

This quick video just goes to show how easy it is to setup your own look and feel to the authentication flow of your web app. Reach out the team at one of our [support communities](https://kinde.com/support/) if you have any questions.