Writing prompts
Learn how to write clear, effective prompts that get the best results from bldrAgent's AI. Includes examples, patterns, and common mistakes to avoid.
Why prompts matter
The quality of what bldrAgent builds depends largely on the clarity of your instructions. A well-written prompt produces precise, working results. A vague prompt can produce something technically correct but not what you wanted.
This guide covers the patterns that consistently produce the best results.
The anatomy of a good prompt
A strong prompt typically includes:
- What — the feature or element you want
- Where — where it should appear in the app
- How — any specific behaviour, styling, or logic
- Why (optional) — the user's goal, which helps the AI make better design decisions
Example:
"Add a banner at the top of the homepage that shows a promotional message. It should have a close button that hides it. The background should be brand-blue. Show it only to logged-out users."
This tells the AI what (banner), where (homepage top), how (close button, colour, visibility rule), and why is implied (drive signups from anonymous visitors).
Patterns that work well
Describing a feature by user goal
Instead of describing a UI element, describe what the user is trying to accomplish:
❌ "Add a form with name, email and a dropdown"
✅ "Let users submit a support request. They should enter their name, email, and select a category from: Billing, Technical, General. On submit, show a confirmation message and send them an email receipt."
Showing example data
Include example values so the AI knows the shape of your data:
"Create a pricing table with 3 tiers: Starter ($0/mo), Pro ($29/mo), and Business ($99/mo). Each tier should list 4–5 features."
Asking for multiple variants
"Create two versions of the hero section — one for logged-in users showing their last project, one for logged-out users with a signup CTA. Show the correct version based on auth state."
Referencing existing parts of your app
The AI knows your app, so reference it directly:
"On the bookings table on the admin page, add a Status column that shows 'Pending', 'Confirmed', or 'Cancelled'. The colour should match: yellow for Pending, green for Confirmed, red for Cancelled."
Common mistakes to avoid
| Mistake | Better approach |
|---|---|
| Too vague: "Make it look better" | Specific: "Increase the card padding to 24px and use rounded-xl corners" |
| Too abstract: "Add a dashboard" | Concrete: "Add an admin dashboard with 4 metric cards: total users, active subscriptions, revenue this month, and support tickets open" |
| Ambiguous scope: "Fix the layout" | Scoped: "Fix the layout on the pricing page so it's a 3-column grid on desktop and stacks to 1 column on mobile" |
| Asking too much at once | Break large features into 3–4 smaller prompts |
Iterating with follow-up prompts
Don't try to get everything perfect in one message. Build incrementally:
- "Create a contact form with name, email, and message"
- "Add field validation — email must be valid, message must be at least 20 characters"
- "When the form submits, send the data to our CRM via webhook at https://..."
- "Style the form to match our brand colours from the homepage"
Getting unstuck
If the AI builds something wrong, be explicit about what's incorrect:
"The navigation menu is overlapping the hero section. Move the hero down by 80px to account for the fixed nav height."
Or use the undo shortcut and try a different approach:
"Undo the last change. Instead of a modal, show the booking confirmation as an inline success message below the form."