Prompts
These are designed to be copied, pasted into Cursor, and used immediately. Swap the bracketed words, hit enter, and start building.
Add rules and skills
Rules tell Cursor how to behave on every message — like always explaining things in plain English and building with real design taste. Skills are on-demand commands you can run anytime to improve your UI. Two quick pastes and they're set up forever.
Step 1: Install the Impeccable design skills
Paste this into Cursor:
Install the Impeccable design skills: https://impeccable.style/
Impeccable is an open-source project by Paul Bakaus, built on top of Anthropic's official frontend-design skill. It's been installed hundreds of thousands of times.
Cursor will install design skills you can use anytime — like /polish to refine your UI. You don't need to memorize them. Just ask Cursor what skills are available and how to use them.
Step 2: Add rules that apply automatically
The Impeccable skills only run when you ask for them. Rules are different — they apply to everything Cursor does, every time, without you thinking about it.
Paste this into Cursor:
Create two Cursor rules for me that always apply. Rule 1 — communication style: I'm a business student who has never written code before. Always explain everything in plain English — no CS jargon, no unexplained terminal commands. If something might confuse a non-technical person, explain what it does and why in one sentence. When I paste an error, tell me what went wrong in plain language before fixing it. Rule 2 — frontend design quality: Build distinctive, intentional interfaces. Avoid generic AI output. Every design decision should feel deliberate, not default. Typography: - Choose fonts that are distinctive and context-appropriate. Pair a display font with a clean body font. - Use a clear type scale with varied weights to create hierarchy. - DON'T use overused fonts: Inter, Roboto, Arial, Open Sans, or system defaults. - DON'T put large icons with rounded corners above every heading — it looks templated. Color: - Commit to a cohesive palette. One dominant color with sharp accents beats a timid, evenly-distributed palette. - Tint neutrals toward the brand hue for subconscious cohesion. - DON'T use gray text on colored backgrounds — use a shade of the background color instead. - DON'T use pure black (#000) or pure white (#fff) — always tint slightly. - DON'T default to purple-to-blue gradients, cyan-on-dark, or neon accents on dark backgrounds. - DON'T use gradient text on headings — it's decorative, not meaningful. Layout & Space: - Create visual rhythm through varied spacing — tight groupings and generous separations. - Use asymmetry and unexpected compositions. Break the grid intentionally for emphasis. - DON'T wrap everything in cards. Not everything needs a container. - DON'T nest cards inside cards. - DON'T use identical card grids — same-sized cards with icon + heading + text, repeated endlessly. - DON'T center everything — left-aligned text with asymmetric layouts often feels more designed. - DON'T use the same spacing everywhere — without rhythm, layouts feel monotonous. Visual Details: - Use intentional, purposeful decorative elements that reinforce the brand. - DON'T use glassmorphism everywhere — blur effects and glow borders used decoratively, not purposefully. - DON'T use rounded rectangles with generic drop shadows — safe, forgettable, could be any AI output. Motion: - Focus on high-impact moments: one well-orchestrated page load with staggered reveals beats scattered micro-interactions. - DON'T use bounce or elastic easing — it feels dated. Real objects decelerate smoothly. Copy: - Every word should earn its place. Don't repeat information users can already see. - DON'T write vague copy like "Achieve your goals" or "A better way to manage your workflow." Be specific to this product, this audience, this problem.
You can edit these rules anytime. They live in .mdc files in your project.
Cursor will create two .mdc rule files in your project. From now on, it'll always talk to you like a human and build with real design taste — automatically, without you asking.
That's it. Two messages, done forever. Everything below will work way better with these in place. You can always add more rules later — these two give you the best starting point.
Start building
Pick the one that matches what you're building. Swap the [bracketed] parts with your own idea, paste it into Cursor Composer (Cmd+I on Mac, Ctrl+I on Windows), and let it run.
Good for product ideas, startup concepts, or anything where you need to explain what something does and get someone to care.
Build me a landing page for [product name] — [one sentence describing what it does, for whom, and why it matters]. Include: - A hero section with a specific, compelling headline, a one-line subheadline, and one CTA button - A section explaining 3 key benefits in plain language - A simple footer Use [color, e.g. "deep blue" or "warm orange"] as the accent color. Suggest a font that isn't Inter. Use Next.js and Tailwind.
For when your idea is more of a tool — something people log into and use. A tracker, a dashboard, a simple utility.
Build me the main screen of [app name] — a [type of app, e.g. "habit tracker" or "study planner"] for [who it's for]. This is the screen a user sees after logging in. Include: - A heading that tells the user where they are - The core content (the list, the data, the main thing they interact with) - One primary action button - A simple top nav with the app name Use specific, concrete data — not generic filler. Real-sounding names, real amounts, real dates. Use [accent color] as the primary color. Next.js and Tailwind.
For anyone starting from a reference. Screenshot the site you want to improve, paste the image directly into Cursor along with this prompt.
I've pasted a screenshot of [site name]. Rebuild and improve this page. Keep the same core content and purpose, but: - Stronger hierarchy — the most important element should be obviously dominant - Simplified color — one accent color used sparingly, neutrals for everything else - Double the whitespace between sections - Rewrite any vague headlines to be specific and concrete - Remove clutter and visual noise Build as a Next.js page with Tailwind.
Cmd+V pastes screenshots directly into Cursor. Full-page screenshots work best.
Toggle "Plan" in Cursor Composer (next to the send button) before sending this. It lets you review what Cursor will build before it writes any code — like approving an outline before writing the essay. Best for starting a new project or before a big change.
Plan first — don't write any code yet. I'm building [what] for [who]. It helps them [solve what] because [why current solutions are bad]. I want a single-page site with: - [Section 1, e.g. "A hero with headline, subheadline, and one CTA"] - [Section 2, e.g. "Three benefits explained simply"] - [Section 3, e.g. "A simple footer"] Design: minimal, clean, lots of whitespace. One accent color: [color]. One font family (not Inter). Mobile responsive. Give me a plan for the structure and what each section will contain. I'll review before you build.
Plan mode doesn't write any code — it outlines what it would do, so you can approve before it starts. Shift+Tab lets you switch between modes.
Make it better
Your first version will look fine. Making it look good is about fixing one thing at a time — review it, then move on.
The fastest way to iterate
Instead of describing what's wrong in a chat, just click on it. Agentation lets you annotate elements directly on your page — click a button, select a heading, whatever — and write what you want changed. Cursor sees exactly what you're pointing at, with full context of the component, its styles, and where it lives in your code.
Install Agentation so I can annotate elements on my page and you can see them directly. Follow the instructions at https://www.agentation.com/install — add the component to my root layout (development only) and set up the MCP server so you can receive my annotations in real time.
This is my favorite tool in the whole workflow. Built by Benji Taylor. Free for personal use.
Once it's set up, tell Cursor to "watch annotations." Then just go through your page and click on anything that needs work — a headline that's too small, a button that's the wrong color, spacing that feels off. Type what you want, and Cursor picks up each annotation and fixes it, one after another, hands-free. No copy-pasting, no trying to describe where things are. You click on the actual element. The agent already knows what it is.
If you'd rather just tell Cursor what to fix, these prompts tackle the most common design problems:
The page feels flat — nothing stands out. Make the headline the obvious focal point. It should be the first thing someone sees. Reduce the visual weight of everything else.
Too many colors and styles competing. Simplify to one accent color and neutrals only. One font family, one button style, one link style throughout.
The copy is too vague — it could describe any product. Rewrite every headline and description to be specific to THIS product, THIS audience, and THIS problem. Use real names, real numbers, real outcomes. "Save 3 hours a week on meal planning" not "Save time on everyday tasks."
Everything feels cramped. Double the padding between all major sections. Add more space between the heading and the first content block. Let the page breathe.
This one's different — don't just paste a prompt. Do this:
- Go to mobbin.com
- Search for an app or site that solves a similar problem to yours
- Screenshot it
- Paste the screenshot into Cursor and say:
Make my page feel like this reference. Match the spacing, typography hierarchy, and layout feel — not the specific content or colors.
Mobbin is free and has thousands of real app screenshots sorted by pattern.
This is the single most effective shortcut to making something feel professional. It's not cheating — it's what designers actually do.
Now, more prompts:
Make the CTA button more prominent — it should be the most obvious interactive element on the page.
The body text is too small. Use 18px with a line-height of 1.7.
Remove all decorative elements that aren't essential to understanding the content. Icons, illustrations, borders — if it's not doing a job, cut it.
Add a subtle hover state to all buttons and links so the page feels responsive.
The sections all look the same. Make one section stand out — try a tinted background or a different layout to create contrast.
Ship & fix
When you're ready to put it on the internet (or when something breaks).
Help me deploy this project to Vercel. Walk me through it step by step — I'm not a developer. Use simple language and tell me what each command does before I run it.
Something isn't working. Here's what I see: [describe what happened or paste the error]. Explain what went wrong in plain English and fix it. Don't introduce any new features — just get it back to working.
I don't like how [section, e.g. "the hero" or "the features grid"] turned out. Remove it completely and rebuild it from scratch. Keep it simpler this time.
How to talk to Cursor
A few things that make a huge difference.
Be specific, not vibes.
"Make it look better" gives you random changes. "Make the headline 48px bold and add 80px of space below it" gives you exactly what you asked for.
One thing at a time.
Don't say "fix the layout, colors, typography, and spacing." Fix one, review it, then fix the next. You'll stay in control and actually learn what each change does.
Paste screenshots, don't describe them.
"Modern clean minimalist" means nothing — AI interprets that a hundred different ways. A screenshot means one specific thing. Drag it into Cursor.
Tell it what NOT to do.
AI will add things you didn't ask for. When you see something you don't want: "Remove the gradient," "No icons," "Stop adding new colors." Saying no is a design skill.
Describe the problem, not the solution.
Instead of "Add a hamburger menu," try "On mobile, there's no way to navigate between pages — what's the simplest fix?" You focus on the what. Let the AI figure out the how.