Prompting 101: Best Practices + Examples for Building Stellar Web Apps

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:

• Pros & cons of general vs specific prompts
• Why it's important to provide context to the AI model (includes WeWeb AI examples)
• How to format a prompt for better interpretation
• How to improve outputs by giving AI examples to work with
• How to chain prompts without getting stuck in an infinite loop
• What to do when you don't get the expected result

Ready? Let’s dive in.

General vs specific prompts

What can be a good prompt in the context of ideation may be a bad prompt if you have a specific layout, design or example in mind.

📃 Example of a general prompt:

"Create a home page for an email marketing app."

You can get good results from this type of general prompt, especially if you're in a creative phase, exploring an idea without a specific output in mind.

However, keep in mind that results returned by the AI may be hit-or-miss in this scenario. General prompts are usually more suitable for brainstorming, creative thinking, or experimentation.

If you have something specific in mind, general prompts tend to return disappointing results.

Specific prompts act as a roadmap, pointing directly to the desired destination with clear instructions and expectations. They are perfect when you need a specific output, targeted responses, or consistent results.

Let's take a look at how you can create specific prompts.

Provide context to the AI model

AI models perform better when they understand the context and have background information about your project and goals. With that in mind, it helps if you:

• Clearly specify the feature or functionality that you need.
• 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 precisely defined prompt

This prompt was created by Matthew, our Education Lead, for a workshop we did with BuildShip on how to create a lead intel app:

‍

Providing context to WeWeb AI

Speaking of context, did you know that there is a straightforward way to 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?

Watch the video below to learn how to pass different data from your project as context:

‍

Format and structure for better interpretation

Think of how you would instruct a junior colleague who just joined your company to complete a project.

Chances are, you wouldn't send a big block of text with no formatting or information about the context of your company. Instead you would:

• Give clear instructions and examples.
• Use bullet points and numbered steps.
• Separate paragraphs with line breaks for clarity
• Explain technical terms if they are specific to your company.

You would also help them think through the project.

Just like humans need to break down large projects into manageable tasks, AI performs better if it can focus on one task at a time.

You don’t want to try to build an entire app with all its functions, design and workflows in a single prompt.

Format your prompt in a way that makes it easy to understand, break tasks into manageable steps, and iterate based on the result.

Give AI examples to work with

As mentioned above, using a general prompt without examples can be helpful, particularly during the early ideation phase of web development.

However, more often than not, you'll achieve better results by providing the AI with examples of the kind of output you're aiming for. This helps the model better understand your intent, learn from the examples, and generate more targeted responses.

This technique is known as "few-shot prompting". Here’s a quick breakdown:

• Zero-shot prompting: You give the AI only a description of the task, with no examples.
• One-shot prompting: You provide one example to guide the model.
• Few-shot prompting: You offer multiple examples, helping the AI recognize patterns and generate more consistent, relevant results.

Let’s take another look at Matthew’s prompt to see how he uses one-shot prompting technique for better output:

Chain prompts without getting stuck in an infinite loop

Another helpful prompting technique involves "prompt chaining".

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 focuses 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:

Troubleshooting: what to do when you don't get the expected result

The AI tools that you use to build apps may misinterpret your instructions and produce incomplete or inaccurate results.

If that happens, here are some troubleshooting strategies you can use.

Rephrase your prompts

You can use the prompting techniques we mentioned above or even ask AI to evaluate and improve your prompt for a specific task.

In WeWeb for example, you can click on the "Improve my prompt" button after typing your prompt in the chat to get an improved version of your prompt:

‍

‍

Revert to a previous version

With WeWeb AI, you can revert changes and steps by clicking the Revert button that will take away the latest iteration you did:

AI can’t do everything for you

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:

‍

To recap prompting best practices when building your app:

• Be specific in your descriptions
• Provide context about your project
• Combine AI with manual customization
• Revert and iterate when necessary

Ready to start prompting with WeWeb AI to generate UIs, logic and custom components? We prepared a handy workbook with plug-and-play prompts that you can re-use: Design, Logic & Custom Component Prompting with WeWeb AI [Tips + Examples]

As always, happy building!