Prompting Hostinger Horizons: build your web app effectively

Hostinger Horizons is a no-code AI tool that lets you create web applications by just writing prompts. It uses natural language processing (NLP) to interpret your inputs and generate fully functional designs and features without manual coding.

To get the best results, you need to craft clear and detailed prompts. The more specific your instructions, the better Hostinger Horizons understands your requirements and delivers accurate, high-quality outputs. On the other hand, vague or incomplete prompts can lead to irrelevant or incorrect results.

In this article, you’ll learn how to write effective prompts for Hostinger Horizons. We’ll share practical tips, compare good vs. bad prompts, and highlight common mistakes to avoid. By the end, you’ll be able to create web applications that align with your vision with minimal adjustments.

Prompt writing tips for Hostinger Horizons

From being concise to iterating and refining your inputs, here are some prompting tips to help you create a web app effectively with Hostinger Horizons.

1. Be clear and specific

Being clear and specific means writing your prompt in a precise and detailed way, leaving little room for ambiguity. Clearly define the task, desired outcome, and context.

By using specific and detailed prompts, you’re helping Hostinger Horizons understand your exact needs, reduce the number of iterations, and ensure the AI tool generates results that match your needs.

A good prompt example:

Create an AI-powered recipe suggestion tool that lets users input available ingredients and receive personalized recipe recommendations. Display recipe details, including cooking time, difficulty level, and step-by-step instructions. Use a clean and modern UI with a pastel background, soft accent colors, and high-quality food images.

Why? This prompt provides clear instructions about the content, structure, and design elements, so Hostinger Horizons can generate a webpage that closely matches the user’s vision.

A bad prompt example:

Create a recipe tool.

Why? This prompt is too vague and lacks key details about what kind of recipe tool you need, its purpose, features, content, and design preferences. It will give you a recipe tool, but it will be far from what you actually need and will require a lot of work.

Best practices for writing clear and specific prompts

• Outline user interaction and navigation flow – describe how users should navigate the app and interact with its features.
• Specify design and aesthetic preferences – provide details about the visual aspects so Hostinger Horizons can align the design with your brand identity or personal style.

2. Break down complex ideas

When using Hostinger Horizons, you may want to include multiple features in your web app. It might seem efficient to request everything in a single prompt to save your message limit. However, breaking down complex ideas into smaller, more manageable tasks leads to better results.

This approach, known as decomposed prompting technique, helps Hostinger Horizons focus on specific instructions without being overwhelmed by excessive details. Isolating tasks also makes it easier to identify and correct errors in specific sections.

Good prompt examples:

Create a movie review submission form so that users can rate movies on a scale of 1 to 5 stars and write a text review up to 500 words.

Design a movie database page displaying movie titles with posters, genres, release dates, and average user ratings, sortable by rating and release date.

Implement a search functionality that lets users find movies by title, genre, or actor, with autocomplete suggestions.

Why? By addressing each feature with a specific prompt, the development process becomes more focused, resulting in a functional and user-friendly movie review web app.

A bad prompt example:

Create a comprehensive movie review website with user accounts, movie listings, review submissions, and search functionality.

Why? This prompt is too broad and lacks detailed instructions for each feature. As a result, the AI may produce an incomplete or inconsistent outcome, increasing the risk of errors.

Best practices for breaking down complex ideas

• Prioritize tasks based on dependencies – identify which features rely on others and structure your development accordingly.
• Set clear objectives for each feature – define specific goals and expected outcomes so that every component functions as intended.

3. Start only with core functionality

Expanding on the previous tip, it’s always a good idea to focus on the core functionality before adding extra features. Doing so helps Hostinger Horizons understand your immediate needs, creating a solid foundation before integrating supplementary elements.

Taking care of the core features first also ensures that you use your time and message limits efficiently, preventing unnecessary complexity for both you and the tool in the initial stages.

A good prompt example:

Develop a social media platform that lets users create profiles and share photos with captions. Include basic features such as user registration, profile customization, and a photo feed displaying posts from followed users.

Why? This prompt focuses on the platform’s fundamental aspects, providing a clear and manageable scope for Hostinger Horizons to execute effectively.

A bad prompt example:

Create a social media platform with user profiles, messaging, photo sharing, live streaming, a marketplace, a blog section, virtual reality integration, and AI-driven content recommendations.

Why? This prompt overwhelms Hostinger Horizons with too many features at once, lacking focus on the essential functionalities. As a result, it may generate incomplete or unfocused outputs.

Best practices for starting with core functionality

• Define your web app’s purpose – Clearly state what your app is designed to do by identifying the problem it solves or the value it brings.
• Test core features thoroughly – Before adding more features, fully test your web app’s main functionality and address any issues.

4. Incorporate constraints and preferences

Aside from describing what you expect Hostinger Horizons to do, specifying what it shouldn’t do can also help generate a higher-quality output.

Incorporating constraints helps narrow down your prompt to be more specific and less ambiguous.

A good prompt example:

Create a simple and basic to-do-list web application. Here are the limitations to consider:

Don’t include user authentication.

Avoid using fancy transitions or animations.

Use HTML, CSS, and JavaScript only, don’t incorporate any frameworks or libraries.

Why? Adding restrictions enables Hostinger Horizons to exclude unwanted technologies or features from your application, making the output more aligned with your desired specifications and helping save time.

A bad prompt example:

Create a simple and basic to-do-list web application.

Why? This prompt lacks details and clarity about the application’s specifications. This results in a more general output that might not fit your needs.

5. Upload images to show exactly what you want

Hostinger Horizons lets you upload images to guide the AI when generating your web app.

It’s especially useful if you have a sketch, wireframe, color palette, or design reference that you want Hostinger Horizons to follow. Instead of describing everything in text, you can provide a visual reference to make the output more precise.

Simply hit the Upload file button in the prompt field, select the image you want to use, and write a prompt describing what you want the AI to do.

You can also upload screenshots from the generated output to refine the design. If certain elements don’t look the way you want, try taking a screenshot from the right preview pane and highlighting the part you want to change. Hostinger Horizons will then adjust it accordingly.

Please note that although this feature lets you use existing websites as inspiration, we strongly advise against blatantly copying copyrighted designs, as this can lead to legal issues. Instead, ask Hostinger Horizons to create a web app with similar functionality but a unique, original layout, like this:

Hey, I want to create a web app similar to IMDb, which lets users search for movies, rate them, and read reviews. The screenshot of the platform is attached. I’d like you to take the image as an inspiration, especially when adding the features and deciding on the button placements. However, please use a unique layout, color scheme, and design."

6. Ask the tool to fix issues

Since Hostinger Horizons is still in early access, you may occasionally encounter errors when generating web apps. That’s why we offer a 30-day money-back guarantee if you decide to change your mind after trying it.

The good news is that Hostinger Horizons includes a built-in debugging feature that detects and fixes issues based on your prompt. When an error occurs, instead of displaying the web app preview in the right pane, the tool will show an error message along with the affected lines of code.

What you can do is copy the error message and the highlighted code, paste them into the prompt field, and ask Hostinger Horizons to analyze and correct it, like this:

Hey, I encountered an error in my web app. Can you analyze this code and fix the issue?
[Insert the affected code lines]

If additional errors appear, repeat the process – copy the error, ask the tool to identify and fix it – until your web app works as expected.

Advanced tips for crafting high-quality prompts

In addition to the basic tips, consider the following advanced techniques when writing prompts for Hostinger Horizons to further enhance the output quality and accuracy:

Use steps in your prompt

While we suggest breaking down complex ideas into multiple prompts, you may prefer to keep related tasks in a single prompt.

If that’s the case, try formatting your prompt as a step-by-step instruction instead of a paragraph. Using steps helps Hostinger Horizons follow your instructions in chronological order, resulting in more coherent and consistent results.

Additionally, a structured prompt makes it easier to review and refine as needed.

A good prompt example:

Create a page in my application for logging in and signing up. Here’s what you should do:

Make a dedicated page for users to log in or sign up.

Add username, email address, and password forms.

Connect these forms with their corresponding database tables.

Insert an action button to log in or sign up.

Add a hyperlink that switches the user from the login page to the signup page if they don’t have an account.

Put an error message if the inputted data is invalid.

Why? This prompt has a clear flow and separation of topics, describing what Hostinger Horizons should create in chronological order.

A bad prompt example:

Create a page in my application for logging in and signing up. Here, add forms for username, email address, and password forms, which are connected to the corresponding database tables. Add two buttons for logging in/sign up and redirection for users who don’t have an account. If the inputted data is invalid, add an error.

Why? This prompt doesn’t separate the tasks clearly, making it difficult to follow. Hostinger Horizons might miss some instructions and give an incomplete output.

Include technical terms

If you are familiar with web development or design, consider including technical terms in your prompt. For example, you can use terms like flexbox, lazyloading, and minimalist design.

Adding technical terms makes your prompt more efficient and specific, minimizing ambiguity. This also ensures that the AI output aligns more closely with your app requirements.

Good prompt examples:

Change the overall design of my web application with the flat design utilizing only two-dimensional elements and a monochrome color palette.

Change the overall design of my web application with the flat design utilizing only two-dimensional elements and a monochrome color palette.

Why? These prompts contain technical terms and a detailed description of what to add to the application. This allows Hostinger Horizons to understand your requirements more easily.

Bad prompt examples:

Change the design of my web application. I want it to be very simple and basic, both in terms of color and design.

Make my web application load images only when users view them.

Why? Hostinger Horizons might misinterpret these prompts because they are vague. For example, simple and basic design doesn’t always mean a flat design.

Managing credits and avoiding message limits

Like other web development AI tools, Hostinger Horizons has a specific message limit, making it important to manage your credit efficiently.

One common mistake when using Hostinger Horizons is spending too many credits on building the web application. You should ideally reserve some for tasks like integrating external services and troubleshooting.

While the message limit resets monthly, and you can upgrade to a higher plan to get more credits, managing your credits properly makes your development more efficient.

Here are Hostinger Horizons prompting strategies that help you get the best use of your message credits efficiently:

• Write a detailed and clear prompt to avoid repeating basic points in the later stage of your development.
• Double-check your prompt before submitting it so that you won’t waste your credits for completing the initial instruction.
• Build upon the first output, and iterate one specific aspect of development at a time. For example, focus on the visual elements, then move on to features.
• Each time you iterate the output, follow the initial prompt structure: describe the goal of the follow-up input, the specifications, and your expectations.
• Structure your prompt so you consistently provide effective input.

Note that regardless of how efficient your prompts are, your web application’s complexity remains the biggest factor determining the number of credits you will use.

Conclusion

As an AI-powered web development tool, Hostinger Horizons relies on high-quality prompts to give accurate results. Your prompt must be detailed and provide enough information about the task and project requirements.

Start by describing your application’s core functionality, and move on to the details afterward. To make your instructions clearer, break down complex tasks into multiple prompts and include constraints so Hostinger Horizons better understands what to include in your project.

If you have a visual plan or inspiration for your web application, you can also upload it to Hostinger Horizons as a prompt.

We hope this article has helped you write effective prompts for a more efficient web development process. If you have questions about Hostinger Horizons, leave a comment below or read our Hostinger Horizons FAQ.

FAQ on Prompting in Hostinger Horizons