# Fix a generic AI website > Make an AI-generated website feel specific to your product. Fix the content, hierarchy, visual references and review process with a practical design brief. Canonical page: https://sitepeel.dev/guides/fix-generic-ai-website-design/ Start by replacing vague direction with a clear user task, real content and a few visible design decisions. A longer prompt alone will not fix an unclear brief. ## Find the decision the page is avoiding A page can have tidy spacing and still communicate very little. Look at its first screen: can a visitor name the product, understand who it helps and find the next action? If the headline could belong to almost any business, another gradient or illustration is unlikely to solve the problem. Write down one concrete task. For an appointment service, it might be checking availability. For a browser tool, it might be inspecting an element. Put the information needed for that task near its action. Let the rest of the page answer the questions that naturally follow. This gives the layout a reason to take a particular shape. ## Give each reference a specific job Collect two or three references and explain what you want from each. One might demonstrate a readable type hierarchy; another might show a useful comparison layout. A third might demonstrate the way a product explains its output. Asking for the entire style of three unrelated sites often creates an incoherent mixture. Use Sitepeel to inspect the relevant type, colors and spacing, then review the resulting design reference. Include a screenshot so the relationships remain visible. Distinguish measured values from choices you are making for your own product. The goal is to communicate a small set of decisions that work together, not to inherit every detail of another brand. - Name the part of each reference that matters. - Supply the actual headline, body copy and button labels. - Choose a small type hierarchy and a clear role for each color. - Explain what should happen after the primary action. ## Write a brief with something to verify Words such as premium, beautiful and modern leave many decisions open. Replace them with observable requirements: show the product before a testimonial, place the action after the explanation, or use a narrow text column for the article body. Keep subjective direction, but pair it with something a reviewer can inspect. The example below is a starting point for revising one section. Replace the placeholders with your project details. It deliberately asks for a small result, so you can review the direction before the same choices spread through the whole website. Example: design-revision-brief.md ``` # Revise one section User: [who is visiting] Task: [what they need to do] Content: [approved heading, explanation and action] Reference: [file and the specific detail to study] Read DESIGN.md and inspect the existing components first. Use the project type scale, spacing and color roles. Show one clear primary action beside its explanation. Keep the supplied wording; do not invent social proof. Make the layout work with longer text and on a narrow screen. Render the section. Explain any departure from the reference. Stop for a visual review before applying the direction elsewhere. ``` ## Review one real screen before generating more Compare the rendered result with the intended task and reference at the same viewport width. Fix the largest structural difference first. A headline that spans the wrong number of lines can change the entire first screen; polishing a small icon before resolving that is unlikely to help. Give a precise correction: reduce the text column, move the preview next to its explanation, or make the secondary action quieter. Change one related group of decisions at a time. Once the section works, record the approved choices in the design reference and reuse its components. Do not rely on the next conversation remembering an unrecorded correction. ## Check usefulness as well as appearance Use the real content and attempt the real task. Check keyboard focus, longer labels, an empty result and an error. A visually distinctive form is still unfinished if its validation message is confusing. A product screenshot should help explain the product rather than fill an empty rectangle. A useful stopping point is a page with clear hierarchy, consistent choices and an understandable next step. It does not need a new decorative treatment in every section. Use the website prompt tool to capture reference details, then supply the product decisions that a reference cannot tell you. ## Further reading - [Reddit: why generated websites still feel generic](https://www.reddit.com/r/ClaudeCode/comments/1r5zy5n/aigenerated_websites_always_look_generic_how_do/) - [Reddit: making an interface feel intentionally designed](https://www.reddit.com/r/ClaudeAI/comments/1swf8hx/how_do_you_get_ai_to_generate_ui_that_actually/) - [Claude Code: writing specific, consistent project instructions](https://code.claude.com/docs/en/memory) ## Related pages - [Website prompt generator](https://sitepeel.dev/website-prompt-generator/index.md): Turn an existing website into a structured design prompt. Capture layout, typography and visual details for an AI website project with Sitepeel. - [Write a website design prompt](https://sitepeel.dev/guides/write-website-design-prompts/index.md): Write a useful AI website design prompt with clear content, layout, visual direction and working interactions. Copy and adapt the example. - [Keep designs consistent across projects](https://sitepeel.dev/guides/keep-ai-ui-consistent-across-projects/index.md): Keep separate websites and dashboards visually consistent with shared design tokens, reusable components and a small, versioned design reference.