Prompt Engineering for Vibe Coders

What a prompt is

A prompt is the brief. The clearer the screens, data, and rules, the less you have to undo.

RICE

• Role: who the model should imitate, such as a React developer.
• Instructions: what to build.
• Context: language, city, constraints, and what not to add.
• Examples: a product you want it to resemble, described in your own words.

Example: "You are a React and Tailwind developer. Build a booking form for a Hong Kong restaurant. Support English and Traditional Chinese. Use 30-minute slots. Do not add payments yet."

Example briefs

• Product grid with search and a price filter.
• Cart with quantity, subtotal, and a checkout button that does not charge yet.
• Date and time booking form.
• Restaurant reservation with party size.
• Dashboard with four numbers and a list of recent activity.
• Settings page with profile and notification sections.
• Support chat layout with message bubbles.
• Assistant page that shows code in a monospace block.
• Portfolio with projects and a contact form.
• Photo grid that opens a larger image.
• A feed of posts with like and comment buttons stored locally.
• Profile page with a short bio.
• Pomodoro timer with start, pause, and reset.
• Habit checklist with a streak count.
• Multiple-choice quiz with a score.
• Flashcards with a flip.
• Weather page that asks for a city and shows a forecast from a public API.
• Recipe page with steps and a timer.
• Kanban with three columns.
• Expense list with categories and a monthly total.

What to avoid

• One vague sentence.
• A prompt so long the tool loses the task.
• Contradictions such as "minimal" and "every feature".
• "Add a form" with no fields and no success message.

Larger builds

Ask for the data shape first, then the screens, then the save button. After each step, click through the app.

Key takeaways

• Name the role, the task, the constraints, and an example.
• Keep each prompt to one slice of the app.
• Test before you add the next slice.