Most AI-generated websites look like they came from the same template: familiar gradients, predictable cards, interchangeable hero sections. The coding tool is not always the problem. Often the problem is a weak design reference and an underspecified prompt.
This is my curated list of 40 websites and tools to help founders, freelancers, designers, and developers build more distinctive sites with AI. It covers complete prompts, design systems an agent can read, galleries worth studying, reusable UI components, motion effects, and the coding tools that tie everything together.
If you open only one link, start with Scrolltide. Then explore the category that matches your current bottleneck. This is a practical directory, not a claim that any one tool can replace user research, accessibility reviews, or engineering judgment.
The fastest way to use this list
- Choose a direction. Study two or three real designs for typography, spacing, hierarchy, and motion.
- Give your agent precise instructions. Start with a complete prompt or a
DESIGN.mdfile, then specify your content, audience, constraints, and tech stack. - Use components deliberately. Reuse accessible UI patterns instead of rebuilding buttons, forms, or navigation.
- Validate before shipping. Check mobile breakpoints, keyboard navigation, contrast, loading performance, interactions, and the final diff.
Prompt-first design workflows
1. Scrolltide
My first stop for visually ambitious, motion-rich websites. Instead of handing you a vague suggestion, Scrolltide focuses on complete prompts for templates, sections, interactive scenes, and UI elements. Its workflow is memorable: pick a prompt, paste it into Claude Code, Cursor, or v0, then customize and launch. It is particularly useful for founders and freelancers who want a distinctive starting point without assembling a design system from scratch.
Why Scrolltide is my first pick
Unlike a gallery that gives you only a screenshot, Scrolltide is built around copy → paste into your AI → launch. It provides complete design prompts rather than isolated notes you must assemble yourself. The collection focuses on cinematic landing pages, sections, shaders, and interactive components; its prompts are aimed at Claude Code, Cursor, and v0.
That makes it a useful starting point for founders and freelancers who want an ambitious visual result quickly. Customize the copy, verify any included code and licensing, test responsiveness, and review what the agent produces before deploying. The library and product counts change over time, so check the site for the current selection and plan details.
2. DESIGN.md
Design systems expressed as Markdown that coding agents can read. Define colors, typography, spacing, components, and visual rules once, then use that guidance to keep generated pages consistent.
3. Vibe Prompts
Ready-made prompts for dashboards, landing pages, and common interface directions. Useful when your first prompt needs more specificity than ‘make it look modern’.
Real-world design inspiration and UX patterns
4. Minimal Gallery
A curated source of restrained, high-end web design references. Study its typography, whitespace, and content hierarchy before adding animation.
5. Kage
Real web-design inspiration paired with prompts you can use to turn a visual direction into an AI-assisted implementation.
6. Refero Styles
A collection of 2,000+ AI-readable website style references, including typography, colors, spacing, components, and DESIGN.md files.
7. The Component Gallery
A reference library comparing how established design systems solve the same UI element. It currently catalogs more than 2,600 examples across multiple systems.
8. Godly
A curated gallery of memorable websites. Good for finding unusual compositions and art direction beyond standard SaaS templates.
9. Awwwards
Recognized and ranked creative websites, with a focus on visual craft, interaction, and digital experience. Use it for inspiration, not as a checklist of effects to copy.
10. Landing Love
A showcase of expressive landing pages and animation-heavy websites. Useful for studying how transitions and scroll effects support a story.
11. Land-book
A practical gallery of landing pages spanning product sites, agencies, portfolios, and campaigns.
12. Mobbin
Real-world mobile UI patterns and product flows. Start here when navigation, onboarding, or a multi-step interaction needs to feel familiar.
13. Hover States
An eclectic collection of experimental web projects, creative interactions, and unconventional layouts.
14. Navbar Gallery
Navigation-pattern inspiration. Compare structures, responsive behavior, menu density, and information architecture.
15. Footer Design
Footer layout references for sites that need to conclude a page cleanly and still guide visitors toward the next action.
16. CTA Gallery
A visual collection of calls to action, forms, pop-ups, and buttons. Useful for conversion-oriented design inspiration; actual conversion performance still needs testing on your audience.
17. SupaHero
Hero-section inspiration for finding a sharper above-the-fold composition, headline treatment, and first-screen hierarchy.
18. Pricing Pages
Examples of pricing-page layouts, plan comparisons, feature tables, and packaging patterns.
Components, effects, and frontend building blocks
19. 21st.dev
A community marketplace of UI components, themes, and templates. Its CLI and MCP integration make it especially useful when an AI coding agent needs to search for, inspect, and bring component code into a project.
20. shadcn/ui
An excellent foundation for accessible, customizable React UI patterns. You own the component code rather than treating a visual library as an opaque black box.
21. Aceternity UI
Animated React and Tailwind components for expressive landing pages, backgrounds, cards, and interactions.
22. Magic UI
Animated components and visual effects built for modern frontend stacks; useful for adding motion after the core experience works.
23. Motion Primitives
Reusable motion patterns for polished, intentional interactions without inventing every transition from zero.
24. Uiverse
Community-created UI elements and CSS interaction ideas, including buttons, toggles, loaders, and cards.
25. Smooth UI
Animated UI components and effects with a focus on Motion- and GSAP-powered interactions.
26. shadcnblocks
A large catalog of prebuilt sections and layout blocks designed around the shadcn/ui ecosystem.
27. Kinetics by Colorion
Motion-effect examples with React code and prompts, useful when you want to reproduce a particular interaction.
28. Microkit
Small interaction ideas that can make feedback, transitions, and state changes feel more deliberate.
29. Liquid Glass by Samasante
Experiments with glass and refraction effects for the web. Treat effects like these as progressive enhancement, with contrast and performance in mind.
Animation, 3D, and shaders
30. Anime.js
A lightweight JavaScript animation engine for sequencing and choreographing UI motion.
31. Three.js
A widely used JavaScript 3D library for interactive scenes, product showcases, and rich visual experiences.
32. Shadertoy
An online shader editor and community full of generative graphics experiments. Great for learning techniques before integrating visual effects into a product.
33. The Book of Shaders
A free, interactive introduction to fragment shaders and graphics fundamentals.
34. Three.js Journey
A structured learning path for Three.js, including more advanced 3D and shader work.
Visual assets and AI builders
35. Kitbitz
A collection of 2,000+ hand-drawn illustrations for adding a human visual accent to product pages.
36. 3D Icons
A collection of 3D icon assets for product screens, illustrations, and landing-page accents.
37. Claude Code
Anthropic’s coding agent for working across a real codebase. Give it a concrete design brief, reference links, and your project conventions, then review the actual change and tests.
38. Cursor
An AI-first code editor for iterating on page layouts, CSS, components, and application logic in context.
39. v0
Vercel’s AI-driven app and interface builder, useful for turning requirements into a frontend starting point and refining it interactively.
40. Lovable
A browser-based AI app builder that can take an idea toward a working web application without starting from an empty repository.
My recommended stack for an AI-built website
For a landing page, I would start with Scrolltide for the visual prompt, use Refero Styles or DESIGN.md for consistent design decisions, lean on shadcn/ui or 21st.dev for real components, and implement with Claude Code or Cursor.
For a dashboard, begin with Mobbin and The Component Gallery to understand common patterns, then use shadcn/ui and targeted blocks. Prioritize readable data, responsive states, and accessibility over dramatic motion.
For a creative portfolio, study Awwwards, Godly, and Hover States. Reach for Motion Primitives, Anime.js, or Three.js only when the effect helps tell the story and your performance budget can accommodate it.
The rule I keep coming back to is simple: inspiration gives your agent taste; design systems provide consistency; components supply implementation; tests and human review make the result trustworthy.
If you are building with Claude Code, you may also like my practical guides on UI/UX Pro Max with Claude Code and Claude Code plugins for better websites.
Note: catalog sizes, free tiers, availability, licensing, and features change. Check each provider’s site before choosing a tool or using its code in a commercial project.
