Your first page works. These make the next one look great. Every link is free, and each one comes with a prompt that tells your AI exactly how to use it.
Ready-made pieces
Ready-made pieces of a website, like buttons, menus and pricing boxes, that your AI can copy the idea from instead of starting from nothing.
A big community shelf of polished website pieces, like hero sections, pricing tables and animated buttons, made by thousands of designers.
Licence: Free to browse, with 2 free component copies a day (membership unlocks more). Each component stays owned or licensed by its own author.
I found a component I like on 21st.dev (https://21st.dev). Here is the code or prompt I copied from its page: [paste it here]. It is written for React and Tailwind, but I only have one HTML file. Please rebuild the same look and animation in plain HTML, CSS and JavaScript inside my single file, with no install steps.
Thousands of community-made buttons, cards, toggles and loaders you can copy as plain HTML and CSS.
Licence: MIT License (the site states all UI elements are published under the MIT License, free for personal and commercial use).
I copied a button from Uiverse (https://uiverse.io), a free library of HTML and CSS elements. Here is its HTML and CSS: [paste it here]. Please add it to my page as the main button people click, keep its animation, and adjust its colors to match the rest of my page. Keep everything inside my one HTML file.
Free, tidy building blocks for ordinary pages, like headers, pricing sections, forms and footers.
Licence: MIT License
Use HyperUI (https://hyperui.dev) as a guide for my page layout. Its free blocks are written with Tailwind CSS, but I only have one HTML file. Please pick a clean pricing section and a simple footer in the HyperUI style and write them in plain CSS inside my single HTML file, so nothing needs installing. Keep it easy to read on a phone.
Animated pieces for landing pages, like endless scrolling rows of logos, shimmering buttons and moving text.
Licence: MIT License for the free components (Magic UI Pro is a separate paid product).
Take the 'Marquee' idea from Magic UI (https://magicui.design/docs/components/marquee): a row of cards that scrolls slowly and endlessly sideways. Magic UI is built for React, so please recreate the effect in plain HTML, CSS and JavaScript inside my one HTML file. Use it to show short quotes from happy customers, and pause the scrolling when I hover over it.
Eye-catching animated sections, like glowing backgrounds, 3D cards and spotlight effects, for when you want a page to feel special.
Licence: Aceternity License: use in unlimited end products, including commercial websites; you may not resell or redistribute the components themselves. Some components are free, others need the paid All-Access Pass.
Use the 'Aurora Background' from Aceternity UI (https://ui.aceternity.com/components/aurora-background) as the background of my page's top section: soft, slowly moving bands of color behind the headline. It is made for React and Tailwind, so please rebuild it in plain HTML and CSS inside my single HTML file, with no installs. Keep the text easy to read on top.
A playful collection of animated backgrounds, text effects and cursor effects you can study and recreate.
Licence: MIT + Commons Clause: free to use in your own sites and apps, including commercial ones, but you may not sell, sublicense or redistribute the components themselves.
Look at the 'Dot Field' background from React Bits (https://reactbits.dev/backgrounds/dot-field): a grid of small dots that reacts when the mouse moves over it. React Bits is made for React, so please recreate the idea in plain HTML, CSS and JavaScript (a canvas is fine) inside my single HTML file, behind my main heading. Keep it subtle and smooth on phones.
A reference that shows how real companies design common pieces like tabs, accordions and cards, so you learn the right names to ask your AI for.
Licence: No licence stated; free to browse. The examples belong to the design systems it links to.
I want an accordion (a list of questions that open when you click them) for the FAQ on my page. The Component Gallery (https://component.gallery/components/accordion/) shows how real design systems build one. Follow the good habits they share: clear headings, a plus or arrow icon, and it should work with the keyboard. Build it in plain HTML, CSS and JavaScript in my single file.
Backgrounds & effects
Moving backgrounds, textures and small animations that make a page feel alive. A little goes a long way.
A playground for 3D clouds of thousands of tiny glowing dots that you can shape into spheres, words or your own design, then export as code.
Licence: No licence stated on the site; the tool is free to use in your browser.
I made a particle effect in the AI Particle Simulator (https://particles.casberry.in), which turns thousands of glowing 3D dots into code. Here is the Vanilla JS export I copied: [paste it here]. Please put it behind the headline of my page as a full-width background inside my single HTML file. If it needs Three.js, load it from a CDN link. Keep the text readable on top.
A menu of ready-made CSS animations (movement written as styling code), like things sliding in, fading or gently pulsing.
Licence: Free for personal and commercial use, licensed under the FreeBSD License.
Animista (https://animista.net) is a free library of ready-made CSS animations. I'd like my section headings to slide in gently from the bottom, the way its 'Entrances' animations do, and my main button to pulse softly like its 'Attention' animations. Please write those animations yourself in my single HTML file, and play each heading's animation when it scrolls into view.
A free, no-signup maker for wavy dividers, blobs and layered backgrounds that you download as images.
Licence: Free for personal and professional projects; no credit needed (a link back is appreciated). Paid Pro plan announced as coming soon.
I made a wave shape in Haikei (https://haikei.app), a free tool for SVG backgrounds (SVG is an image made of code, so it stays sharp at any size). I've attached the SVG file I downloaded. Please put it inline in my HTML file as the divider between my top section and the next one, stretched to full width, and match its colors to my page.
A set of free makers for grainy textures, blobs, squiggles and other background art.
Licence: Free for personal and commercial projects; no attribution required. You can't resell or redistribute the images themselves.
fffuel (https://fffuel.co) has free makers for SVG backgrounds, like the 'nnnoise' grain texture at https://fffuel.co/nnnoise/. I made one there and attached the SVG file. Please place it inline in my single HTML file as a soft grain layer across the whole page so it feels less flat. Keep it faint, and make sure it never blocks clicks on anything.
A collection of repeating background patterns, like dots, waves and circuits, that tile quietly behind your content.
Licence: CC BY 4.0 (free to use, including commercially, as long as you credit the creator).
Hero Patterns (https://heropatterns.com) is a free set of repeating SVG background patterns by Steve Schoger. Please give my page a faint repeating pattern in that style as its background, written as CSS inside my single HTML file, so it adds texture without distracting. Also add a small credit in my footer: Pattern from Hero Patterns by Steve Schoger.
Inspiration
Galleries of good-looking websites. Show your AI a screenshot and ask it to borrow the feel, not copy the page.
A daily-updated gallery of well-designed websites, sorted by type like portfolios, shops and landing pages.
Licence: Free to browse (a paid Pro plan removes ads and adds features). No reuse licence; the featured sites belong to their makers.
I've been browsing Land-book (https://land-book.com), a gallery of well-designed websites, and I've attached a screenshot of one I like. Please don't copy it. First describe in three short points what makes its layout work, then use those ideas (spacing, text sizes, how the sections are stacked) to restyle my page in my single HTML file.
Over 7,000 landing pages (the single page a product or project uses to introduce itself), grouped by topic.
Licence: Free to browse (a paid Pro plan adds more). No reuse licence; the featured pages belong to their makers.
Lapa Ninja (https://www.lapa.ninja) collects thousands of landing pages grouped by topic. Mine is for [what your page is about]. From pages like the ones collected there, tell me the 3 layouts such pages most often use, in plain words, and ask me which one I want before changing anything. After I choose, rebuild my single HTML file with that layout.
A long-running showcase of one-page websites, where everything sits on a single scrolling page, just like the one you're building.
Licence: Free to browse (premium templates are sold separately). No reuse licence; the featured sites belong to their makers.
One Page Love (https://onepagelove.com) showcases one-page websites, where everything sits on a single scrolling page. I've attached a screenshot of one I like. Please borrow its structure, not its words or pictures: the order of the sections, a menu that jumps down the page, and the generous spacing. Apply that to my single HTML file.
A daily hand-picked stream of bold websites, branding and motion design; the old Godly gallery (godly.website) now leads here.
Licence: Free to browse (optional free sign-up). No reuse licence; the featured work belongs to its makers.
I found a bold website on Recent (https://recent.design), a daily gallery of standout design, and I've attached a screenshot. Please name the 3 things that make it feel special, like the lettering, the colors or the movement, then give my single HTML file a similar mood using my own content. Don't copy their text or images.
Fonts
Free typefaces your page can load with one line, so your words look chosen rather than default.
A huge free library of fonts that your page can load with a single line of code.
Licence: Free and open source, including commercial use. Most fonts use the SIL Open Font License; some use the Apache License or Ubuntu Font License.
Please set the fonts on my page using Google Fonts (https://fonts.google.com). Use 'Fraunces' for headings and 'Inter' for body text, loaded with a single link tag from fonts.googleapis.com in the head of my one HTML file. Set sizes and line spacing so the text is comfortable to read on both a phone and a laptop.
A smaller, carefully chosen set of free fonts with a modern, designer feel you won't see on every other site.
Licence: 100% free for personal and commercial use. Fontshare's own fonts use the ITF Free Font License; the open source ones use the SIL Open Font License.
Use the free font 'Satoshi' from Fontshare (https://www.fontshare.com) for all the text on my page. Load it with Fontshare's CSS link from api.fontshare.com in the head of my single HTML file, use the bold weight for headings and the regular weight for body text, and keep a plain fallback font in case it doesn't load.
Icons
Small, clean symbols for things like email, menus and checkmarks. All free, and they all match each other within a set.
A few hundred simple, neat icons from the makers of Tailwind CSS, in outline and solid styles.
Licence: MIT License
Use icons in the style of Heroicons (https://heroicons.com), the free outline icons from the Tailwind CSS team. Please add a small outline icon next to each of my feature headings, written straight into my single HTML file as inline SVG code (an image made of code), so there is nothing extra to load. Keep them the same color as my headings.
A large, friendly set of open-source line icons that all share the same simple look.
Licence: ISC License (a few original icons are under the MIT License).
Add icons from Lucide (https://lucide.dev), a free open-source icon set. Load it with one script tag from the unpkg CDN (https://unpkg.com/lucide@latest) in my single HTML file, then use it for a menu icon, a mail icon on my contact button, and small check marks in my list of benefits. Keep the icons the same size as the text next to them.
A flexible icon family where every icon comes in six styles, from thin to bold to soft two-tone.
Licence: MIT License
Use Phosphor Icons (https://phosphoricons.com) on my page. Load the web version with one script tag from unpkg (https://unpkg.com/@phosphor-icons/web) in my single HTML file. Use the 'duotone' style for the icons on my feature cards, so they have a soft two-tone look, and pick icons that match what each card is about.
Over 6,000 free line icons, so you'll almost always find the exact symbol you need.
Licence: MIT License for the free source icons (ready-made paid bundles are also sold).
Tabler Icons (https://tabler.io/icons) has over 6,000 free icons. Please load its icon font from the jsDelivr CDN (the @tabler/icons-webfont stylesheet) in my single HTML file and use it in my contact section for a phone, a mail and a map pin icon. Make them a little larger than the text and give them my accent color.
Color
Tools for picking colors that work together, so you can hand your AI a palette instead of guessing.
A quick palette maker: it suggests colors that go together, you keep the ones you like, then copy their codes.
Licence: Palettes are free for commercial and non-commercial use; attribution is not required. You may not resell or redistribute the palettes themselves.
I made a color palette on Coolors (https://coolors.co), a free palette maker. Here are the hex codes: [paste your codes here]. Please apply them across my single HTML file as CSS variables: the darkest for text, the lightest for the background, and the boldest for buttons and links. Check that all text is easy to read against its background.
Try your colors and fonts on a sample website before you commit, so you see how they really look together.
Licence: Colors you generate can be used however you like, commercially or not. (The Realtime Colors site itself is CC BY-NC-ND.)
Realtime Colors (https://www.realtimecolors.com) lets you try text, background, primary, secondary and accent colors on a sample website. I picked mine there and copied the five hex codes: [paste your codes here]. Please use them in those same roles in my single HTML file as CSS variables, and add a matching dark version that turns on when my device is in dark mode.
A simple maker for smooth color blends (gradients), plus a gallery of ready-made ones to borrow.
Licence: Free to use; the site says its gradient swatches are "free for you to use however you'd like."
Using CSS Gradient (https://cssgradient.io), a free gradient maker, as a guide, please give the top section of my page a soft gradient background that moves from a deep blue to a warm pink, and give my buttons a subtle gradient in the same colors. Write it as plain CSS in my single HTML file and keep the text easy to read on top.
Illustrations
Free drawings of people and scenes you can drop into your page. None of these need a credit line.
Hundreds of clean, modern illustrations where you pick the main color before you download.
Licence: Free for commercial and personal use, no attribution needed. You can't redistribute them as a collection or use them to train an AI model.
unDraw (https://undraw.co) has free illustrations where you can set the main color before downloading. I picked one, set it to my accent color and attached the SVG file. Please place it inline in my single HTML file next to my main heading, scaled so it fits nicely on phones, and give it a short alt text describing the picture.
A hand-drawn library of mix-and-match people with different poses, faces and outfits.
Licence: CC0 License (public domain): free for commercial and personal use, no permission or credit needed.
Open Peeps (https://www.openpeeps.com) is a free hand-drawn library of people. I downloaded a few peeps and attached them as SVG files. Please put them side by side above my 'Who this is for' section inside my single HTML file, all the same height, and make the row wrap neatly on a phone. Give each a short alt text.
Build your own illustrated people by swapping hairstyles, tops, pants and poses.
Licence: CC0 (public domain): free for commercial or personal use.
I built a character with Humaaans (https://www.humaaans.com), a free mix-and-match library of people illustrations, and attached the SVG file. Please place it on the right side of my welcome section in my single HTML file, with my text on the left. On phones, stack the picture above the text. Add a short alt text describing it.
Loose, sketchy drawings of people doing everyday things, for a friendly, handmade feel.
Licence: Free for commercial and personal use. No need to credit, license, or anything.
Open Doodles (https://www.opendoodles.com) is a free set of sketchy hand-drawn illustrations. I downloaded one and attached the SVG file. Please use it in my page footer next to a friendly sign-off line, inside my single HTML file, and keep the loose, handmade feel with a matching handwritten-style font for that line loaded from Google Fonts.
A free gallery of flat illustrations about work, tech and daily life that you can recolor before downloading.
Licence: Free for commercial and personal use, no attribution needed. You can't sell or redistribute the illustrations themselves.
The ManyPixels gallery (https://www.manypixels.co/gallery) has free flat illustrations you can recolor before downloading. I set one to my main color and attached the SVG file. Please put it inline in my single HTML file at the top of my 'How it works' section, centered and not too big, with a short alt text describing it.
Haven’t built your first page yet? Start with the five-minute set-up. These will still be here.