Write Better Prompts, Get Better Code with AI Tools

Introduction

When I first started using tools like Cursor, Claude or ChatGPT for frontend development, I expected magic. I thought I could just highlight a buggy snippet, slap on a comment like:

Fix this

…and the AI would instantly understand everything: my tech stack, styling conventions, component logic, even the bugs I hadn’t diagnosed yet.

What I got instead? Half working suggestions. Sometimes vaguely helpful, other times flat out broken. It was like working with someone who knew how to type but not how to think.

Then it clicked.

These tools aren’t your senior engineer, they’re your fastest junior hire. They work fast, but you need to be precise.

Everything changed when I started applying prompt engineering principles to frontend work. Here’s exactly how I did it and how you can too.

1. Set the Stage: Provide Context Like You are Pairing

Context is your most powerful tool. Even though Cursor can see your file, it can’t read your mind.

Imagine asking a junior dev to help with a bug and only saying:

"Can you fix this?"

They would stare back at you: What is “this”? What is broken? What’s the expected result?

AI works the same way. It doesn't know your framework, your styling system or whether you’re in a client or server component unless you tell it.

🚫 Bad Prompt:

Fix this useEffect

✅ Good Prompt:

This is a React client component using useState and useEffect.
It fetches user data by ID, but runs twice in development due to React 18 Strict Mode.
Prevent double-fetching. Use a flag or AbortController. No external state management libs.

Why This Works:

Specifies the environment: React 18 + dev mode quirks
Defines the goal: fetch only once
Lists constraints: no state libraries
Mentions framework and component type

With this, the AI suggested a clean fix: a useRef flag, proper cleanup, and fetch control. It worked first try.

Another Example:

Prompt:

I’m using Next.js 14 App Router with Server Components.
Convert this client component to use a server action to handle form submission.
The form sends name + email and shows a success toast.

Result:

Cursor created a server action, updated the form to useFormState, passed it correctly into the client component and added toast logic using useEffect.

2. Define the Goal: Tell the AI What "Better" Means

“Improve this component” is not a prompt. It’s a hope :). Your idea of “better” might mean:

More readable
More performant
Smaller bundle
Idiomatic to your stack

Unless you define the success criteria, the AI will make assumptions. And you might not like them.

Vague adjectives = vague output.

Let’s say you have a clunky card component:

<div>
  <div style={{ padding: 10, border: "1px solid #ccc" }}>
    <h2>{title}</h2>
    <p>{description}</p>
  </div>
</div>

🚫 Bad Prompt:

Optimize this component

Result:

AI might add unnecessary flex layout or wrap everything in a grid for no reason and inline more styles.

✅ Good Prompts (with clear goals):

Improve readability and styling. Use Tailwind.
Add padding, shadow, rounded corners, and hover transition.
Make it responsive and mobile-friendly.

Result:

<div className="max-w-sm p-4 rounded-lg shadow-md bg-white hover:scale-105 transition-transform">
  <h2 className="text-lg font-bold">{title}</h2>
  <p className="text-gray-600">{description}</p>
</div>Each of these tells the AI:

Why this works:

Mention multiple axes:
- "Use Tailwind" - you tell it how to style
- "Improve readability" - guides semantic naming
- "Add hover transition" - you define UX behavior
- "Responsive" - it might add max-w, sm:, md: classes

In short: you removed ambiguity.

3. Split Complex Tasks Into Promptable Steps

Don’t ask the AI to build Rome in one prompt. Think like a developer: break features into components.

Prompt like you write code: component-first, feature-later.

🚫 Bad Prompt:

Build a responsive product list with filters, search, sorting and pagination

The AI would:

Add everything into one massive component
Mix up loading and UI logic
Miss the styling system I used (Tailwind)

✅ Good Prompts (step by step)

Step 1: Basic fetch

Create a component that fetches products from /api/products and displays them

const [products, setProducts] = useState([]);
const [loading, setLoading] = useState(true);

useEffect(() => {
  fetch('/api/products')
    .then(res => res.json())
    .then(setProducts)
    .finally(() => setLoading(false));
}, []);

Step 2: Search

// Add a search input that filters products by name (case-insensitive)

const [query, setQuery] = useState("");

const filtered = products.filter(p =>
  p.name.toLowerCase().includes(query.toLowerCase())
);

Step 3: Sort

// Add dropdown to sort filtered products by name (A-Z, Z-A)

const [sortOrder, setSortOrder] = useState("asc");

const sorted = [...filtered].sort((a, b) => {
  return sortOrder === "asc"
    ? a.name.localeCompare(b.name)
    : b.name.localeCompare(a.name);
});

Step 4: Pagination

// Add pagination: 10 items per page, with next/prev buttons

const [page, setPage] = useState(1);
const itemsPerPage = 10;
const paginated = sorted.slice((page - 1) * itemsPerPage, page * itemsPerPage);

Why this works:

Smaller prompts are easier for the model to handle
Easier for me to review and test each change
Reduces the chance of logic errors or inconsistent code

This is how you would break it into Jira tickets. Prompting works the same way.

4. Use Behavioral Examples and Edge Cases

One of the most underrated prompt patterns is giving examples. Adding example inputs and outputs turns your prompt into a contract.

❌ Bad Prompt

Format this number into currency

✅ Prompt (Use TDD-Like Prompts)

Create a formatPrice(amount) function:
Input: 12.5 -> Output: "$12.50"
Input: 5 -> Output: "$5.00"

❌ Bad Prompt

Add a search bar

✅ With Edge Case:

Add a search input that filters products by name.
Case-insensitive. If query is "mob", it should match "Mobile", "MobX", etc.
If no matches, show "No results found".

Now the AI:

Uses toLowerCase() for comparison
Adds empty-state UI
Handles common edge cases automatically

Why This Works:

AI tools tend to overlook edge behavior unless explicitly prompted. Guardrails matter.

5. Use Roles to Shift Quality

Prompt the AI to take on a role. You will often get a shift in tone, architecture, and quality.

Act like a senior React developer. Review this component for potential bugs or anti-patterns.

You're a mentor explaining this useEffect logic to a junior dev. Add comments line-by-line.

This usually makes the AI:

Explain itself better
Write clearer code
Catch things it otherwise skips

Another Favourite:

You are a Tailwind expert. Rewrite this JSX with clean, utility-first styling and responsive behavior.

It uses flex, gap, max-w, hover: and other best practices not inline styles or CSS classes.

Takeaway: Prompting = Product Thinking

At its core, writing great prompts is no different from writing great specs or tickets:

Be clear
Define success
Think in steps
Handle edge cases
Communicate like a teammate

AI isn’t here to replace good engineers, it amplifies great ones. Treat your AI assistant like a sharp new hire: fast, eager but needing direction.

The clearer you are, the better the code gets.

Your AI Assistant Is Only as Useful as Your Last Sentence

Comments

Technology

How React Really Works (And What Next.js Adds on Top)

More from this blog

I Didn’t Fix My Body, I Fixed My Lifestyle

Repeating the Same Mistake (Again)

Psychology Beyond the Chips

How I Ended Up Running?

Three Days, One Mic - My MC Experience

Introduction

1. Set the Stage: Provide Context Like You are Pairing

🚫 Bad Prompt:

✅ Good Prompt:

Why This Works:

Another Example:

Prompt:

Result:

2. Define the Goal: Tell the AI What "Better" Means

🚫 Bad Prompt:

Result:

✅ Good Prompts (with clear goals):

Result:

Why this works:

3. Split Complex Tasks Into Promptable Steps

🚫 Bad Prompt:

✅ Good Prompts (step by step)

Step 1: Basic fetch

Step 2: Search

Step 3: Sort

Why this works:

4. Use Behavioral Examples and Edge Cases

❌ Bad Prompt

✅ Prompt (Use TDD-Like Prompts)

❌ Bad Prompt

✅ With Edge Case:

Why This Works:

5. Use Roles to Shift Quality

Another Favourite:

Takeaway: Prompting = Product Thinking

Command Palette

Comments

Technology

How React Really Works (And What Next.js Adds on Top)

More from this blog

Introduction

1. Set the Stage: Provide Context Like You are Pairing

🚫 Bad Prompt:

✅ Good Prompt:

Why This Works:

Another Example:

Prompt:

Result:

2. Define the Goal: Tell the AI What "Better" Means

🚫 Bad Prompt:

Result:

✅ Good Prompts (with clear goals):

Result:

Why this works:

3. Split Complex Tasks Into Promptable Steps

🚫 Bad Prompt:

✅ Good Prompts (step by step)

Step 1: Basic fetch

Step 2: Search

Step 3: Sort

Step 4: Pagination

Why this works:

4. Use Behavioral Examples and Edge Cases

❌ Bad Prompt

✅ Prompt (Use TDD-Like Prompts)

❌ Bad Prompt

✅ With Edge Case:

Why This Works:

5. Use Roles to Shift Quality

Another Favourite:

Takeaway: Prompting = Product Thinking