How to Design a Website with AI: Inside Roar’s Process

To design a website with AI, start with the audience, the action visitors should take, and a clear visual direction. Use AI to produce working layouts and assets, then review the results with real content on desktop and mobile. Refine the typography, navigation, imagery, and interactions before approving the implementation.

At Roar Creative, we don’t ask AI to “build a website” and consider the job finished. We work through the design: setting a direction, reviewing layouts, adjusting typography, comparing interactions, and refining details until they fit.

AI helps us do much of the hands-on production work faster—work we previously carried out manually. That shorter path from an idea to a working version lets us explore alternatives and respond to feedback more quickly.

The tool does not replace experience or taste. Someone still needs to recognize when a composition feels unbalanced, when an animation distracts, or when a technically correct interface is difficult to use. Knowing what to ask for, what to keep, and what to change remains our responsibility.

The examples below come from our project working notes. We have kept the projects anonymous and focus on design decisions rather than claims about commercial results.

1. Give AI a design brief it can act on

“Make this website better” leaves too much unresolved. Begin with the audience, the main visitor task, the content available, and the visual constraints. Then break the work into decisions you can evaluate in a browser.

A useful instruction identifies a concrete change: align the text to the top of a two-column layout, simplify an overcrowded footer, or make the next testimonial partially visible so visitors understand that the section scrolls.

For example, a practical brief for a testimonial section might read: “Create a manually controlled horizontal slider. Show part of the next card, keep reviewer names consistently positioned, support touch and keyboard navigation, and avoid autoplay.” This is an illustrative brief based on our workflow, not a promise that one prompt produces a finished component.

Each instruction creates a review question. Did the alignment improve the composition? Can visitors find the secondary pages? Does the slider communicate how to use it?

2. Build a working version with real content

In one project, a grid of reviews needed a different rhythm. We changed it into a horizontal slider, with part of the next card visible at the edge.

The design combined large quotation marks, a restrained accent border, and consistent placement of the reviewer’s name. On smaller screens, the layout showed fewer cards while preserving the same interaction.

The first implementation still needed refinement. Different review lengths created uneven proportions, so we adjusted the card layout and typography. That problem only became clear when the actual reviews were in the design.

We specified no autoplay, no continuous loop, clear previous and next controls, and a position counter. The underlying track used native scrolling, with buttons added as an enhancement.

AI helped implement those choices. Reviewing the content revealed which choices needed another pass. For sliders, visual treatment and interaction need to be considered together; the W3C’s carousel guidance addresses structure, controls, and accessibility considerations.

3. Generate custom assets within a visual system

Another project needed icons that belonged to its visual identity. We used AI image generation to explore a coordinated set with purple strokes and restrained gold accents. We worked from a shared visual direction rather than choosing unrelated graphics for each service.

We compared two generated variations, selected the more consistent treatment, and prepared individual vector assets for services and navigation.

Generation was one stage of the work. The icons still needed selection, preparation, and review in context. An icon that looks attractive on a presentation sheet may become unclear beside a small navigation label. The useful test is whether the family remains recognizable and consistent at the sizes where visitors encounter it.

4. Refine the composition across screen sizes

On a speaker website, a photo section felt uneven because the images had different proportions. We rebuilt it around one large image beside two smaller companion images. The layout controlled the crop, with attention to the focal point so important parts of the photographs stayed visible.

On mobile, the composition changed: the main image occupied the full width, with the smaller pair beneath it.

The review also led to a broader rule: text in two-column sections should align at the top. Applying that rule across related sections made the page language more consistent. AI helped carry the decision through the implementation; the photographs and browser preview determined whether it worked.

5. Compare motion in the browser

Motion is difficult to approve from a static mockup. On a bakery website, a parallax effect looked uneven during scrolling. We prepared three implementations for comparison: the existing JavaScript approach, a CSS alternative, and a version with other scroll effects removed.

That comparison helped separate the moving image from other animation happening on the page. The review then led to a subtle entrance treatment for the hero image. We also discussed its tradeoff: delaying the image’s appearance changes how quickly the main visual becomes visible.

A transition can feel more polished while introducing a cost elsewhere. Motion also needs an alternative for visitors who prefer less animation. The browser’s reduced-motion preference provides a way to adapt the experience, as explained in Google’s guidance on reduced motion.

Our PageSpeed guide explains how to investigate performance separately from visual preference.

6. Review the visitor journey, not just the appearance

Simplifying a footer can create another problem if useful links disappear. In one project, we removed a crowded footer navigation and reorganized secondary destinations into header submenus. The footer retained business information and social links.

Desktop used dropdown panels; mobile used expandable sections inside the menu. The implementation included keyboard behavior, visible focus, and a way to close the menu with Escape.

The decision was about hierarchy: which information belongs together, where people expect to find it, and how much should be visible at once.

Our project notes include repeated desktop and mobile checks, build checks, and targeted interaction testing. These answer different questions. A successful build does not tell us whether a photo crop feels right. A screenshot does not tell us whether a menu works with a keyboard.

We use implementation checks and visual review, then keep decisions in project documentation so later changes can follow the same rules. These checks are part of quality review, not a claim of complete accessibility conformance.

Frequently asked questions

How do you start designing a website with AI?

Define who the website serves, what visitors need to do, and the content and visual constraints. Start with one section or interaction, inspect a working version, and refine it before extending the approach across the site.

Can AI design a website from one prompt?

A tool may produce a first version from a short prompt. Our process continues with content, responsive layout, interaction, and visual review. We do not treat the first generated version as finished work.

Does AI replace a web designer’s experience or taste?

In our workflow, AI supports production and exploration. We set the direction and decide whether the output is appropriate. Recognizing weak hierarchy, inconsistent imagery, or distracting motion still requires judgment.

Do AI-designed websites have to look generic?

No. A specific visual direction, custom assets, and deliberate refinement can support a distinctive result. The tool alone does not establish the identity; the decisions about typography, composition, navigation, and motion do.

Is this the same as using an AI website builder?

This article describes our design and implementation process, rather than a particular platform. If you are choosing between a builder and a custom project, our AI website builder versus custom web design guide covers that separate decision.

Does using AI guarantee faster delivery or better results?

There is no fixed outcome from using a tool. AI helps us execute and iterate more quickly, but scope, content, integrations, and review requirements still matter. These examples do not establish a universal saving or performance guarantee.

Bring us the detail that isn’t working

Sometimes the starting point is a full website brief. Sometimes it is a section that feels crowded, a mobile menu that is awkward, or an animation that never quite feels right.

We turn that observation into something concrete, build a version you can use, and refine it with you. Explore our work or tell us about your project.