About 63% of web traffic now comes from mobile, 60% of designers use a mobile-first approach, and 73.1% of visitors leave a site that does not adjust to their device. The pressure on design quality is higher than the pressure on creation speed, which is why the AI design step that gets attention is rarely the one that produces the strongest output. The first generation is fast. The second pass, where the design becomes specific to the brand and useful to the buyer, is where AI tools earn their place.
This article covers what the design brief should contain, the decisions AI handles well, and the design judgment calls that still belong to a person.
Defining the Visual Goals Before Generation
A useful design brief tells the AI what role the site has to perform alongside what it has to look like. A site that captures qualified leads needs different visual emphasis than a site that displays a portfolio.
The brief should answer four questions in writing before the prompt is sent. What action does the buyer take on the homepage? What three words would the operator use to describe the brand’s tone (precise, warm, technical, traditional, modern)? What are two reference sites the operator considers well-designed? What feeling should the buyer leave the site with? Specific answers produce specific output.
Operators who skip the brief end up rejecting the AI’s first attempt and asking for “something different” without being able to say what. The AI has no read on subjective taste. It needs vocabulary it can act on.
Color Palette and Contrast Decisions
AI tools now choose color combinations that pass technical accessibility checks by default. The work that remains is brand alignment and emotional accuracy.
A useful pattern is the four-color brief. One primary color tied to the brand, one secondary that supports calls to action, one neutral background, and one accent for highlights. Beyond that, the palette starts to feel decorative.
Contrast is the area where AI most often falls short. WCAG 2.1 sets the minimum at 4.5:1 for normal text against its background. Mozilla’s developer documentation explains the color contrast calculations and the 3:1 floor for large text. Generated sites occasionally place light gray text on white because it looks elegant in mockups. The fix is the contrast checker, applied after the visual judgment.
Typography for the Generated Output
Most AI builders default to two safe fonts, a sans-serif for body and a contrasting display face for headings. The defaults are competent and rarely distinctive.
The sharper move is a single variable font set across the whole site. Smashing Magazine’s coverage of variable font technology shows how a single file can support weight, width, and slant variations, cutting font payload from around 150 KB per face to one shared file with all variations stored as deltas. Performance improves and visual coherence improves with it.
Typography size and rhythm matter more than font choice. A useful starting point is 18px body text with 1.5 line-height and a 1.25 type scale that climbs from body to H3 to H2 to H1. Most AI defaults use smaller body text at 14 to 16 px, which costs older readers comfort they should not have to give up.
AI-Assisted Design Platforms
Operators choosing an AI powered website builder have to weigh how much manual control the platform leaves on the table. Some platforms let the operator regenerate sections, override colors, and edit copy directly. Others lock the design after the first pass and require a redo to change major elements.
The platforms that produce the best designs treat AI output as a starting point and leave full editing control with the operator. Locked-in templates dressed up with AI naming conventions produce visually similar sites.
Layout and Visual Hierarchy
AI builders tend to apply familiar layout patterns that work because users already know how to scan them. The Nielsen Norman Group’s F-pattern eye-tracking research found that users read web content in horizontal sweeps along the top of the page and then a vertical scan down the left side. The pattern holds across content types and across more than a decade of follow-up studies.
A site designed against this scanning behavior loses visitors. AI builders generally respect the F-pattern by default but sometimes push the most important content into the lower right of the viewport, where attention drops. Move calls to action and primary headlines into the F’s natural reading paths.
Visual hierarchy works through size, color, and typography weight. Research from the Sessions College design program quantifies the contribution. Size accounts for around 45% of attention, color 30%, and typography weight 25%. AI tools tend to under-use size differentiation, producing sections where every element feels close to the same weight.
Responsive Behavior Across Devices
Mobile users represent 62% to 63% of web traffic, and most AI generators produce mobile layouts as part of the first pass. The fact that the layout exists does not mean it works.
Common failure modes on AI-generated mobile views include navigation menus that hide essential links behind a hamburger that takes up the whole header, hero images that crop awkwardly on portrait screens, forms with input fields too small for thumb taps, and text that overflows containers because the AI did not anticipate the longer string the operator inserted afterward.
The fix is the same as for desktop. View the generated mobile site on actual phones rather than the desktop preview, and on at least 3 screen sizes (small Android, current iPhone, current iPad). The differences between preview and reality are often small but always present.
Design System Discipline for Consistency
A site that looks designed end-to-end follows a small set of rules across every page. The same heading sizes. The same button styles. The same spacing scale. AI builders generate consistency on the first pass but lose it during edits, especially when the operator adds new sections by prompt rather than by component.
Mature in-house design systems like the Atlassian Design System handle this through documented components and tokens for color, type, and spacing. A small business site does not need that level of formality, but it benefits from a one-page reference the operator updates as decisions accrue. Without it, the third edited page will not match the first.
The Operator’s Remaining Decisions
A few design judgment calls the AI cannot make on its own. The brand’s actual personality, in plain words. The specific buyer the site is for, including the level of comfort that buyer has with the product category. The pricing tier the site has to communicate visually, from premium to accessible to somewhere in the middle. The story the operator wants the site to tell about why this business exists.
These are prompts the operator writes. The AI executes them. A site that feels distinctive comes from an operator who fed the system distinctive instructions and rejected the output that pulled toward the average.
There is no perfect website to design. A site that does its job well, on the device the buyer is holding, with copy the buyer recognizes and a layout that respects the buyer’s attention, is the realistic target the AI workflow can deliver. The operator’s job is to act as the AI’s client, with the kind of explicit direction it can execute on.
Article received via Mail
