AI-Built Landing Pages Look Like Neon Bars? Start with These 8 Reference Sites
Someone on X has compiled 8 design reference libraries that the original post calls free, covering navigation, footers, CTAs, Hero sections, 3D icons, and glass effects. The usage is straightforward: pick references, hand them to AI coding tools like Claude or Cursor, and have them copy the style, not the content.
Building a landing page with AI can produce code that runs, but the page looks fake at first glance: neon gradients covering the entire screen, buttons that look like they were cut out of a free 2019 template. The problem is often that you've given it too few references. If you only throw in “make a more premium landing page,” the model can only return the average, and the average is exactly what feels like a template.
Someone on X, niko, put together a list of 8 design reference sites that the original post calls free, to use as samples when having AI build web pages. The original post includes a UI demo video:
The list is here:
- scrolltide.co: 600+ design and code prompts for 3D websites and scroll effects.
- navbar.gallery: navigation bar references.
- footer.design: footer references—at least they won't make people want to close the page immediately.
- cta.gallery: copy and styles for buttons and calls to action.
- styles.refero.design: styles extracted from real products.
- supahero.io: Hero section references; you can look directly at the structure.
- 3dicons.co: 3D icons for interfaces.
- glass.samasante.com: glass components and effects.
The usage isn't complicated. Pick two or three references that match the vibe of your project, hand them to an AI coding tool like Claude or Cursor along with the requirements, and ask it to reference the layout, hierarchy, color scheme, and interactions, not copy the wording or brand elements. In the replies to the original post, someone added a constraint: give the AI two or three websites you like and have it copy the style, not the content. This approach is more effective than “make it more premium.”
A site was also added in the replies: 21st.dev. You can look at it too for component references.
These sites solve reference density, not aesthetic judgment. No matter how many reference libraries there are, in the end someone still has to choose, delete, and revise. Someone joked that the gold mine belongs to the people who charge. The reminder is blunt: tools lower the barrier, but judgment doesn't automatically rise with it. Before using them, check each site's licensing and whether it's fully free, and don't treat references as authorization.
发布时间: 2026-10-31 23:46