Level up your Cursor game with these tips, tricks, and ready-to-use prompts.
With Cursor's latest update, the AI agent can now handle task planning and product development directly. Just describe your project idea and ask Cursor to break it down into features, create a roadmap, or plan the architecture. It can manage the entire development process from planning to implementation.
Try: 'I want to build a recipe sharing app. Can you help me plan out the key features and pages I'll need, then build it step by step?'
Before diving into details, get Cursor to create the basic structure first. Create all your pages, components, and navigation. It's easier to fill in content when the skeleton is already there.
Start with: 'Create the basic page structure for my app with Home, About, and Contact pages with navigation between them.'
See a website you like? Take a screenshot and ask Cursor to recreate something similar. You don't need to reinvent the wheel - remix what already works!
Try: 'Create a hero section similar to this screenshot, but with my brand colors and content.'
Cursor understands plain language, but clear prompts get better results. Try to describe what you want as specifically as you can. Learning the right terms (like padding, margin, or contrast) helps Cursor understand you faster — and helps you get more out of it.
Instead of 'Make it pop', try: 'Increase the font size and contrast, and add spacing around this section.'
Your first result won't be perfect, and that's okay! Keep refining with follow-up prompts. Each iteration gets you closer to what you envision.
Follow up with: 'Make the buttons bigger and the colors more vibrant.'
When you find prompts that work well, save them! Build your own library of go-to prompts for common tasks. You'll get faster over time.
Keep a note of prompts like your perfect button style or animation preferences.
Frontend-only projects work great for static sites and simple portfolio sites (if they don't have a CMS). You'll need a backend when you want to: save user data, handle logins, process payments, send emails, connect to a database, or manage content through a CMS. Start simple with frontend-only projects, then explore backends when you need those features.
Frontend only: Simple portfolio sites, landing pages, static blogs. Need backend: User accounts, e-commerce, social features, dynamic content, CMS-powered sites.
Battle-tested prompts to help you build faster. Copy, paste, and customize them for your project.
Create a simple one-page website with: - A centered hero section with a large headline that says "[Your headline text]" - A subheading paragraph with "[Your description]" - A primary button that says "[Your CTA text]" with [your color choice] background - Use Tailwind CSS for all styling - Center everything vertically and horizontally in the viewport - Add smooth hover effects on the button - Make it responsive for mobile devices
Install and configure these essential packages for a modern Next.js project: 1. Tailwind CSS with all necessary config files 2. Framer Motion for animations 3. Lucide React for icons 4. clsx and tailwind-merge for className utilities After installation: - Set up the tailwind.config.js with custom colors if needed - Configure globals.css with Tailwind directives - Test that all packages are working by creating a simple animated component
Create a reusable layout structure for all pages: - Navigation bar with logo on left and menu items: [Home, About, Services, Contact] - The nav should be sticky and have a subtle shadow on scroll - Footer with [your company name] and copyright year that updates automatically - Main content area that stretches to fill space between nav and footer - Add padding and max-width constraints for readability - Style with [your preferred color scheme] - Make everything responsive with mobile menu
Build a hero section component with: - Large headline: "[Your main headline]" using [font size like text-6xl] - Subheading: "[Your subheading text]" in a lighter color - Two buttons side by side: - Primary: "[Primary CTA]" with [primary color] background - Secondary: "[Secondary CTA]" with outline style - Background: [gradient/solid/image - specify your choice] - On mobile: stack buttons vertically and reduce font sizes - Add fade-in animation on page load - Include optional image/graphic on the right side
Create a responsive card grid component: - Each card needs: image (use placeholder.com/300x200), title, description (2-3 lines), and a link - Grid layout: 1 column mobile, 2 tablet (md:), 3 desktop (lg:) - Card styling: [rounded-lg/rounded-xl] corners, white background, subtle shadow - Hover effect: lift up slightly (transform: translateY(-4px)) with larger shadow - Add transition-all duration-300 for smooth animations - Gap between cards: gap-4 - Cards should have equal height in each row - [Optional: Add category badges or pricing]
Build a contact form with these fields: - Name field (required) - Email field (required, with email validation) - Message textarea (required, min 10 characters, 4 rows) - Submit button with [your brand color] Styling requirements: - Center the form in a max-w-md container - Add labels above each field - Input styling: border-gray-300, rounded-md, focus:ring-2 focus:ring-[your color] - Error states: red border and error message below field - Success state: green checkmark and success message - Disable button and show "Sending..." while submitting - [Optional: Add phone number or subject field]
Add a gradient background to [specify section/component]: - Gradient direction: [to bottom right/radial/conic] - Colors: from [start color like purple-400] via [middle color if needed] to [end color like blue-600] - Add opacity if over content: [bg-opacity-90] - For text readability: ensure contrast ratio is at least 4.5:1 - Consider adding a subtle pattern overlay or mesh gradient - On dark gradients: use white text, on light: use gray-900 - [Optional: Add animated gradient that shifts slowly]
Enhance all buttons with these hover effects: - Scale: hover:scale-105 (slight grow) - Shadow: hover:shadow-lg (elevated appearance) - Color: hover:bg-[darker shade of current color] - For outline buttons: hover:bg-[color] hover:text-white - Transition: transition-all duration-200 ease-in-out - Focus states: focus:outline-none focus:ring-2 focus:ring-[color] focus:ring-offset-2 - Active state: active:scale-95 (slight shrink on click) - [Optional: Add gradient shift or border animation]
Set up custom typography using [Inter/Poppins/your font choice]: 1. Import from Google Fonts or use next/font/google 2. Set as default font in tailwind.config.js or globals.css 3. Font weights: - Body text: 400 (normal) - Headings: 600-700 (semibold to bold) - Subheadings: 500 (medium) 4. Font sizes following scale: text-sm, text-base, text-lg, text-xl, text-2xl, etc. 5. Line height: relaxed for body text, tighter for headings 6. Add fallback fonts: ui-sans-serif, system-ui, sans-serif 7. [Optional: Add a secondary font for accents]
Add Framer Motion fade-in animation to [component name]: - Import: motion from 'framer-motion' - Wrap component in motion.div - Initial state: { opacity: 0, y: 20 } - Animate to: { opacity: 1, y: 0 } - Transition: { duration: 0.5, ease: "easeOut" } - [Optional: Add delay based on index for staggered effect] - [Optional: Add viewport trigger with whileInView] - Consider performance: use will-change-transform
Create staggered animation for [list/grid items]: - Parent container variants: hidden: { opacity: 0 } visible: { opacity: 1, transition: { staggerChildren: 0.1 } } - Child item variants: hidden: { opacity: 0, y: 20 } visible: { opacity: 1, y: 0 } - Add transition: { duration: 0.4, ease: "easeOut" } - For grids: adjust stagger delay based on viewport - [Optional: Add hover animations to individual items] - [Optional: Reverse stagger on exit]
Add scroll-triggered animations to page sections: - Use Framer Motion's whileInView prop - Initial: { opacity: 0, scale: 0.95, y: 50 } - WhileInView: { opacity: 1, scale: 1, y: 0 } - Viewport settings: { once: true, amount: 0.3 } - Transition: { duration: 0.6, ease: "easeOut" } - Add different animations for different sections: - Fade up for text - Fade in from sides for images - Scale for feature cards - [Optional: Add parallax effects for backgrounds]
Please analyze this [component/page/feature] and: 1. Walk through the code execution step by step 2. Identify any potential issues or bugs 3. Explain what each part is supposed to do 4. Point out any missing dependencies or imports 5. Check for common issues like: - Undefined variables - Missing return statements - Incorrect prop types - Async/await problems 6. Suggest the most likely cause of [describe the specific issue]
Review this layout for responsive design issues: 1. Check if flexbox/grid is used correctly 2. Verify mobile breakpoints (sm:, md:, lg:) 3. Look for: - Fixed widths that might break on mobile - Missing flex-wrap properties - Overflow issues with long text - Images without responsive sizing 4. Test with different content lengths 5. Ensure proper spacing/padding on all screen sizes 6. Fix any [specific issue you're seeing]
Refactor this code to be cleaner and more maintainable: 1. Extract repeated code into reusable components/functions 2. Simplify complex conditionals 3. Remove unnecessary state variables 4. Combine similar useEffects 5. Use proper naming conventions 6. Add helpful comments only where needed 7. Consider using: - Custom hooks for logic - Utility functions for calculations - Constants for magic numbers 8. Keep the same functionality but make it [easier to read/more performant/more reusable]
I made changes to this [component/page] but the browser isn't showing the updates: 1. Check if the development server is still running 2. Look for any syntax errors in the terminal 3. Verify the file was saved (check for unsaved dot in tab) 4. Check if I'm editing the right file (maybe there are duplicates?) 5. Clear browser cache and hard refresh (Cmd+Shift+R) 6. Check if the component is actually being imported and used 7. Look for any conditional rendering that might be hiding it 8. If using state, verify it's updating correctly Show me what might be preventing my changes from appearing.
Navigate to your project folder and run: npm run dev Then open your browser to http://localhost:3000. Make sure you're in the right folder (vibe_101) when you run this.
Sometimes, Cursor will generate code that includes new packages. When that happens, run: npm install This installs any missing dependencies.
Make sure you've installed everything with: npm install Then try again. If that still doesn't work, open the Debug page for common fixes or try prompting Cursor with: "Why won't my site run when I use npm run dev? Can you fix the root issue?"
Looking for ready-made components to remix and customize?
Discover, share & remix the best UI components. Built by design engineers, loved by vibe coders. Works great with Cursor and other AI coding assistants.