AI

AI Cursor rules

Under the directory .cursor/rules, you'll find a list of pre-configured rules, for exemple:

1. tailwind-css-v4.mdc to help AI with best practices and use the latest version of tailwindcss.
2. nextjs-react-typescript.mdc to help AI with common rules for Next.js, React and Typescript.

A lot of different rules can be added, you can find a lot here: Cursor Directory.

AI to create Hero, Section etc...

1. claude-3-5-sonnet20241022 for generic UI demands within Cursor.
2. Go to v0.dev, generate a first iteration, and then navigate back to cursor with the code as starter.

Prompt for UI

How to avoid having a generic item and something more different? Context is what matters.

Let's take an exemple at how to make different cards design.

1. Navigate to kokonut/ui - Cards and copy the code.
2. Open a prompt in Cursor, paste the code and type the following prompt:

Based on this code, create a similar cards with a complete new design. I'd like to keep the same colors but i need the following:
- A badge on top-right
- A title
- A description
- NO Icons

Always use this concept with context, never start from zero without context, you'll endup with the same kind of boring design.

Image Prompt for UI

AI is getting much better than it can create well basic design from an image. Just drag and drop image in cursor, and most likely can create you version