Best Prompt Guidelines

Introduction: start with the finished result

The strongest AI Manager prompts sound like a short product brief, not a generic request to “build something.” Tell the agent what should exist when the pass is done, where it belongs, what stack it may touch, and what the user should be able to do afterward.

Use a concrete outcome. For example, ask for a Bootstrap 5 feedback page with a form, validation, a save action, and a clear success state instead of only asking for “a contact page with AI.”

Result

Name the page,
feature, or flow

Surface

Say which Wappler surfaces
may be touched

Constraints

State framework,
rules, or limits

Done state

Explain what success
looks like

Lead with the finished user outcome, not with the tool.

Say where the work belongs: page, form, Server Connect action, data flow, or several of them.

Give the AI Manager one believable result to aim for before you widen the scope.

Text

Weak prompt
"Make me a nice contact page."
Stronger prompt
“Create a Bootstrap 5 feedback page for website visitors. Include a clear intro, a form with name, email, rating, and message, App Connect inline validation, a loading state on submit, and a success message after the Server Connect save action returns. Keep the sections reusable and the structure easy to review in Design View and Properties.”

Screenshot: Introduction: start with the finished resultClick to open the larger image

Add the project context that changes the answer

A useful AI Manager prompt names the current surface, the existing project reality, and the constraint that matters. If the page already exists, say that. If the project is Bootstrap 5, mobile-first, and already has a form style, say that too. This saves the agent from rebuilding context badly.

For the same feedback example, mention whether you are creating a new page, refining an existing page, or connecting an existing form to backend logic.

Current surface

Name the page, editor,
or manager already in play

Existing reality

Mention what already exists:
layout, form, schema, or API

Hard constraint

Say what must remain true:
framework, mobile, naming, rules

Name the current page, feature, or manager so the AI Manager starts in the right working frame.

Mention what already exists and should be preserved.

Include the real constraint that would change the answer: framework, responsiveness, naming, validation, or design rules.

Text

"The page already exists as feedback.html in a Bootstrap 5 project. Keep the current hero section and color palette. Improve only the form area so the fields group better, the App Connect validation feedback is clearer, and the success state after the Server Connect save action is easier to notice. Do not replace the whole page layout."

Screenshot: Add the project context that changes the answerClick to open the larger image

Ask for one verified slice at a time

Large AI requests go better when you ask for the next reviewable slice instead of the whole finished system in one leap. For the feedback feature, the first slice might be the page and form layout, the second slice the Server Connect save action, and the third slice the post-submit success and error behavior.

Slice 1

Create or refine the
page structure

Slice 2

Add the save action
and validation contract

Slice 3

Wire success, error,
and loading states

Review gate

Inspect each pass before
you approve the next

Ask for the next meaningful slice, not the whole app in one opaque jump.

Review each pass in the editor or manager that owns it before moving on.

Keep the same task thread so the AI Manager can carry forward the plan and accepted decisions.

Text

Slice prompt
"Plan this as three passes. First, improve the feedback page layout and field grouping only. Second, add the backend save flow and validation response shape. Third, wire the form states in the UI and tell me what to verify after each pass before continuing."

Screenshot: Ask for one verified slice at a timeClick to open the larger image

Use follow-up feedback that changes the next move

The best follow-up prompt says what to keep, what to change, and what surface to review next. That gives the AI Manager a usable correction signal. Generic replies like “make it better” usually force the model to guess what disappointed you.

Keep

Protect the parts that are
already correct

Change

Name the exact weakness:
spacing, states, naming

Check next

Point to the next review surface:
Design, Structure, Server Connect

Say what stays, so the good parts are not regenerated away.

Say what changes, so the correction is narrow and reviewable.

Point to the next surface you will inspect, so the AI Manager knows what proof matters next.

Text

Better follow-up
"Keep the current layout and field order. Improve only the submit flow: show inline validation messages under each field, disable the button while saving, and display a success state that clears the form after a valid response. After the pass, tell me what to inspect in Design View and what response shape the form expects from Server Connect."

Screenshot: Use follow-up feedback that changes the next moveClick to open the larger image

Continue prompting with stronger control

Move into design prompts, reusable standards, or plan-driven execution depending on which part of the next AI Manager pass still feels weak.

Choose the next prompt-control tour

Continue with the related AI Manager tours that sharpen UI prompting, reusable standards, or plan-driven execution with more concrete examples.

Screenshot: Choose the next prompt-control tourClick to open the larger image