Prompting tips

The quality of your results depends on the quality of your prompts. Here are patterns and strategies that work well when vibe coding with Kiro.

Be specific about what you want

Vague prompts lead to unexpected results. The more specific you are, the better the outcome.

Less effective:

Make the sidebar look better.

More effective:

Change the sidebar background to #1e293b, make the text white, and increase the padding between menu items to 12px.

Reference what you can see

Describe the element you want to change by what it looks like or where it is on the page — the same way you would explain it to a colleague.

Good examples:

Change the "Total Revenue" card on the dashboard to show a green background when the value is positive.

In the top navigation bar, add a notification bell icon to the right of the search bar.

On the login page, change the "Sign In" button from blue to purple.

One change at a time

Start with small, focused prompts. It is easier to review and accept a single change than a massive rewrite.

Instead of:

Redesign the entire dashboard with new colors, new layout, new cards, and add a dark mode toggle.

Try:

Change the dashboard background color to #f8fafc.

Then follow up with the next change once you are happy with the first one.

Iterate and refine

You can refine results with follow-up prompts. Kiro keeps context from your conversation, so you can say things like:

That looks good, but make the font size a bit larger.

Move that button to the left side instead.

Actually, change it to a rounded button instead of a square one.

Describe the "what," not the "how"

You do not need to know CSS or JavaScript to write good prompts. Focus on describing the end result, not the implementation.

You do not need to say:

Add a div with className="flex items-center justify-between p-4 bg-blue-500 rounded-lg" containing an h2 element.

Just say:

Add a blue banner with rounded corners at the top of the page that says "Welcome back" in large white text.

Common mistakes

Being too vague

Fix the page.

Kiro does not know what is "wrong" with the page. Tell it what you want to change.

Asking for too many things at once

Redesign the entire settings page with new sections, form validation, a toast notification system, and export to PDF.

Break this into individual prompts and tackle them one at a time.

Forgetting to specify location

Add a logout button.

Where? In the sidebar? The top navigation? The user menu dropdown? Be specific about placement.

Prompt templates

Here are templates you can adapt for common changes:

Changing text:

Change the text "[current text]" on the [page name] page to "[new text]".

Changing colors:

Change the [element] color from [current] to [new color or hex code].

Adding an element:

Add a [element type] to the [location]. It should [description of appearance and behavior].

Removing an element:

Remove the [element description] from the [page/location].

Changing layout:

Move the [element] from [current position] to [new position].