Building and Deploying a Website with AI: A 4-Step Hands-On Guide with Full Prompts

Using AI to generate a website is easy, but generating a website that is actually usable and trustworthy is another matter. Mohamad H. (a practitioner who makes a living from custom web design) shares his complete workflow: instead of asking AI to "build me a website" directly, he follows the order of goal → strategy → copy → design, feeding AI the information a website actually needs.

The key premise of this workflow is simple: the quality of AI output depends on the quality of your input. A vague prompt only gets you a vague, cookie-cutter template, while feeding structured information step by step produces designs that are not only decent but also "intentional" and credible.

Step 1: First, Figure Out the Website's Goal

Before starting, answer one question: why do you need this website?

• Mainly to build trust?
• To introduce or test a new service/product?
• Is it part of a marketing channel, such as ads, social media, SEO, or Google Maps?

Different goals mean completely different website strategies. A page a user lands on from an ad and a page a user finds after first checking you out on Google Maps carry entirely different tasks.

The author summarizes website strategy as a formula: primary goal + how users find the website + what you know about customers + business details.

When serving clients, he normally asks a long list of questions to gather this information. When doing it yourself, you can use AI to help clarify these questions. This "business and website assessment" checklist covers four parts:

• Business: What do you do? Who is your ideal customer? What problem do you solve? Why do customers choose you?
• Website: What is the primary goal? What action do you want visitors to take? Which channel will people come from to find the website?
• Customer journey: How do customers currently discover you, become customers, and work with you? Which parts of this process can be simplified through the website?
• Existing assets: What existing logos, photos, reviews, case studies, videos, and brand guidelines do you have? Are there any websites or designs you like?

Just jot down the answers roughly—no need to write a formal document.

Step 2: Generate Website Strategy from Your Answers

Attach your answers after the prompt and have AI act as a professional website strategist, providing website strategy and structure recommendations based on business goals, audience, services, customer journey, and traffic sources.

The author's prompt requires AI to output two things for each section at the same time: content (what this section should convey) and purpose (why this section exists and what it should achieve). It also explicitly requires: keep only sections with a clear purpose, and do not use a generic website structure.

There is one easily overlooked detail here—deliberately asking "why". This is not a decorative requirement. If AI cannot clearly explain why a section exists, then that section probably does not need to exist and should be cut directly. Sections added just to fill space are one of the fastest ways to make a website look generic.

Once you have this structure recommendation with reasons, you can make your own adjustments based on purpose rather than blindly accepting AI's arrangement.

Website strategy and website structure are two levels that are easy to confuse. Strategy answers "what this website should achieve, who it serves, where visitors come from, and what you want them to do," which is a business-level judgment; structure is the concrete form strategy takes, meaning which sections the page is divided into, in what order, and what task each section carries. The two are causal rather than parallel: in the same industry, if the traffic source changes from SEO organic search to paid ads, the assumption in the strategy about "visitor intent" is completely different, and the structure derived from it should also change—ad landing pages usually need an extremely short decision path and a strong single call to action, while search visitors are often in an information-comparison stage and need more explanatory sections.

This is also why the author asks AI to output both "content" and "purpose" for each section: a block structure itself is meaningless. Only when each block corresponds to a specific task in the strategy does the whole site form a logical closed loop. Sections lacking purpose support, no matter how beautifully designed, are just noise diluting attention.

Step 3: Write the Copy First, Then Talk About Design

After strategy and structure are determined, it is time for the copy. The author's approach is to first create a document and write content drafts and key points section by section according to the website structure, essentially gathering the "raw materials" AI needs to write formal copy.

The inputs covered include: general information (business name, domain, contact information, booking link, social accounts), the Hero section (how to explain what you do, for whom, and the core result), who it is for, the problem, the solution, how it works, results/deliverables/pricing, customer reviews, FAQ, qualification screening/contact form, as well as design direction (brand assets, colors, fonts, websites you like) and other notes.

Writing copy with the StoryBrand framework

For the copy itself, the author uses the StoryBrand framework—a marketing framework that places the customer in the role of the hero and the business in the role of the guide. It makes it easy for visitors to understand what you do, whom you do it for, and how it works.

The simplified version fed to AI includes: character (who the customer is and what they want), problem (external/internal/philosophical dilemma), guide (how the business expresses empathy and demonstrates competence), plan (the simple steps the customer needs to take), call to action, success picture, failure picture, and a one-sentence summary: problem → solution → result.

The StoryBrand framework was proposed by marketing expert Donald Miller in the book Building a StoryBrand. Its core insight is: when customers feel confused, they do not buy. The mistake most businesses make is casting themselves as the protagonist of the story, while StoryBrand requires placing the customer in the hero's position and having the business step back into the role of Guide—like Yoda in Star Wars rather than Luke.

The framework organizes information with a seven-element narrative template: character (what the customer wants), problem (the external, internal, and philosophical dilemmas they face), guide (the business earning trust through empathy and competence), plan (a clear three-to-four-step path of action), call to action (directly asking for conversion), success picture (depicting the ideal outcome), and failure picture (pointing out the consequences of not changing). This structure is especially effective for AI website building because it translates vague marketing intent into a narrative skeleton that can be reliably executed by the model, preventing the copy from falling into self-congratulatory feature listing.

That one instruction you cannot delete

In the formal copy prompt, there is one instruction the author repeatedly emphasizes: do not fabricate facts, data, reviews, credentials, or claims; use neutral wording where information is missing.

The reason is straightforward: AI loves to invent customer reviews, numbers, and qualifications just to make the page "look complete." A false claim harms a website far more than an empty section. This instruction must be kept, and every time you must check the output for content you never provided.

The tendency of large language models to produce hallucinations is one of the most realistic risks in AI website building. The model is essentially predicting the next most likely word. When a prompt asks it to fill a customer review section without providing real content, it will naturally fabricate names, job titles, and praise to ensure the output "looks complete and coherent"; likewise, numbers, qualifications, awards, and certifications may all be generated out of thin air. This kind of fabricated content is almost imperceptible during testing, but once launched it constitutes false advertising, may bring legal risk under regulatory frameworks such as advertising law and consumer protection law, and can instantly destroy the trust the website was supposed to build once the client notices.

Therefore, the author's insistence on the "do not fabricate facts" instruction is essentially drawing a factual boundary for the model: all missing information is handled with neutral placeholder wording, such as "insert your customer review here." At the same time, this instruction is not a one-time fix—after each generation, a human still needs to compare item by item to confirm that every data point and every endorsement appearing on the page comes from materials you yourself provided.

Step 4: Design Comes Last

At this point, all materials are ready, and you can move into the final build. The author uses Sonnet 5 and completed generation with just one prompt.

Four things need to be attached:

1. The final website copy
2. Brand assets (fonts, color values, etc.)
3. Several websites you like as design inspiration references
4. The final website structure

The core prompt requires AI to use these materials as the only source of truth, build the website around the established strategy and copy, reference the design inspiration but not copy it directly, make the result "exclusive to this business" rather than a generic AI template, and not add sections just to fill space.

The author reminds us that the AI-generated design is not the final product but a low-cost starting point—it already has the right structure, the right copy, and a clear direction, which is far better than facing a blank page.

The Real Value of This Workflow

Looking back at the whole process, the order itself is the methodology: goal → strategy → copy → design.

Most people fail at AI website building not because the model is not strong enough, but because they skip the first three steps, throw "help me build a website" at AI, and then get a template anyone could use. When you provide information in order, you are in fact giving AI the same materials a good web designer would ask a client for.

The author also emphasizes that these resources do not need to be used exactly as-is; they are just a starting point in his own process and can be adjusted according to business needs.

Key Takeaways

• Set the goal before starting: the website's purpose and traffic source determine completely different strategies; ad landing pages and Google Maps conversion pages have different tasks.
• Ask "why" for every section: parts AI cannot clearly explain the purpose of should be deleted; filler sections are the root cause of a website becoming mediocre.
• Copy before design: use the StoryBrand framework to treat the customer as the hero and the business as the guide, producing complete copy before entering the design stage.
• Strictly prevent AI fabrication: explicitly require it not to invent reviews, data, or qualifications, and check the output item by item.
• AI design is a starting point, not the endpoint: a design built with copy, structure, branding, and references has direction and intent, but it still ultimately needs human adjustment.

One-line Summary

Feed AI in the order of goal → strategy → copy → design to generate a credible, usable website.

Paragraph Summary

This article shares a custom web designer's complete workflow for building websites with AI. The core idea is that the quality of AI output depends on the quality of input, and vague prompts only produce cookie-cutter templates. The author advocates progressing in the order of goal → strategy → copy → design: first clarify the website's goal and traffic sources, then use a structured checklist to collect business information and have AI act as strategist, requiring it to explain the "content" and "purpose" of each section and deleting any section whose purpose cannot be clearly explained; in the copy stage, use the StoryBrand framework to place the customer in the hero's position and strictly instruct AI not to fabricate reviews, data, or qualifications; only then move into design, attaching four materials: copy, brand assets, reference websites, and structure. The author emphasizes that AI output is only a low-cost starting point, not a finished product, and the real differentiator is the order itself.