AI website design comes out generic for a simple reason: the brief you gave the AI coding assistant was generic. Change the design brief, not just the colours, and the same business gets a page with one clear goal, a specific offer, a consistent visual system and a layout that holds up on a phone. The reel below shows that with a fictional brand strategy and website design studio called Northline, before and after. It is a design demonstration, not a conversion test, and the full brief plus the review checklist are free on the resource page. The presenter in the reel is an AI avatar of Hammad; the words and facts are his.
Why AI website design looks generic
An AI coding assistant will happily produce a landing page from a one-line request, and the result usually has a vague headline, three equal buttons, borrowed-looking logos and a colour scheme nobody chose. None of that is the model being bad at design. It is the model filling gaps you left open. A brief that names the audience, the offer, the one action you want, the type, the spacing and the palette removes those gaps, and the page stops looking like every other AI website. That is the whole idea behind the reel: same sample business, different brief, different direction.
Step 1: give the landing page one primary action
For Northline the primary action is book a consultation, and the brief tells the assistant to give that action visual priority over secondary navigation and to keep the main button separated from the surrounding text. The audience is written down too: independent consultants who need to explain their offer clearly. One goal per page is the first line of my review checklist for a reason. If a visitor cannot tell what you want them to do, no amount of styling fixes it. In the demo the consultation button scrolls to a disclosure section; it does not create bookings, and the checklist asks you to connect and test a real booking form before launch.
Step 2: define the type, spacing and colour palette
The brief sets a calm editorial layout with forest green (#163D31), warm cream (#F2EFE7) and muted sage (#B5C596) as decoration. It allows no more than two font families, Source Serif 4 for display text and Inter for supporting text, and asks for the font licences to ship with the downloadable files. Spacing starts from a repeatable 8 / 16 / 24 / 40 px scale, adjusted only when the layout needs it. Imagery is original CSS abstract shapes, with no borrowed logos and no invented social proof. Once these are fixed, every section the assistant builds feels like part of the same site instead of a collage.
Step 3: replace vague headlines with a specific offer
ONE TACTIC A WEEK
The headline direction in the brief is a clear brand and a stronger first impression, with the supporting sentence explaining the actual service and who it is for. The brief also tells the assistant to preserve accurate business information and working links, and never to invent testimonials, client logos, statistics, prices or guarantees. That last line matters more with AI than with a human designer, because a model will fill an empty testimonial slot with a plausible quote if you let it. The checklist repeats the rule: no fabricated proof, fake customers or unverified outcome claims.
Step 4: check the mobile layout and text contrast
The brief asks for tests at 320, 375, 390, 768 and 1280 CSS-pixel widths with no unintended horizontal overflow, semantic headings, descriptive links, visible keyboard focus and usable controls. For contrast, normal text is checked at 4.5:1 and large text at 3:1, which are the WCAG 2.2 minimum contrast thresholds on the W3C page I link in the sources. The brief is explicit that a single contrast check does not make a page WCAG compliant, and the resource page says the same: it is a contrast and reflow check, not a full accessibility audit. Images need useful alternative text or a decorative mark, and links and controls must work with a keyboard.
What the before and after does not prove
The updated Northline design is not evidence of more sales. Both pages are deliberately illustrative, the business is fictional, and nothing in the demo was measured against real visitors. The brief ends with a delivery rule I recommend keeping: the assistant provides the changed files, explains what changed, lists the checks it actually performed, names any remaining limitations, and keeps everything as a local preview until you approve deployment. Measure actual behaviour separately after a reviewed launch. A redesign alone does not prove higher conversions, and the reel says so on screen.
Get the AI website design brief and checklist
The free resource at withhammad.com/resources/ai-website-design-brief has the full prompt to paste into your AI coding assistant, the ten-point review checklist, both Northline demo pages as HTML, the fonts and their licences, all in one design kit with no sign-up. On Instagram, comment DESIGN on the reel and the link arrives by DM (follow @withhammad.ai first so the DM reaches you).
Related reading
If this is useful, see the AI motion graphics starter kit and how to reverse-engineer features with Claude Code.