Fixing AI-generated frontends: eliminating fake hover states and layout clutter
The author hired a designer for $100 to conduct a UX audit on an AI-generated website. The original article outlines specific improvements for removing the AI-generated look, resolving conflicting CTAs, refining search, and handling static badge interactions.
Reddit r/vibecoding/u/BuffaloConscious7919
CursorClaude Codev0Bolt
Added 2026-10-31 · originally published 2026-10-30
Key points
- Check headings and backgrounds: avoid AI-typical fine dashed backgrounds and specific fonts, making custom cards feel more human.
- Unify layout positioning: clearly define whether the page is a web app or a desktop app rather than sitting awkwardly in between.
- Consolidate conflicting CTAs: use the accent color only for the high-contrast primary button while keeping other buttons subdued to prevent competing for attention.
- Optimize search and filtering: avoid displaying too many categories all at once. Group them first and show secondary filters on demand.
- Fix static badges and interactions: if an element is not clickable, remove its hover effect entirely to prevent users from clicking in vain.
- Polish details: remove the "X" close icon from landing page popups to avoid mistaking them for modals, make sure the search box "X" function is clear, and fix inconsistent border radii between cards and modals.
Pitfalls
- AI-characteristic fine dashed backgrounds and header fonts
- Giving static badges the same hover state as real buttons, leading users to click in vain
- Dumping too many categories directly into search results, causing clutter
- Adding an "x" to landing page popups so they look like accidental modals rather than part of the page
- Tooltips disappearing too quickly
.cursorrules
- Ensure all non-clickable static badges and text have absolutely no hover state. - Buttons and CTAs must strictly distinguish between primary and secondary roles, allowing only one high-contrast primary button to use the accent color while treating the rest silently. - The border radius of cards and modals must remain consistent. - Avoid dumping too many categories at once in the search feature; secondary filters must be grouped and collapsed first.
Copy-ready prompt
Please help me optimize the following frontend page to eliminate the AI-generated look and fix interaction issues: 1. Unify the layout to clearly establish whether it is a web app or a desktop app. 2. Review all CTA buttons to ensure only one high-contrast primary button uses the accent color, while the rest are de-emphasized. 3. Optimize the search bar and category display by grouping them first and showing secondary filters on demand to avoid clutter. 4. Check all static badges and tags. If they are not clickable, **immediately remove their hover state**. 5. Ensure the function of the "X" icon inside the search box is clear (whether it clears text or closes the view), and check the close logic for landing page popups. 6. Check border radii to ensure consistency between cards and modals. 7. [Add your specific page or component requirements]
#AI Frontend Polish#UX Optimization#Anti-Patterns#Vibecoding
Related techniques
Summarized by AI from the original source - refer to the original post for details. Copyright belongs to the original author.