Design Prompts for Better UI

Introduction: brief the page like a real UI job

Strong design prompts tell the AI Manager what the page needs to do for a real user. Instead of asking for something that feels “modern,” give it a concrete assignment. For example, ask for a Bootstrap 5 feedback dashboard for a support team: summary cards at the top, a filter row, a table of submissions, an empty state when nothing matches, and a detail panel or action area for reviewing one item.

Page type

Say whether it is a dashboard,
form, landing page, or detail view

Audience

Name the user or role
the page serves

Primary action

Describe what the user
must do there

Outcome

Explain what a good UI
should help them finish

Anchor the brief to the page's job before you talk about style.

Tell the AI Manager who uses the page and what they need to complete there.

Use the opening prompt to define function first, then shape the polish around it.

Text

Weak design prompt
"Make this page more modern."
Stronger design prompt
“Design a Bootstrap 5 feedback dashboard for a support team. Show summary cards for new and resolved feedback, a compact filter row, a responsive table of submissions, an empty state when no results match, and a detail area for reviewing one selected item. Keep the structure editable in Wappler and avoid decorative sections that do not help the workflow.”

Screenshot: Introduction: brief the page like a real UI jobClick to open the larger image

Describe the hierarchy, sections, and UI states you expect

The AI Manager does better UI work when you describe the page as a system of sections and states, not just a look. For the feedback dashboard, that means saying which elements dominate first, which filters stay visible, what the empty state should explain, and how mobile layout should collapse.

Sections

Name the major regions:
cards, filters, table, detail

Hierarchy

Say what should dominate first
and what stays secondary

States

Mention empty, loading,
selected, and mobile states

Name the sections you expect instead of hoping the AI infers them.

State the hierarchy so the result reflects real task priority.

Mention the states that make the page usable after generation, not just attractive at first glance.

Text

Structure-focused prompt
"Keep the dashboard in four clear layers: header and page purpose, summary cards, filter/search controls, then the submissions table. Add an empty state message below the filter row when no submissions match. On mobile, stack the cards and let the table scroll horizontally instead of collapsing important columns away."

Screenshot: Describe the hierarchy, sections, and UI states you expectClick to open the larger image

Give visual direction with constraints the project can sustain

Visual direction is useful when it stays inside the framework, density, and reuse rules the project can actually support. In Wappler, ask for stronger hierarchy, spacing, contrast, and component tone, but keep the request tied to Bootstrap 5, reusable sections, and responsive behavior.

Tone

Describe the visual character:
calm, technical, focused

Constraints

Keep the request inside the
framework and design rules

Density

Say whether the UI should feel
compact, spacious, or balanced

Responsiveness

Describe how the layout should
adapt across screen sizes

Describe tone and polish with constraints the project can actually keep.

Keep the request inside reusable structure, responsiveness, and the active framework.

Ask for stronger clarity and hierarchy, not only a prettier static mockup.

Text

Visual direction prompt
"Use a professional Bootstrap 5 admin tone with clean contrast, compact filters, and generous spacing around the summary cards. Keep the table readable rather than decorative, use badges for status, and preserve a structure that is easy to refine in Design View and Properties."

Screenshot: Give visual direction with constraints the project can sustainClick to open the larger image

Review the result in Wappler and prompt the next refinement

After a design pass, review the generated page in the real Wappler surfaces that own it. Use Design View to check the visual flow, Structure to verify the section hierarchy, and Properties to refine the selected component without reprompting the whole page. Then give the AI Manager one narrow follow-up based on what you actually saw.

Design View

Check visual rhythm,
spacing, and emphasis

Structure

Confirm the hierarchy and
repeated sections make sense

Properties

Refine one selected element
without rebuilding the page

Next prompt

Ask for the next small design
improvement, not a reset

Review the result where the page is actually maintained.

Identify the smallest next design improvement instead of reprompting from zero.

Treat visual polish and editor clarity as part of the same definition of quality.

Text

Good review follow-up
"Keep the current dashboard structure. Tighten the spacing in the filter row, make the empty state more obvious, and improve the selected-row emphasis in the table. After the pass, tell me which components changed so I can inspect them in Structure and Properties."

Screenshot: Review the result in Wappler and prompt the next refinementClick to open the larger image

Continue from UI prompts into stronger control

Move into standards, planning, or the wider builder route depending on what the next design request needs.

Choose the next UI guidance tour

Continue with the related tours that add stronger constraints, standards, or execution control to the next design pass.

Screenshot: Choose the next UI guidance tourClick to open the larger image