{"id":6773,"date":"2025-11-21T06:18:02","date_gmt":"2025-11-21T06:18:02","guid":{"rendered":"https:\/\/www.hostinger.com\/support\/?p=6773"},"modified":"2026-08-19T09:37:30","modified_gmt":"2026-08-19T09:37:30","slug":"prompting-hostinger-ai-builder-agentic-mode-build-your-web-app-effectively","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/support\/prompting-hostinger-ai-builder-agentic-mode-build-your-web-app-effectively\/","title":{"rendered":"Hostinger AI Builder: How to write effective prompts in agentic mode"},"content":{"rendered":"<p>Write clear, detailed prompts to get accurate, high-quality results when building a web app in Hostinger AI Builder agentic mode. Vague or incomplete prompts can lead to irrelevant or incorrect results, while specific instructions help the AI understand your requirements.<\/p><h2 id=\"h-prompt-writing-tips-for-hostinger-horizons\" class=\"wp-block-heading\"><span id=\"Prompt_writing_tips_for_Hostinger_Horizons\" class=\"ez-toc-section\"><\/span><strong>Prompt writing tips for Hostinger AI Builder agentic mode<\/strong><\/h2><p>From being concise to iterating and refining your inputs, here are some prompting tips to help you&nbsp;<a href=\"https:\/\/www.hostinger.com\/support\/how-to-create-a-web-app-using-hostinger-ai-builder-agentic-mode\/\" rel=\"follow\" data-wpel-link=\"internal\">create a web app effectively with Hostinger AI Builder<\/a>.<\/p><h3 id=\"h-1-be-clear-and-specific\" class=\"wp-block-heading\"><span id=\"1_Be_clear_and_specific\" class=\"ez-toc-section\"><\/span><strong>1. Be clear and specific<\/strong><\/h3><p>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.<\/p><p>Some clarifying questions from Hostinger AI Builder may show clickable answer options instead of requiring a typed response, letting you select a single option, select multiple options, or write your own answer. Using these when available helps keep your prompts consistent and reduces ambiguity.<\/p><p>By using specific and detailed prompts, you&rsquo;re helping Hostinger AI Builder&nbsp;understand your exact needs, reduce the number of iterations, and ensure the AI tool generates results that match your needs.<\/p><p><strong>A good prompt example:<\/strong><\/p><div class=\"enlighter-default enlighter-v-standard enlighter-t-atomic enlighter-l-raw enlighter-hover \">\n<div class=\"enlighter-code\">\n<div class=\"enlighter\">\n<div class=\"\">\n<blockquote>\n<div><em><span class=\"enlighter-text\">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.<\/span><\/em><\/div>\n<\/blockquote>\n<\/div>\n<\/div>\n<\/div>\n<\/div><p><strong>Why?&nbsp;<\/strong>This prompt provides clear instructions about the content, structure, and design elements, so Hostinger AI Builder can generate a webpage that closely matches the user&rsquo;s vision.<\/p><p><strong>A bad prompt example:<\/strong><\/p><div class=\"enlighter-default enlighter-v-standard enlighter-t-atomic enlighter-l-raw enlighter-hover \">\n<div class=\"enlighter-code\">\n<div class=\"enlighter\">\n<div class=\"\">\n<blockquote>\n<div><em><span class=\"enlighter-text\">Create a recipe tool.<\/span><\/em><\/div>\n<\/blockquote>\n<\/div>\n<\/div>\n<\/div>\n<\/div><p><strong>Why?&nbsp;<\/strong>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.<\/p><p><strong>Best practices for writing clear and specific prompts<\/strong><\/p><ul class=\"wp-block-list\">\n<li><strong>Outline user interaction and navigation flow<\/strong>&nbsp;&ndash; describe how users should navigate the app and interact with its features.<\/li>\n<li><strong>Specify design and aesthetic preferences<\/strong> &ndash; provide details about the visual aspects so Hostinger AI Builder can align the design with your brand identity or personal style.<\/li>\n<\/ul><div class=\"protip\">\n<div class=\"intercom-interblocks-callout\" style=\"background-color: #e3e7fa80;border-color: #334bfa33\">\n<p>Familiarize yourself with the <a href=\"https:\/\/www.hostinger.com\/support\/hostinger-ai-builder-agentic-mode-product-overview\/\">Hostinger AI Builder&nbsp;interface and key features<\/a> by reading our guide.<\/p>\n<\/div>\n<\/div><h3 id=\"h-2-break-down-complex-ideas\" class=\"wp-block-heading\"><span id=\"2_Break_down_complex_ideas\" class=\"ez-toc-section\"><\/span><strong>2. Break down complex ideas<\/strong><\/h3><p>When using Hostinger AI Builder, you may want to include multiple features in your web app. Breaking down complex ideas into smaller, more manageable tasks leads to better results.<\/p><p>This approach, known as decomposed&nbsp;<a href=\"https:\/\/www.hostinger.com\/tutorials\/ai-prompt-engineering\/\" rel=\"follow\" data-wpel-link=\"internal\">prompting technique<\/a>, helps Hostinger AI Builder focus on specific instructions without being overwhelmed by excessive details. Isolating tasks also makes it easier to identify and correct errors in specific sections.<\/p><p><strong>Good prompt examples:<\/strong><\/p><div class=\"enlighter-default enlighter-v-standard enlighter-t-atomic enlighter-l-raw enlighter-hover \">\n<div class=\"enlighter-code\">\n<div class=\"enlighter\">\n<div class=\"\">\n<blockquote>\n<div><em><span class=\"enlighter-text\">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.<\/span><\/em><\/div>\n<\/blockquote>\n<\/div>\n<\/div>\n<\/div>\n<\/div><div class=\"enlighter-default enlighter-v-standard enlighter-t-atomic enlighter-l-raw enlighter-hover \">\n<div class=\"enlighter-code\">\n<div class=\"enlighter\">\n<div class=\"\">\n<blockquote>\n<div><em><span class=\"enlighter-text\">Design a movie database page displaying movie titles with posters, genres, release dates, and average user ratings, sortable by rating and release date.<\/span><\/em><\/div>\n<\/blockquote>\n<\/div>\n<\/div>\n<\/div>\n<\/div><div class=\"enlighter-default enlighter-v-standard enlighter-t-atomic enlighter-l-raw enlighter-hover \">\n<div class=\"enlighter-code\">\n<div class=\"enlighter\">\n<div class=\"\">\n<blockquote>\n<div><em><span class=\"enlighter-text\">Implement a search functionality that lets users find movies by title, genre, or actor, with autocomplete suggestions.<\/span><\/em><\/div>\n<\/blockquote>\n<\/div>\n<\/div>\n<\/div>\n<\/div><p><strong>Why?<\/strong> 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.<\/p><p><strong>A bad prompt example:<\/strong><\/p><div class=\"enlighter-default enlighter-v-standard enlighter-t-atomic enlighter-l-raw enlighter-hover \">\n<div class=\"enlighter-code\">\n<div class=\"enlighter\">\n<div class=\"\">\n<blockquote>\n<div><em><span class=\"enlighter-text\">Create a comprehensive movie review website with user accounts, movie listings, review submissions, and search functionality.<\/span><\/em><\/div>\n<\/blockquote>\n<\/div>\n<\/div>\n<\/div>\n<\/div><p><strong>Why?&nbsp;<\/strong>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.<\/p><p><strong>Best practices for breaking down complex ideas<\/strong><\/p><ul class=\"wp-block-list\">\n<li><strong>Prioritize tasks based on dependencies<\/strong>&nbsp;&ndash; identify which features rely on others and structure your development accordingly.<\/li>\n<li><strong>Set clear objectives for each feature<\/strong>&nbsp;&ndash; define specific goals and expected outcomes so that every component functions as intended.<\/li>\n<\/ul><h3 id=\"h-3-start-only-with-core-functionality\" class=\"wp-block-heading\"><span id=\"3_Start_only_with_core_functionality\" class=\"ez-toc-section\"><\/span><strong>3. Start only with core functionality<\/strong><\/h3><p>Expanding on the previous tip, it&rsquo;s always a good idea to focus on the core functionality before adding extra features. Doing so helps Hostinger AI Builder understand your immediate needs, creating a solid foundation before integrating supplementary elements.<\/p><p>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.<\/p><p><strong>A good prompt example:<\/strong><\/p><div class=\"enlighter-default enlighter-v-standard enlighter-t-atomic enlighter-l-raw enlighter-hover \">\n<div class=\"enlighter-code\">\n<div class=\"enlighter\">\n<div class=\"\">\n<blockquote>\n<div><em><span class=\"enlighter-text\">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.<\/span><\/em><\/div>\n<\/blockquote>\n<\/div>\n<\/div>\n<\/div>\n<\/div><p><strong>Why?<\/strong> This prompt focuses on the platform&rsquo;s fundamental aspects, providing a clear and manageable scope for Hostinger AI Builder to execute effectively.<\/p><p><strong>A bad prompt example:<\/strong><\/p><div class=\"enlighter-default enlighter-v-standard enlighter-t-atomic enlighter-l-raw enlighter-hover \">\n<div class=\"enlighter-code\">\n<div class=\"enlighter\">\n<div class=\"\">\n<blockquote>\n<div><em><span class=\"enlighter-text\">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.<\/span><\/em><\/div>\n<\/blockquote>\n<\/div>\n<\/div>\n<\/div>\n<\/div><p><strong>Why?<\/strong> This prompt overwhelms Hostinger AI Builder with too many features at once, lacking focus on the essential functionalities. As a result, it may generate incomplete or unfocused outputs.<\/p><p><strong>Best practices for starting with core functionality<\/strong><\/p><ul class=\"wp-block-list\">\n<li><strong>Define your web app&rsquo;s purpose<\/strong>&nbsp;&ndash; Clearly state what your app is designed to do by identifying the problem it solves or the value it brings.<\/li>\n<li><strong>Test core features thoroughly<\/strong>&nbsp;&ndash; Before adding more features,&nbsp;<a href=\"https:\/\/www.hostinger.com\/tutorials\/web-app-testing\/\" rel=\"follow\" data-wpel-link=\"internal\">fully test your web app&rsquo;s main functionality<\/a>&nbsp;and address any issues.<\/li>\n<\/ul><h3 id=\"h-4-incorporate-constraints-and-preferences\" class=\"wp-block-heading\"><span id=\"4_Incorporate_constraints_and_preferences\" class=\"ez-toc-section\"><\/span><strong>4. Incorporate constraints and preferences<\/strong><\/h3><p>Aside from describing what you expect Hostinger AI Builder to do, specifying what it shouldn&rsquo;t do can also help generate a higher-quality output.<\/p><p>Incorporating constraints helps narrow down your prompt to be more specific and less ambiguous.<\/p><p><strong>A good prompt example<\/strong>:<\/p><div class=\"enlighter-default enlighter-v-standard enlighter-t-atomic enlighter-l-raw enlighter-hover \">\n<div class=\"enlighter-code\">\n<div class=\"enlighter\">\n<div class=\"\">\n<blockquote>\n<div><em><span class=\"enlighter-text\">Create a simple and basic to-do-list web application. Here are the limitations to consider:<\/span><\/em><\/div>\n<\/blockquote>\n<\/div>\n<blockquote>\n<div class=\"\">\n<div><\/div>\n<\/div>\n<div class=\"\">\n<div><em><span class=\"enlighter-text\">Don&rsquo;t include user authentication.<\/span><\/em><\/div>\n<\/div>\n<div class=\"\">\n<div><\/div>\n<\/div>\n<div class=\"\">\n<div><em><span class=\"enlighter-text\">Avoid using fancy transitions or animations.<\/span><\/em><\/div>\n<\/div>\n<div class=\"\">\n<div><\/div>\n<\/div>\n<\/blockquote>\n<div class=\"\">\n<blockquote>\n<div><em><span class=\"enlighter-text\">Use HTML, CSS, and JavaScript only, don&rsquo;t incorporate any frameworks or libraries.<\/span><\/em><\/div>\n<\/blockquote>\n<\/div>\n<\/div>\n<\/div>\n<\/div><p><strong>Why?&nbsp;<\/strong>Adding restrictions enables Hostinger AI Builder to exclude unwanted technologies or features from your application, making the output more aligned with your desired specifications and helping save time.<\/p><p><strong>A bad prompt example<\/strong>:<\/p><div class=\"enlighter-default enlighter-v-standard enlighter-t-atomic enlighter-l-raw enlighter-hover \">\n<div class=\"enlighter-code\">\n<div class=\"enlighter\">\n<div class=\"\">\n<blockquote>\n<div><em><span class=\"enlighter-text\">Create a simple and basic to-do-list web application.<\/span><\/em><\/div>\n<\/blockquote>\n<\/div>\n<\/div>\n<\/div>\n<\/div><p><strong>Why?&nbsp;<\/strong>This prompt lacks details and clarity about the application&rsquo;s specifications. This results in a more general output that might not fit your needs.<\/p><h3 id=\"h-5-upload-images-to-show-exactly-what-you-want\" class=\"wp-block-heading\"><span id=\"5_Upload_images_to_show_exactly_what_you_want\" class=\"ez-toc-section\"><\/span><strong>5. Upload images or PDF files to show exactly what you want<\/strong><\/h3><p>Hostinger AI Builder lets you upload images to guide the AI when generating your web app.<\/p><p>It&rsquo;s especially useful if you have a sketch, wireframe, color palette, or design reference that you want Hostinger AI Builder to follow. Instead of describing everything in text, you can provide a visual reference to make the output more precise.<\/p><p>Simply hit the&nbsp;<strong>Upload file<\/strong>&nbsp;button in the prompt field, select the image you want to use, and write a prompt describing what you want the AI to do.<\/p><p>You can also upload screenshots from the generated output to refine the design. If certain elements don&rsquo;t look the way you want, try taking a screenshot from the right preview pane and highlighting the part you want to change. Hostinger AI Builder will then adjust it accordingly.<button class=\"lightbox-trigger\" type=\"button\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\"><\/button><\/p><p>Please note that although this feature lets you use existing websites as inspiration,&nbsp;<strong>we strongly advise against blatantly copying copyrighted designs<\/strong>, as this can lead to legal issues. Instead, ask Hostinger AI Builder to create a web app with similar functionality but a unique, original layout, like this:<\/p><div class=\"enlighter-default enlighter-v-standard enlighter-t-atomic enlighter-l-raw enlighter-hover \">\n<div class=\"enlighter-code\">\n<div class=\"enlighter\">\n<div class=\"\">\n<blockquote>\n<div><em><span class=\"enlighter-text\">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&rsquo;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.&rdquo;<\/span><\/em><\/div>\n<\/blockquote>\n<\/div>\n<\/div>\n<\/div>\n<\/div><h4><b>Uploading PDFs to generate a website<\/b><\/h4><p>Hostinger AI Builder now supports PDF uploads &mdash; you can upload a PDF, and Hostinger AI Builder will use its content to build a website for you.<\/p><p><b>How to use it:<\/b><br>\n1. In the Hostinger AI Builder prompt field, click the <b>Upload file<\/b> button.<br>\n2. Select your PDF (e.g. a business brochure, product catalog, or document with your site&rsquo;s content).<br>\n3. Add a prompt describing what you want Hostinger AI Builder to build based on the file.<br>\n4. Hostinger AI Builder will read the PDF content and generate a website accordingly.<\/p><p><b>Example prompt:<\/b> <i>&ldquo;Use this PDF to create a professional website for my business. Include the services, contact details, and any other relevant information from the document.&rdquo;<\/i><\/p><div class=\"intercom-interblocks-callout\" style=\"background-color: #e3e7fa80;border-color: #334bfa33\">This works alongside the existing image upload feature &mdash; you can still upload sketches, wireframes, or screenshots to guide the design.<\/div><h3 id=\"h-6-ask-the-tool-to-fix-issues\" class=\"wp-block-heading\"><span id=\"6_Ask_the_tool_to_fix_issues\" class=\"ez-toc-section\"><\/span><strong>6. Ask the tool to fix issues<\/strong><\/h3><p>You may occasionally encounter errors when generating web apps. That&rsquo;s why we offer a <strong>30-day money-back guarantee<\/strong>&nbsp;if you decide to change your mind after trying it.<\/p><p>The good news is that Hostinger AI Builder includes a built-in <strong>debugging<\/strong>&nbsp;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.<\/p><p>What you can do is copy the error message and the highlighted code, paste them into the prompt field, and ask Hostinger AI Builder to analyze and correct it, like this:<\/p><div class=\"enlighter-default enlighter-v-standard enlighter-t-atomic enlighter-l-raw enlighter-hover \">\n<div class=\"enlighter-code\">\n<div class=\"enlighter\">\n<div class=\"\">\n<blockquote>\n<div><em><span class=\"enlighter-text\">Hey, I encountered an error in my web app. Can you analyze this code and fix the issue?<\/span><\/em><\/div>\n<\/blockquote>\n<\/div>\n<div class=\"\">\n<blockquote>\n<div><em><span class=\"enlighter-text\">[Insert the affected code lines]<\/span><\/em><\/div>\n<\/blockquote>\n<\/div>\n<\/div>\n<\/div>\n<\/div><p>If additional errors appear, repeat the process &ndash; copy the error, ask the tool to identify and fix it &ndash; until your web app works as expected.<\/p><h3 id=\"h-6-ask-the-tool-to-fix-issues\" class=\"wp-block-heading\"><strong>7. Select and edit specific elements<\/strong><\/h3><p>The &ldquo;Select and edit&rdquo; tool (targeted editing) allows you to request changes to a specific element separately at a time.<\/p><p>First, click the &ldquo;Select and edit button&rdquo;, the arrow below the prompt box:<\/p><h3><img decoding=\"async\" class=\"aligncenter size-full wp-image-9025\" src=\"https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/03\/select-edit.png\" alt=\"Select element in preview dialog with the sparkles button highlighted\" width=\"597\" height=\"212\" data-media-id=\"9025\" srcset=\"https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/03\/select-edit.png 597w, https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/03\/select-edit-300x107.png 300w\" sizes=\"(max-width: 597px) 100vw, 597px\" \/><\/h3><p>Then, click the element you wish to apply changes to:<\/p><p><img decoding=\"async\" class=\"aligncenter size-full wp-image-9028\" src=\"https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/03\/select-element.png\" alt=\"Learn More button highlighted in a design landing page hero section\" width=\"683\" height=\"565\" data-media-id=\"9028\" srcset=\"https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/03\/select-element.png 683w, https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/03\/select-element-300x248.png 300w\" sizes=\"(max-width: 683px) 100vw, 683px\" \/><\/p><p>Finally, describe the changes you want to make by writing a prompt:<\/p><p><img decoding=\"async\" class=\"aligncenter size-full wp-image-9029\" src=\"https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/03\/prompt-change.png\" alt=\"Selected prompt text reads &ldquo;Delete this button&rdquo; in a chat input with a send button and undo option\" width=\"327\" height=\"226\" data-media-id=\"9029\" srcset=\"https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/03\/prompt-change.png 327w, https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/03\/prompt-change-300x207.png 300w\" sizes=\"(max-width: 327px) 100vw, 327px\" \/><\/p><h2 id=\"h-advanced-tips-for-crafting-high-quality-prompts\" class=\"wp-block-heading\"><span id=\"Advanced_tips_for_crafting_high-quality_prompts\" class=\"ez-toc-section\"><\/span><strong>Advanced tips for crafting high-quality prompts<\/strong><\/h2><p>In addition to the basic tips, consider the following advanced techniques when writing prompts for Hostinger AI Builder to further enhance the output quality and accuracy:<\/p><h3 id=\"h-use-steps-in-your-prompt\" class=\"wp-block-heading\"><span id=\"Use_steps_in_your_prompt\" class=\"ez-toc-section\"><\/span><strong>Use steps in your prompt<\/strong><\/h3><p>While we suggest breaking down complex ideas into multiple prompts, you may prefer to keep related tasks in a single prompt.<\/p><p>If that&rsquo;s the case, try formatting your prompt as a step-by-step instruction instead of a paragraph. Using steps helps Hostinger AI Builder follow your instructions in chronological order, resulting in more coherent and consistent results.<\/p><p>Additionally, a structured prompt makes it easier to review and refine as needed.<\/p><p><strong>A good prompt example<\/strong>:<\/p><div class=\"enlighter-default enlighter-v-standard enlighter-t-atomic enlighter-l-raw enlighter-hover \">\n<div class=\"enlighter-code\">\n<div class=\"enlighter\">\n<div class=\"\">\n<blockquote>\n<div><em><span class=\"enlighter-text\">Create a page in my application for logging in and signing up. Here&rsquo;s what you should do:<\/span><\/em><\/div>\n<\/blockquote>\n<\/div>\n<blockquote>\n<div class=\"\">\n<div><\/div>\n<\/div>\n<div class=\"\">\n<div><em><span class=\"enlighter-text\">Make a dedicated page for users to log in or sign up.<\/span><\/em><\/div>\n<\/div>\n<div class=\"\">\n<div><\/div>\n<\/div>\n<div class=\"\">\n<div><em><span class=\"enlighter-text\">Add username, email address, and password forms.<\/span><\/em><\/div>\n<\/div>\n<div class=\"\">\n<div><\/div>\n<\/div>\n<div class=\"\">\n<div><em><span class=\"enlighter-text\">Connect these forms with their corresponding database tables.<\/span><\/em><\/div>\n<\/div>\n<div class=\"\">\n<div><\/div>\n<\/div>\n<div class=\"\">\n<div><em><span class=\"enlighter-text\">Insert an action button to log in or sign up.<\/span><\/em><\/div>\n<\/div>\n<div class=\"\">\n<div><\/div>\n<\/div>\n<div class=\"\">\n<div><em><span class=\"enlighter-text\">Add a hyperlink that switches the user from the login page to the signup page if they don&rsquo;t have an account.<\/span><\/em><\/div>\n<\/div>\n<div class=\"\">\n<div><\/div>\n<\/div>\n<\/blockquote>\n<div class=\"\">\n<blockquote>\n<div><em><span class=\"enlighter-text\">Put an error message if the inputted data is invalid.<\/span><\/em><\/div>\n<\/blockquote>\n<\/div>\n<\/div>\n<\/div>\n<\/div><p><strong>Why?&nbsp;<\/strong>This prompt has a clear flow and separation of topics, describing what Hostinger AI Builder should create in chronological order.<\/p><p><strong>A bad prompt example<\/strong>:<\/p><div class=\"enlighter-default enlighter-v-standard enlighter-t-atomic enlighter-l-raw enlighter-hover \">\n<div class=\"enlighter-code\">\n<div class=\"enlighter\">\n<div class=\"\">\n<blockquote>\n<div><em><span class=\"enlighter-text\">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&rsquo;t have an account. If the inputted data is invalid, add an error.<\/span><\/em><\/div>\n<\/blockquote>\n<\/div>\n<\/div>\n<\/div>\n<\/div><p><strong>Why?&nbsp;<\/strong>This prompt doesn&rsquo;t separate the tasks clearly, making it difficult to follow. Hostinger AI Builder might miss some instructions and give an incomplete output.<\/p><h3 id=\"h-include-technical-terms\" class=\"wp-block-heading\"><span id=\"Include_technical_terms\" class=\"ez-toc-section\"><\/span><strong>Include technical terms<\/strong><\/h3><p>If you are familiar with web development or design, consider including technical terms in your prompt. For example, you can use terms like&nbsp;<strong>flexbox<\/strong>,&nbsp;<strong>lazyloading<\/strong>, and&nbsp;<strong>minimalist design<\/strong>.<\/p><p>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.<\/p><p><strong>Good prompt examples<\/strong>:<\/p><div class=\"enlighter-default enlighter-v-standard enlighter-t-atomic enlighter-l-raw enlighter-hover \">\n<div class=\"enlighter-code\">\n<div class=\"enlighter\">\n<div class=\"\">\n<blockquote>\n<div><em><span class=\"enlighter-text\">Change the overall design of my web application with the flat design utilizing only two-dimensional elements and a monochrome color palette.<\/span><\/em><\/div>\n<\/blockquote>\n<\/div>\n<\/div>\n<\/div>\n<\/div><p><strong>Why?<\/strong> These prompts contain technical terms and a detailed description of what to add to the application. This allows Hostinger AI Builder to understand your requirements more easily.<\/p><p><strong>Bad prompt examples<\/strong>:<\/p><div class=\"enlighter-default enlighter-v-standard enlighter-t-atomic enlighter-l-raw enlighter-hover \">\n<div class=\"enlighter-code\">\n<div class=\"enlighter\">\n<div class=\"\">\n<blockquote>\n<div><em><span class=\"enlighter-text\">Change the design of my web application. I want it to be very simple and basic, both in terms of color and design.<\/span><\/em><\/div>\n<\/blockquote>\n<\/div>\n<\/div>\n<\/div>\n<\/div><div class=\"enlighter-default enlighter-v-standard enlighter-t-atomic enlighter-l-raw enlighter-hover \">\n<div class=\"enlighter-code\">\n<div class=\"enlighter\">\n<div class=\"\">\n<blockquote>\n<div><em><span class=\"enlighter-text\">Make my web application load images only when users view them.<\/span><\/em><\/div>\n<\/blockquote>\n<\/div>\n<\/div>\n<\/div>\n<\/div><p><strong>Why? <\/strong>Hostinger AI Builder&nbsp;might misinterpret these prompts because they are vague. For example,<strong>&nbsp;simple and basic design<\/strong>&nbsp;doesn&rsquo;t always mean a flat design.<\/p><h3><b>Keep learning<\/b><\/h3><p><span style=\"font-weight: 400\">For a full walkthrough of effective prompting techniques, you can check Prompt Engineering Guide: From Beginner to Expert tutorial!<\/span><\/p><p><iframe title=\"Prompt Engineering Guide: From Beginner to Expert\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/riO3e-FBieA?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p><h2 id=\"h-managing-credits-and-avoiding-message-limits\" class=\"wp-block-heading\"><span id=\"Managing_credits_and_avoiding_message_limits\" class=\"ez-toc-section\"><\/span><strong>Managing credits and avoiding message limits<\/strong><\/h2><p>Like other&nbsp;<a href=\"https:\/\/www.hostinger.com\/tutorials\/best-ai-tools-for-web-app-development\/\" rel=\"follow\" data-wpel-link=\"internal\">web development AI tools<\/a>, Hostinger AI Builder has a specific credits limit, making it important to manage your credit efficiently.<\/p><p>One&nbsp;<a href=\"https:\/\/www.hostinger.com\/support\/mistakes-to-avoid-when-making-a-web-app-with-hostinger-ai-builder-agentic-mode\/\" rel=\"follow\" data-wpel-link=\"internal\">common mistake when using Hostinger AI Builder<\/a>&nbsp;is spending too many credits on building the web application. You should ideally reserve some for tasks like integrating external services and troubleshooting.<\/p><p>While the credits limit resets monthly, and you can upgrade to a higher plan to get more credits, managing your credits properly makes your development more efficient.<\/p><p>Here are Hostinger AI Builder agentic mode prompting strategies that help you get the best use of your credits efficiently:<\/p><ul class=\"wp-block-list\">\n<li>Write a detailed and clear prompt to avoid repeating basic points in the later stage of your development.<\/li>\n<li>Double-check your prompt before submitting it so that you won&rsquo;t waste your credits for completing the initial instruction.<\/li>\n<li>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.<\/li>\n<li>Each time you iterate the output, follow the initial prompt structure: describe the goal of the follow-up input, the specifications, and your expectations.<\/li>\n<li>Structure your prompt so you consistently provide effective input.<\/li>\n<\/ul><p>Note that regardless of how efficient your prompts are, your web application&rsquo;s complexity remains the biggest factor determining the number of credits you will use.<\/p><h2 id=\"h-faq-on-prompting-in-hostinger-horizons\" class=\"wp-block-heading\"><span id=\"FAQ_on_Prompting_in_Hostinger_Horizons\" class=\"ez-toc-section\"><\/span><strong>FAQ on Prompting in Hostinger AI Builder agentic mode<\/strong><\/h2><div class=\"schema-faq wp-block-yoast-faq-block\">\n<div id=\"faq-question-1740576239408\" class=\"schema-faq-section\">\n<h3 class=\"schema-faq-question\"><span id=\"What_type_of_web_apps_can_I_build\" class=\"ez-toc-section\"><\/span><strong>What type of web apps can I build?<\/strong><\/h3>\n<p class=\"schema-faq-answer\">Hostinger AI Builder lets you build almost any type of application, from an online checkers game that connects random players to a <a href=\"https:\/\/www.hostinger.com\/tutorials\/create-time-tracking-web-app\/\" rel=\"follow\" data-wpel-link=\"internal\">complex time-tracking platform<\/a>&nbsp;that logs work hours. However, you can&rsquo;t build enterprise-level applications, such as a finance or payroll tool, due to AI limitations.<\/p>\n<\/div>\n<div id=\"faq-question-1740576243499\" class=\"schema-faq-section\">\n<h3 class=\"schema-faq-question\"><span id=\"How_detailed_should_my_prompts_be\" class=\"ez-toc-section\"><\/span><strong>How detailed should my prompts be?<\/strong><\/h3>\n<p class=\"schema-faq-answer\">The more detailed your prompts, the better output Hostinger AI Builder will give. Ideally, you should clearly explain the task, your desired outcome, context, and application requirements. It&rsquo;s better to start with a broader prompt encompassing the basic areas of your project and refine the details step by step.<\/p>\n<\/div>\n<div id=\"faq-question-1740576249115\" class=\"schema-faq-section\">\n<h3 class=\"schema-faq-question\"><span id=\"What_should_I_do_if_the_output_isnt_what_I_expected\" class=\"ez-toc-section\"><\/span><strong>What should I do if the output isn&rsquo;t what I expected?<\/strong><\/h3>\n<p class=\"schema-faq-answer\">It&rsquo;s normal for an AI tool to give a subpar initial output. In this case, give follow-up prompts to refine the result so it will be more aligned with your expectations. Refine one aspect of your application at a time until you get the desired outcome, then<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Write clear, effective prompts to build your web app in Hostinger AI Builder agentic mode.<\/p>\n","protected":false},"author":594,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"include_on_kodee":true,"footnotes":""},"categories":[293],"tags":[],"class_list":["post-6773","post","type-post","status-publish","format-standard","hentry","category-ai-builder"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/support\/prompting-hostinger-horizons-build-your-web-app-effectively","default":1}],"include_on_kodee":true,"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/6773","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/users\/594"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/comments?post=6773"}],"version-history":[{"count":13,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/6773\/revisions"}],"predecessor-version":[{"id":16118,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/6773\/revisions\/16118"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/media?parent=6773"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/categories?post=6773"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/tags?post=6773"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}