FREE RESOURCE · FROM THE DESIGN REEL

AI website design brief and review checklist

By Hammad Yousuf · 20 October 2026

A useful AI website design brief defines the audience, offer, primary action and visual system. Copy this example, replace the fictional business details, then review the result on mobile before you deploy.

Get the design kit

Includes the brief, review checklist, before-and-after HTML pages, local fonts and font licences. No sign-up required.

Download the design kit

Unzip it and open demo/before.html and demo/after.html in your browser.

Download the plain-text brief

Compare the sample pages

Northline is a fictional brand strategy and website design studio. Both samples describe the same business; the redesign makes the consultation goal, offer and visual direction clearer.

Before: generic directionOpen the interactive sample in a new tab After: a detailed briefOpen the interactive sample in a new tab

This is a design demonstration, not a conversion experiment or client result. The sample consultation button scrolls to a disclosure section; it does not create bookings. Measure real behavior separately after a reviewed deployment.

How to use the brief

Choose one action. Define the audience, offer and primary action before changing the layout.
Write a visual brief. Specify typography, palette, spacing and imagery. Preserve accurate information and working links.
Review the result. Test mobile widths, keyboard controls and text contrast. Connect and test the real booking destination before launch.

Use an AI coding assistant you already have access to. Availability and costs depend on your provider.

Copy the AI website design brief

Replace Northline, its audience and its design direction with your own details.

Design brief

Redesign my existing landing page using the following brief. Preserve accurate business information and working links. Do not invent testimonials, client logos, statistics, prices or guarantees.

Business: Northline, a fictional brand strategy and website design studio.
Audience: independent consultants who need to explain their offer clearly.
Primary action: book a consultation. Give this action visual priority over secondary navigation.
Headline direction: a clear brand and a stronger first impression. Explain the actual service and audience in the supporting sentence.
Visual direction: calm editorial layout, forest green (#163D31), warm cream (#F2EFE7), muted sage (#B5C596) as decoration. Use no more than two font families: Source Serif 4 for display text and Inter for readable supporting text. Include the font licences with downloadable files.
Spacing: use a repeatable 8 / 16 / 24 / 40 px scale as the starting point, adjusting only when the layout needs it. Keep the primary button separated from surrounding text.
Imagery: original CSS abstract shapes, no borrowed logos or invented social proof.
Layout: readable hierarchy, responsive navigation and a visible primary action. Test 320, 375, 390, 768 and 1280 CSS-pixel widths. No unintended horizontal overflow.
Accessibility: semantic headings, descriptive links, visible keyboard focus, sufficient text contrast and usable controls. Check normal text at 4.5:1 and large text at 3:1. Do not claim WCAG compliance from a single contrast check.
Delivery: provide the changed files, explain what changed, list checks actually performed, and identify any remaining limitations. Keep this as a local preview until I approve deployment.

Review before publishing

Review checklist

[ ] One clear primary action; correct destination.
[ ] The offer says what the business does and for whom.
[ ] Typography, spacing and palette are consistent.
[ ] Text remains readable on mobile and when zoomed.
[ ] No sideways scroll at the tested widths.
[ ] Links and controls work with a keyboard; focus is visible.
[ ] Text/background contrast checked, including the button.
[ ] Images have useful alternative text, or are marked decorative.
[ ] No fabricated proof, fake customers or unverified outcome claims.
[ ] A real booking form is connected and tested before launch.

Accessibility references

Check normal text at 4.5:1 and large text at 3:1. A contrast check alone does not establish WCAG compliance. Check reflow at narrow widths as well as actual keyboard navigation.

Common questions

Does a better design guarantee more bookings?

No. This example demonstrates design changes. Test actual user behavior and business outcomes separately.

Can I use the sample as my real website?

Use it as a starting point. Replace the fictional content, connect real destinations, retain the font licences and complete your own accessibility and functional checks.

The accompanying reel uses an AI presenter. Follow @with.hammad for practical AI builds.