Beginner5 min readShare
Was this chapter helpful?
Share
Try these free tools
The #1 skill that makes everything else easier. Better prompts = better results.
What tech stack and project type
What you want built (use correct names)
Colors, sizes, behavior, layout
Responsive, accessible, animated
Example using the formula
"I'm building a Next.js app with Tailwind CSS [context]. Create a responsive navbar [component] with a logo on the left, navigation links centered, and a purple gradient CTA button on the right. It should be fixed to the top with a blur backdrop [details] and collapse into a hamburger menu on mobile [constraints]."
Say exactly what you want, not vaguely what you feel
Your stack, the file, what you already tried
Copy-paste the actual error message, every time
Ask for one change per message for best results
Refine what you have instead of starting over
See how specific language transforms vague requests into precise instructions.
Buttons
Add a button
Add a primary CTA button with text 'Get Started', purple gradient background (#8B5CF6 to #EC4899), white text, rounded-xl, and a subtle shadow that increases on hover.
Layout
Make a landing page
Create a landing page with: 1) Hero section with gradient text headline, subtitle, and two CTA buttons. 2) Features grid with 6 cards. 3) Testimonials carousel. 4) Footer with 4 columns.
Colors
Make it look nice
Use #8B5CF6 as primary, #F472B6 as accent, #1A1A3E for text, white background. Success green: #10B981, warning: #FBBF24, error: #FB7185.
Responsive
Make it mobile-friendly
On desktop, show a 3-column grid. On tablet (below 768px), switch to 2 columns. On mobile (below 640px), stack in a single column with reduced padding.
Data
Show some users
Create a data table with columns: Avatar, Name, Email, Role (dropdown), Status (colored badge), and Actions (edit/delete). Add sorting on Name and Email columns.
Animation
Add animations
Add a fade-up animation to each card in the features section. Cards should appear one at a time with a 100ms stagger delay as they scroll into view.
The difference between getting a fix in 10 seconds vs. going back and forth for 10 minutes.
"My app is broken. The page won't load. Help?"
AI has no idea what's wrong, what file, what error, or what you expected. It will guess and probably guess wrong.
"I'm getting this error in src/app/page.tsx:"
TypeError: Cannot read properties of undefined (reading 'map')
"I expected the list of users to render, but the data is coming back as undefined. I'm using Next.js with the App Router."
AI knows the file, the error, the expected behavior, and the tech stack. It can give you a precise fix.
Create a [component] using [tech stack] with [specific details].
Example: Create a pricing card component using React + Tailwind with three tiers: Basic, Pro, and Enterprise.
In [file/component], change [specific thing] to [new behavior].
Example: In the navbar component, change the mobile menu from a dropdown to a full-screen overlay with a fade animation.
The [component] is [wrong behavior]. It should [correct behavior]. Here's the code: ...
Example: The modal overlay doesn't close when clicking outside. It should close when clicking the backdrop.
Add [feature] to the existing [component]. It should [behavior] when [trigger].
Example: Add dark mode toggle to the navbar. It should switch all colors and persist the preference in localStorage.
Update the styling of [component] to match [reference]. Keep [constraints].
Example: Update the cards to have a glass-morphism effect with backdrop-blur and semi-transparent white background.
This is close but [adjustment needed]. Also [additional change].
Example: The spacing is too tight — increase padding to p-6. Also make the heading text larger (text-3xl) and bolder.
Using these specific terms helps AI generate exactly what you want.
Sometimes the best move is a fresh start. Here's how to know when.
You've asked the same thing 3 times and keep getting the same wrong answer. The conversation context is polluted with bad attempts.
Start fresh. Paste only your current code and the specific problem.
You've been chatting for 50+ messages. AI is forgetting what you said earlier and contradicting itself.
Start a new chat. Summarize what you've built so far and what you need next.
You started asking about a navbar but now you're debugging a database query. The conversation has drifted.
New topic = new chat. Give AI fresh context about the new problem.
You manually edited several files since the last AI message. The AI's understanding of your code is now stale.
Start fresh and paste your updated code so AI sees the current state.
Here's how to build a complete landing page through iterative prompting:
Create a Next.js page with Tailwind CSS. Set up the basic structure: a fixed navbar at top, main content area, and footer.
Add a hero section with a gradient text heading that says 'Build faster with AI', a subtitle paragraph, and two buttons: a primary 'Get Started' and a secondary 'Learn More'.
Below the hero, add a features section with 6 cards in a 3-column grid. Each card has an icon, title, and description. Use purple/pink accent colors.
Add a testimonials section with 3 testimonial cards showing a user avatar, name, role, and quote. Use a subtle background color.
Add hover animations to the cards (slight lift + shadow), fade-in animations on scroll, and make sure everything is responsive on mobile.
Add a CTA banner before the footer with a gradient background. Add meta tags for SEO. Make the navbar highlight the active link.
Be specific about component names, colors (hex), sizes, and behavior.
"Make it pretty" → "Use a purple-to-pink gradient with rounded corners and a subtle shadow."
Break complex pages into smaller steps: layout first, then components, then interactions.
Build the full app → Step 1: Create the layout. Step 2: Add the navbar. Step 3: Build the hero section.
Always tell AI what framework and libraries you're using.
"Build a form" → "Build a form using React Hook Form with Zod validation and Tailwind styling."
Always mention how things should look on different screen sizes.
"Add a grid" → "Add a 3-column grid on desktop, 2 on tablet, 1 on mobile with gap-6 spacing."
The first result is a starting point. Refine with follow-up prompts.
"Perfect, but make the font larger, add more padding, and change the blue to purple."
Real prompts that work well. Copy any of them, change the details to fit your project, and paste into your AI tool.
Landing Page
"Create a landing page with Tailwind CSS. Include: 1) A hero section with a large heading, subtitle, and two buttons. 2) A features section with 6 cards in a 3-column grid. 3) A testimonials section with 3 cards. 4) A CTA banner with a gradient background. 5) A footer with 4 columns. Use purple (#8B5CF6) as the main color."
Responsive Navbar
"Create a navbar with: logo on the left, links in the center, and a button on the right. Fix it to the top of the page with a blurred background. On mobile, hide the links behind a hamburger menu icon that opens a slide-in drawer. Highlight whichever link is active."
Pricing Section
"Create a pricing section with 3 tiers: Basic ($9/mo), Pro ($29/mo), and Enterprise (Custom). Each card shows the name, price, a list of features with checkmarks, and a button. Make the Pro card stand out with a colored border and a 'Most Popular' badge. On mobile, stack the cards vertically."
Contact Form
"Create a contact form with fields for Name, Email, a Subject dropdown (General, Support, Sales), and a Message textarea. All fields are required. Show a red error message below any empty field when the user tries to submit. Show a success message after submitting."
Dashboard Layout
"Create a dashboard with: 1) A sidebar on the left with navigation links and icons. 2) A top bar with a search input and a user avatar. 3) A main area with 4 stat cards at the top showing numbers, and a data table below. On smaller screens, collapse the sidebar to just icons."
Dark Mode Toggle
"Add dark mode to the app. Put a sun/moon toggle button in the navbar. Dark colors: background #0F0E17, cards #1A1A2E, text white, muted text #A7A9BE. Save the user's choice so it stays the same when they come back."
Hero Section
"Create a hero section with a large heading that has a purple-to-pink gradient text effect, a subtitle in gray, and two buttons side by side — one filled, one outlined. Center everything. Add a subtle fade-up animation when the page loads."
FAQ Accordion
"Create an FAQ section with 6 questions. Clicking a question opens the answer and closes the others. Use a smooth animation for opening and closing. Add a plus icon that turns into a minus when open. Below the questions, add a 'Still have questions? Contact us' link."
