Crafting the right prompt is an art and science.
There is no one formula to rule them all and the results are dependent on the model you use, its training data and configurations, the clarity of the prompt, word-choice and tone, context and structure, and more.
In this blog post, we’re sharing prompting best practices and examples to help you build stellar web apps.
Here is what we cover:
Ready? Let’s dive in.
Your prompt should be clear, specific, and well-structured.
Ambiguous and generic prompts will result in an equally ambiguous and generic response, and you’ll have to do a lot of back and forth to achieve the desired result.
❌ Example of a bad prompt:
Create a home page for an email marketing app.
What makes it bad:
The prompt is generic, too broad, and it doesn’t state crucial requirements such as:
Let's take a look at a better way to craft prompts.
Provide enough context and background information on what exactly you’re trying to achieve. Clearly specify the feature or functionality that you need, and add examples of similar projects. Define design style to make sure it’s consistent on the app level. Tell the model who its audience is to tailor the complexity and style of its response.
✅ Example of a prompt with defined big picture
This prompt was created by Matthew, our Education Lead, for a workshop we did with BuildShip on how to create a lead intel app;
Organize your prompts with clear instructions and examples, and separate paragraphs by line breaks for clarity. Use bullet points, numbered steps, and navigational formatting. Try to strike a subtle balance between writing your prompts in a plain, conversational language and technical jargon when necessary.
Few-shot prompting technique means using zero, one, or several examples in your prompt to give a model a reference point or target to aim for. The examples should illustrate desired output so that a model can understand what you’re asking for, learn from the example, and tailor its own generation accordingly.
Zero-shot prompt is a simple one and it only provides the description of a task or goal. It provides no examples.
One-shot prompt provides one example that a model can imitate to best complete the task.
Few-shot prompt provides multiple examples to show the model a pattern that it needs to follow.
How to know how many examples you should include? It depends how complex the task you’re trying to achieve is and how comprehensive is the example(s) you’re using. When choosing examples, make sure they are relevant to the task you want to perform.
Let’s take another look at Matthew’s prompt to see how he uses one-shot prompting technique for better output;
Don’t ask for too much in a single prompt. You don’t want to try to build an entire app with all its functions, design and workflows in a single prompt. Break tasks into manageable steps and iterate based on the result. Rinse, and repeat.
Prompt chaining is a technique for improving the performance where a complex task is broken down into a series of smaller, connected prompts.
Each prompt in the chain addresses a specific subtask, and the output from one prompt is used as the input for the next.
You start with an initial prompt. The model generates a response, which you then evaluate. The response or a refined version of it becomes part of the next prompt. You repeat the process, with each prompt building on the last, until you achieve the desired result.
See how Matthew uses divide and conquer approach in his prompt: he focused on one page at a time, instead of prompting to build an entire app at once. For other app pages, he created dedicated prompts. The subsequent changes and adjustments were prompted separately in the WeWeb AI chat.
Here are some of the things you can generate with WeWeb AI:
Before prompting, it is crucial that you pass relevant context to WeWeb AI so that it can focus on particular elements and deliver more precise outputs. And you’ll spend less tokens.
Good news: there is a straightforward way to do that.
You can add specific context from various sources in your project to your prompts. Below are a few examples.
Variables and project data
Click the plus icon ("+") in the chat input area. The context binding menu will appear, displaying all available data in your project.
Select the specific data points you want to include as context. Your selected items will appear in the context panel within the chat.
When you craft your prompt, WeWeb AI will focus specifically on the data you've provided, helping it generate more targeted and relevant responses with less tokens.
And this approach goes beyond variables 👇
🎨 Images as context
Simply upload or copy/paste images. Any subsequent prompts will include your image(s) as context.
This feature is especially valuable when recreating designs from visual references, asking for UI improvements based on existing layouts, or troubleshooting visual issues in your application.
🔢 Formula assistance
Open the formula editor, then prompt WeWeb AI:
"Please modify this formula to also check if the user is logged in?"
WeWeb AI will have context of your current formula and make the appropriate changes.
🔗 Workflow optimization
With a workflow open, prompt:
"I want to add the selected item's data to the user's cart"
The WeWeb AI will analyze your workflow and available variables, and then implement the needed logic.
Check out our docs for more information about passing context to WeWeb AI, including elements, backend, and custom components.
When building apps, AI tools may misinterpret your instructions and produce incorrect or incomplete results.
If that happens, here are some troubleshooting strategies you can use.
You can use the prompting techniques we mentioned above or even ask AI to evaluate and improve your prompt for a specific task.
Did you know that you can ask WeWeb AI to improve your prompt? After typing your prompt in the chat, click the Improve my prompt button and you should get a better version.
Sometimes, you’ll need a human touch to make the changes manually. That’s why it’s important to know the concepts you’re working with and how they tie together.
At WeWeb, we combine AI to a visual interface that allows you to remain in control and step in when necessary.
With WeWeb AI, you can revert changes and steps by clicking the Revert button that will take away the latest iteration you did.
To recap prompting best practices when building your app:
✏️ Pro tip: experiment and test different combinations of instructions to find what works best for your specific tasks. Document those that work and put them into a swipe file. That way, you can create a reusable prompt library for future projects.
Ready to start prompting with WeWeb AI to generate UIs, logic and custom components? We prepared handy plug-and-play prompts that you can re-use and start building immediately.
🔹 Understand design prompting with WeWeb AI
There are three primary ways to generate designs with WeWeb AI:
Example: “Create a booking form with name, email, date, and service selection.”
Ideal for: quick prototyping and single-page generation.
Best when: You don’t have design files or detailed structures.
Pass in custom variables as context. This way, it ensures the WeWeb AI uses your data correctly (e.g., a services list with custom values).
Use the “+” icon to inject variables into your prompts.
Add wireframe screenshots directly to the chat + Combine with custom data for more precise layout + logic control.
Ideal when: replicating or refining a structure you already have.
🔁 Iterating on existing designs
1️⃣ Click on an element to set it as context in the AI chat.
2️⃣ Then prompt AI to modify it.
Example: “Add a tooltip to this button.”
Example: “Change this text input into a dropdown for countries.”
Clean context by removing elements from the context window if you want to broaden scope.
🧩 Prompting best practices for design generation
1️⃣ Use clear and scoped prompts: The more specific, the better:
✅ “Add a country select field under the email input.”
❌ “Make the form better.”
2️⃣ Start small and iterate.
3️⃣ Use the Improve my prompt button to improve raw prompts into WeWeb-friendly instructions.
4️⃣ Use screenshots over raw element data for layout generation to avoid noise.
🔧 Logic generation tips
Use scoped prompts, not large all-in-one instructions.
✅ Generate formulas one-by-one.
✅ Build workflows inside the workflow panel.
✅ Trigger WeWeb AI from within the formula editor to scope it:
“I want to create a formula that disables this submit button if the form inputs are empty.”
✅ For workflow prompts, inside the workflow editor, ask WeWeb AI to do things like:
“Send this form data to an API and toggle loading state.”
Note: WeWeb AI is still improving in this area.
🧪 Generating custom components
Describe the component you want to create, including:
Here are examples of prompts that you can re-use:
Create a line chart component using Highcharts that shows customer satisfaction data over time. Include properties for line color, chart title, and animation speed.
Create a skeleton loader component with properties for base color, wave color, animation speed, and shape (rectangle or circle). Make sure it has a background fill to cover content beneath it.
🧱 Naming & Structure
1️⃣ Name elements clearly (e.g., form-header, country-select)—this helps WeWeb AI to better understand the element.
2️⃣ Descriptive variables help too (e.g., userData, bookingFormInputs).
3️⃣ You can also manually rename layers in the layout tree to help with organization and WeWeb AI parsing.
As always, happy building!
Sign up now, pay when you're ready to publish.
.jpeg)
