Skip to main content

Prompt Engineering

Write better prompts to get better results from AI.

Basic Principles​

Be Specific​

❌ "Make it look better" ✅ "Change the header background to gradient from blue (#3B82F6) to purple (#8B5CF6)"

Provide Context​

❌ "Add authentication" ✅ "Add email/password authentication using Supabase Auth with a login form and signup form"

Break Down Complex Requests​

❌ "Build a complete e-commerce site with products, cart, checkout, and admin panel" ✅ First: "Create a product listing page with grid layout" ✅ Then: "Add shopping cart functionality" ✅ Then: "Integrate Stripe checkout"

Effective Patterns​

Feature Addition​

"Add a [feature] that [does what] using [technology/library]"

Example:
"Add a dark mode toggle that persists user preference using localStorage"

Styling Changes​

"Change the [element] [property] to [value]"

Example:
"Change the button background color to #3B82F6 and add rounded corners"

Bug Fixes​

"Fix the [issue] in [component/file] where [description]"

Example:
"Fix the form submission in LoginForm.tsx where it's not validating email format"

Refactoring​

"Refactor [component/code] to [improvement]"

Example:
"Refactor the UserProfile component to use React hooks instead of class components"

Mode-Specific Tips​

Chat Mode​

Use for planning and understanding:

"How should I structure the authentication flow?"
"What's the best way to handle state for the shopping cart?"
"Explain how the payment integration works"

Build Mode​

Use for implementation:

"Implement the authentication flow with Supabase"
"Create a shopping cart with add/remove functionality"
"Integrate Stripe payment processing"

Advanced Techniques​

Incremental Development​

Build features step by step:

  1. "Create a basic user profile page with name and email"
  2. "Add avatar upload functionality"
  3. "Add edit mode with form validation"
  4. "Add save button with loading state"

Reference Existing Code​

"Add a similar component to UserCard but for products"
"Use the same styling as the header for the footer"

Specify Libraries​

"Add form validation using Zod"
"Implement animations with Framer Motion"
"Add charts using Recharts"

Common Mistakes​

Too Vague​

❌ "Make it responsive" ✅ "Add mobile breakpoints at 768px and 375px with stacked layout"

Too Many Changes at Once​

❌ "Redesign the entire app with new colors, fonts, layout, and add 5 new features" ✅ Break into separate requests

Assuming Context​

❌ "Fix the bug" (which bug?) ✅ "Fix the bug where the login form doesn't submit when pressing Enter"

Examples by Project Type​

WebApp​

"Create a landing page with:
- Hero section with gradient background
- Feature cards in 3-column grid
- Pricing table with 3 tiers
- Contact form with validation"

Mobile App​

"Build a todo app with:
- List view with swipe-to-delete
- Add button with modal form
- Mark as complete with checkbox
- Filter by status (all/active/completed)"

Chrome Extension​

"Create a bookmark manager extension with:
- Popup showing recent bookmarks
- Search functionality
- Add/edit/delete bookmarks
- Organize into folders"

Testing Your Prompts​

  1. Start Simple: Test with a basic version first
  2. Iterate: Add complexity gradually
  3. Be Patient: Complex features take time
  4. Review Output: Check generated code before continuing
  5. Ask Questions: Use Chat mode if unsure

Prompt Templates​

New Feature​

I want to add [feature name] to my [project type].

Requirements:
- [Requirement 1]
- [Requirement 2]
- [Requirement 3]

Use [specific library/technology] if possible.

Bug Fix​

There's a bug in [component/file] where [description of issue].

Expected behavior: [what should happen]
Actual behavior: [what's happening]

Error message (if any): [error]

Redesign​

Redesign the [component/page] with:
- [Design element 1]
- [Design element 2]
- [Design element 3]

Keep the existing functionality but update the visual design.