Learn AI — free Home Book a call
The Website Toolbox

Seven levels between
"AI made me a page" and "wow."

Most AI-built websites come out generic — not because the AI can't design, but because nobody handed it references, skills, or real data. This is the toolbox that fixes that: every tool, organized by level, from your first prompt to full design extraction. Every link verified. No affiliate links. Free.

16 tools, link-verified · 2 copy-and-paste power prompts · Updated July 2026
1
Where everyone starts

Just asking

"Build me a nice-looking website." That's the whole prompt — and it's why most AI sites look the same. It's like telling a contractor "make the room look nice" and walking away. The AI does its best with nothing to go on, and you get the same safe, generic layout everyone else gets.

No tools at this level — the fix is everything below. If your AI websites have been disappointing you, the problem was never you. You were just standing on level one.

2
Show, don't tell

Screenshots & references

A picture beats a paragraph of adjectives. Browse these galleries of genuinely great websites, screenshot two or three you love, and hand them to your AI: "use these as the reference style." The design instantly stops being generic, because now it has taste to borrow.

How to use it: screenshot 2–3 designs you love → paste them into Claude → "update my site using these as the reference style."
3
The biggest early upgrade

Design skills

References tell the AI what you like. Skills teach it how to design. A skill is a pre-packaged set of expert instructions — font pairings, color systems, spacing rules, what great looks like and what to avoid — written by people who obsess over design. You install one once, and every website after that is built by a better designer.

How to use it: copy a skill's GitHub link → tell Claude "check out this skill, download it, and add it to your skills — use it whenever we build websites."
4
Give the artist real materials

Image & video generation

Great sites aren't just text and boxes — they have real product shots, hero images, and motion. Instead of hunting stock photos that almost fit, you generate exactly what the page needs. The trick that makes videos look professional: generate an image first, then animate it using that image as both the first and last frame — the video loops seamlessly back to where it started.

How to use it: generate 2–4 image options per asset → pick the winner → animate it with the same image as start and end frame → drop it into the build.
5
The hack most people don't know

Borrow finished parts

Somewhere on the internet, a professional has already built the exact button, menu, or animated section you want — polished, tested, and shared publicly for others to use. Instead of asking the AI to reinvent it, you copy the component and say "integrate exactly this." It's like picking up a beautiful fireplace from one house and placing it in yours.

How to use it: find a component you love → copy its code or URL → "integrate this exactly, at the bottom of the page."
6
Beautiful is not enough

Feed it real data

A gorgeous website that doesn't convert is a Ferrari with no engine. The data on what actually works in your market — what the winning businesses put above the fold, what their call-to-action says, what the strugglers get wrong — is already public. You just need a tool that can go read it all, and a prompt that turns it into a blueprint.

⚡ Power prompt — the winners-vs-losers research
I'm launching a [your business type] in [your city]. Go online and find me the 10 most successful [your industry] websites in [a bigger nearby market] — and 10 that are clearly struggling. Do comprehensive research on what the winners have that the losers don't. What do they have in common? What is the order of their pages — what comes first, what's the hero, what's the call to action? Build a scoring matrix that defines what a great website is and isn't in this niche. The output I want is a clear, evidence-backed blueprint I can hand to another model to build a winning site. Everything must be evidenced — no guessing. Use the Firecrawl MCP for the research, and if possible cross-validate the findings with a second model.
7
The strongest method

Design extraction

Sometimes you land on a website and just feel it's right — but you can't explain why. You don't have to. Ask the AI to study the site and extract its design identity: the typography, the color logic, the spacing, the rules that make it feel the way it does. That written blueprint becomes the brief for your own site — same principles, completely new identity. It's like getting the original architect on the phone.

The honest rule: extract principles, never content. You're learning why a design works — typography scale, white space, rhythm — not copying anyone's words, images, logo, or brand. One site worth studying to see what "one page, one thought" feels like: antigravity.google.

⚡ Power prompt — the design blueprint extractor
I'm going to give you a website whose design I love. Study it and extract its design identity: the typography (faces, sizes, weights, scale), the color palette and how it's used, the spacing and layout structure, the motion and interactivity, and the general design rules that make it feel the way it does. Do NOT copy its content, brand name, images, or logo — I want the principles, not the material. Produce a written design blueprint I could hand to another model. Then use that blueprint to build a new site with the same level of craft but its own identity. My site is about: [what your site is for]. The site to study: [URL]
Where this comes from

Full credit where it's due.

This toolbox is distilled from Jack Roberts' video "Every Level of Claude Code Websites Explained" — one of the clearest walkthroughs of AI web design we've seen. We verified every link, swapped affiliate links for direct ones, and rewrote the framework in plain English. The thinking is his; go watch the original.

Also in the stack: Claude (the builder), GitHub (where the skills live), and Glaido (type with your voice — say it instead of typing it).

Watch the source video

"Every Level of Claude Code Websites Explained" — Jack Roberts, 21 min. Also curated in our free Learn library.

Watch on YouTube → Open the library

Want all of this set up for you?

Everything on this page is free and self-serve — genuinely, you can do it yourself. A GetGood workshop is for when you'd rather have it installed with you in one sitting: Claude set up on your machines, the design skills loaded, your brand taught to it, and your first build shipped — owned by you, forever.

Book a free 30-minute call Or use the free setup guide