Make an AI-generated website look genuinely designed
Use a visual thesis, rules, and deliberate exceptions to escape template sameness.
Start with a subject-specific visual thesis
Choose one visual idea that could belong only to this subject. The thesis should influence layout, typography, image treatment, labels, and interaction without becoming a costume.
For Sites.how, browser chrome, URLs, page grids, instructions, and publishing states form one coherent language.
A legal guide might use annotated clauses, margin notes, and precise document rhythm rather than generic justice imagery.
Choosing ‘modern, clean, professional’ as the entire direction. Those are quality requirements, not a visual idea.
Define rules before components
Set type roles, spacing intervals, line weights, one accent, content width, and image logic. Then build components from those rules.
Repeated rules create recognition. A logo is more ownable when the rest of the interface also has a point of view.
Editorial serif for arguments; condensed sans for navigation; mono for URLs and states; square corners; one-pixel rules; green reserved for progress and action.
Designing every section as a rounded card with its own arbitrary padding and gradient.
Use content to create rhythm
Vary density according to meaning. A decision needs comparison. A process needs sequence. A claim needs nearby evidence. A long explanation needs a readable column and navigation.
Section variety should come from content structure, not random decoration.
Show a builder comparison as aligned rows, a prompt as an instruction sheet, and a guide as a marginally annotated article.
Alternating white and tinted card grids regardless of the information being communicated.
Review the awkward cases
Beautiful demo content hides weak systems. Test long names, missing images, one result, zero results, validation errors, narrow phones, zoom, keyboard focus, and reduced motion.
A design system becomes credible when it handles imperfect content without falling apart.
A 74-character article title wraps without colliding with metadata; a filter with zero matches explains how to recover.
Reviewing only a 1440px homepage screenshot.