← Back to Pulse PULSE. brief
7 Free Websites That Finally Kill AI Slop (underrated)

7 Free Websites That Finally Kill AI Slop (underrated)

Duncan Rogoff | Learn Claude Code9 min2026-09-19 ▶ Watch on YouTube
ℹ️
Partly verifiedA few specific details here couldn't be independently confirmed against the video. The overall summary is sound, but double-check exact numbers or names before you rely on them.
What this video is
⚡ a 9-minute video, readable in 60 seconds

This video walks through seven design resource sites and shows how to feed screenshots, copied prompts, or MCP integrations from each into Claude Code to redesign an intentionally bad, AI-slop-style fictional energy drink site called VoltX, a single HTML file at /Users/duncanrogoff/Desktop/energy/index.html. The stack is Claude Code and Claude Desktop, with some resources installed via commands like 'npx -y inspo-mcp install' and 'npx ui-skills', and MCP tools require restarting Claude before they appear. The seven sites are awwwards.com, godly.design, motionsites.ai (a paid MCP at $279 a year or a discounted $399 lifetime plan), inspo-MCP.dev, ui-skills.com, 21st.dev, and styles.referro.design; the rest are shown as free to browse and copy from. By the end, VoltX has a full custom design system called HUD Mono, added 3D icons and overlapping cards, retimed motion effects, and a redesigned pricing section and footer pulled from the referenced sites, finishing in an Apple product-page style pulled from styles.referro.design.

Context: most videos claiming to teach $10,000-website design still produce results that look like AI slop [00:00]
Key takeaways
+ 114 more takeaways
  • File: saved at /Users/duncanrogoff/Desktop/energy/index.html as a single HTML file, one long scroll [00:43]
  • Prompt used to generate the bad site: 'build a website for a fictional energy drink with all the classic markings of AI slop' [00:43]
  • AI slop markers included: purple cyan gradient text, emoji logo, blurry floating orbs, glass cards with emoji icons, a cans-sold counter, fake testimonials from Sarah J., Mike T., and Emily R., a Most Popular price badge, an FAQ accordion, and a Join 50,000+ email box [00:43]
  • Step: screenshot a liked design from awwwards.com and drop it into Claude Code as a reference [00:45]
  • Prompt: 'create a design system HTML based on this reference and then apply it to the energy drink site' [00:56]
  • Result: within a couple minutes, a redesigned site plus a full reusable design system (color palette, typography, spacing, components) was produced, usable for new pages, marketing material, and Instagram carousels [01:02]
  • Design system produced: HUD Mono, a strict greyscale terminal HUD system with hairlines, monospace telemetry, and condensed display type, no gradients or color or decoration that doesn't carry data [01:09]
  • Design system rules: no gradient text/fills, no emoji icons, no rounded pill buttons, no drop shadows or glass cards [01:15]
  • Resource 2: godly.design, a curated gallery of the best web, app, UI, and visual design work, which also breaks full sites into individual sections [01:22]
  • Godly breaks sites down into curated sections rather than only showing whole pages [01:33]
  • Godly has a curated section of high-performing hero sections [01:43]
  • Godly has a section for browsing high-converting CTAs, described as curated, high-converting call-to-action section designs and layouts [01:47]
  • Step: use Godly's sections to pick components or sections to add to a site and improve it [01:51]
  • Note: these design resource sites give access to all of their showcased resources [01:58]
  • Step: download a resource (e.g. a video) from a site, drop it into Claude, and ask Claude to figure out how to integrate it [02:01]
  • Design system workflow files shown: tokens.css (colors/type/spacing), design-system.html (spec sheet with component classnames and do/do-not rules), and index.html (the rebuilt VoltX site) [02:06]
  • Offer: copy the design system into ~/.claude/design-system/ so it can be reused as a house system [02:06]
  • Result: after reloading the site, animations from the reference design now play correctly [02:11]
  • Resource 3: motionsites.ai, called 'absolutely stunning' [02:18]
  • motionsites.ai contains animations, parallax and scrolling sites, and 3D video templates [02:24]
  • Feature: motionsites lets you copy the full prompt for a website design [02:34]
  • Tool name: motionsites MCP [02:37]
  • Step: take the copied prompt into Claude Code for a full redesign, or call out specific liked sections such as overlapping sections [02:43]
  • Example site's Agency Services listed: 3D Modeling, Rendering, and Motion Design [02:39]
  • Example site also lists Branding and Web Design services [02:45]
  • Prompt/request: user tells Claude Code they love how sections overlap and the card carousel, asks it to incorporate the best pieces plus 3D icons while keeping the energy drink concept and matching styling [02:54]
  • motionsites.com offers a paid MCP server, installable into Claude Code, Cursor, or Codex, to pull in premium website design elements [03:15]
  • Setup requires one command and no API key, works with Claude, Cursor, and Codex [03:19]
  • Pricing: motionsites plans are pricey, but narrator calls $279/year worth it for anyone building and selling websites [03:22]
  • Pricing: Lifetime Access plan listed at $759, discounted to $399, one-time payment with lifetime updates and early access [03:23]
  • Claim: selling a single website built with these resources would pay for the subscription and then some [03:29]
  • Result: the updated hero section for the VoltX site now follows the user's mouse [03:34]
  • Result: Claude added 3D icons and overlapping cards into the VoltX design system [03:37]
  • VoltX site copy: 'four years of formulation, eleven rejected batches, and one rule never broken: nothing goes in the can that cannot be explained on the label' [03:39]
  • VoltX is stated to contain caffeine, electrolytes, and theanine, measured and printed on the label [03:39]
  • Result: overlapping cards were added to the batches section [03:41]
  • Result: Claude updated the design system with new assets and rules (DS-SHEET, DS-INVERT, DS-OBJECT tokens) [03:45]
  • Resource 4: inspo-MCP.dev, a curated archive of 832 production sites [03:55]
  • Note: inspo-MCP can be browsed like a normal site (colors, components, typography), but its real power is its MCP integration [03:57]
  • Command: copy the install code and paste into Claude, running '$npx -y inspo-mcp install' [04:09]
  • Pitfall: Claude Code/Desktop must be restarted for newly added MCP tools to appear, since the tool list is only read at startup [04:14]
  • Prompt: 'using the Inspo MCP, find me a site for an AI agency,' which searched 24 real AI/agency sites [04:20]
  • Result: Claude's pick was FURO Web Studio (furoweb.eu): a pure black page, a giant dotted halftone wordmark, and one orange accent word (#b42e04) in the headline 'Websites that speak in your brand's voice' [04:24]
  • Backup pick offered: basement-studio (dark, geometric sans, warm accent, more of a 'studio showreel'), with the shared pattern across sites being a split-studio layout, big type on one side and one visual on the other [04:30]
  • Prompt: 'open furo web studio in my browser,' and Claude opened https://furoweb.eu/ live inside its own built-in browser pane, not the user's Chrome [04:34]
  • Prompt: 'I really like the light gradient footer at the bottom, let's incorporate that into our energy drink site' [04:41]
  • Result: Claude applied the light, clean footer to match the energy drink site [04:47]
  • Resource 5: ui-skills.com, installable via 'npx ui-skills,' listing skills including improve-ui, frontend-design (by Anthropic), improve-animations, improve-react, and a UI Skills MCP [04:56]
  • The npx ui-skills catalog also lists ui-skills-root and improve-ui by ibelick [04:56]
  • Anthropic's frontend-design skill is highlighted, described as creating distinctive, production-grade frontend interfaces [05:00]
  • Named skills spotted: UI UX Pro Max, Disney's 12 Principles of Animation, and Impeccable (for taste) [05:03]
  • Skill: interface-design by ammyjay93, for dashboards, admin panels, and SaaS apps [05:04]
  • Skill: 12-principles-of-animation by raphaelsalaja, applying Disney's principles to web interfaces [05:04]
  • Skill: impeccable by pbakaus, for anti-generic frontend interfaces [05:06]
  • Also listed: bencium-innovative-ux-designer, and gpt-tasteskill by Leonxlnx with strict layout variance and GSAP motion engineering constraints [05:06]
  • Also listed: web-design-guidelines by antfu (accessibility/UX best practices), rams (real-time design feedback), and action-design by wshobson (microinteractions and motion design) [05:08]
  • Step: connecting to Claude Code is done via MCP, endpoint given as https://www.ui-skills.com/mcp [05:11]
  • Step: to add the connector, type 'UISkills' as the name and paste in the endpoint link, no sign-in required, then click Add [05:24]
  • Result: clicking the connect button connects the user to all the free UI Skills [05:31]
  • Setting: presenter sets everything to always allow [05:35]
  • Step: after restarting Claude Code, presenter asks the UISkills MCP what skills are accessible, which lists categories like motion and animation, AI agents, React, Next, forms, and 3D [05:37]
  • Stat: the registry contains 303 skills from about 85 publishers [05:46]
  • Breakdown by category: Motion and animation 48, AI/agents 34, React/Next 31, Accessibility 18, Vue/Svelte 15, Forms 14, 3D/Three.js 8, Design tokens and systems 12 [05:46]
  • Publisher: greensock, 8 skills, official GSAP covering ScrollTrigger, timelines, SplitText, and performance [05:46]
  • Publisher: emilkowalski, 12 skills on animate, apple design, and improve animations [05:46]
  • Publisher: iart-ai, 9 skills on micro interaction, 60fps motion, SVG animation, and page transition [05:46]
  • Also listed as relevant publishers: pbakaus (18 skills, one-word audit verbs like bolder, critique, audit, colorize, delight, clarify) and ibelick (7 skills, including baseline-ui and create-design-md, which reads a live site and writes out its design tokens) [05:46]
  • Prompt: 'use the emilkowalski skills to add beautiful premium motion to our energy drink site' [05:58]
  • Note: Claude will choose the right skill automatically if you describe the desired look or motion rather than naming a skill [06:14]
  • Claude used emilkowalski/animate for build rules and emilkowalski/apple-design for feel, with improve-animations as the audit lens [05:58]
  • Animation timing changes made: button hover sweep 450ms to 200ms, color swap 350ms to 160ms, accordion 500ms to 280ms, and scroll reveals 900ms to 600ms on a stronger curve [05:58]
  • Press feedback was changed so buttons dip to 97% on mouse-down rather than on release, with stagger set so items arrive 60ms apart, and five formula rows verified at 0.95/0.90/0.92/0.84/0.69 opacity mid-reveal [05:58]
  • Performance fixes: stat bars now animate scaleX instead of width, spec rows animate translateX instead of padding-left on hover, and reduced-motion support was added where none existed before [05:58]
  • Resource 6: 21st.dev, praised for how accessible it is [06:44]
  • Step: clicking on components at the top of 21st.dev lets you get granular with what is available [06:51]
  • Feature: shows what's newest and most popular in components [06:57]
  • Feature: shows hero sections and features [07:00]
  • Feature: provides call to action sections, including specific buttons [07:02]
  • Note: the glassy highlight style on components is called 'super cool' [07:06]
  • Feature: offers pricing sections and testimonials [07:10]
  • Step: if a section of a site isn't feeling good, come to 21st.dev to find alternatives [07:14]
  • Critique: presenter says their current pricing section is hard to read, kind of small, and confusing [07:19]
  • Step: presenter finds an alternative pricing section design they think looks pretty cool [07:27]
  • Note: clicking into the pricing preview initially looked like a payment prompt but wasn't actually charging anything [07:30]
  • Step: the tool lets you copy a prompt describing the pricing section design [07:37]
  • Step: presenter pastes the copied prompt into Claude and asks it to update their pricing section [07:39]
  • Result: after Claude applies the change, the site's pricing section is updated to a clean design matching the copied example [07:48]
  • Pricing tier: Baseline at $29/month, 12 units per cycle, standard freight, single batch, pause or cancel anytime [07:48]
  • Pricing tier: middle tier at $49/month, 24 units per cycle, express freight, rotating batch access [07:48]
  • Pricing tier: Maximum at $89/month billed monthly, 48 units per cycle, pre-release batches, direct line support, pause or cancel anytime [07:48]
  • Feature: the pricing section has a star field background that interacts with the mouse [07:53]
  • Resource 7: styles.referro.design, called presenter's newest favorite, connects to AI tools including Claude, ChatGPT, Cursor, and Codex [08:01]
  • Named brand style references on the site include OpenAI, Apple, Atlassian, Eleven Labs, and Frame.io [08:08]
  • Step: opening a site like Apple's on the tool generates a full DESIGN.md file including color tokens and typography specs [08:18]
  • Apple Blue #0071e3 is defined as the only chromatic fill token, used for filled action buttons and selected states [08:24]
  • SF Pro Display is specified for display headlines and large feature text at 40px and above, with letter spacing -0.005em at 21px, 0.007em at 28px, and 0.011em at 40px+ [08:22]
  • SF Pro Text weights are 300, 400, and 600, sizes ranging from 12px to 44px, with Inter or system-ui listed as substitute fonts [08:26]
  • Type scale defines named roles: caption (12px), subheading (21px), heading-sm (28px), heading (40px), heading-lg (44px), and display (56px), each with its own line height, letter spacing, and CSS token [08:26]
  • Note: the tool already has the entire design system, with all components completely laid out [08:27]
  • Layout tokens: page max-width 1440px, section gap 64px, card padding 24px, element gap 12px [08:28]
  • Component spec: Filled Pill Button, 980px border-radius, #0071e3 background, for primary actions [08:28]
  • Component spec: Outlined Pill Button, 1px solid #0066cc border, for secondary actions [08:28]
  • Component spec: Ghost Link, no background or border, for tertiary or inline text actions [08:28]
  • Design rule: #0071e3 should only be used for filled action buttons and selected/active states, never for text, borders, or decoration [08:28]
  • Design rule: no stacking two filled blue buttons, no drop shadows on cards/buttons/nav, no cards or panels inside #f5f5f7 sections [08:28]
  • Design rule: only two radius values allowed (980px for buttons/tags/pills, 8px for cards/images), and the three blues must not be mixed in one interactive element [08:28]
  • Surface levels defined: Canvas #f5f5f7 (page background), Elevated Wash #f4f8fb (featured products), Pebble #e2e2e5 (button fills, disabled states) [08:28]
  • Step: the user can either download the MD file directly or copy the prompt text to connect to their AI [08:33]
  • Result: the confetti animation was changed to fire when someone finishes the email signup instead of on toggle, described as a rarer, better moment [08:38]
  • Result: cards are slightly see-through with a blur effect matching the reference design, letting background dots show through [08:38]
  • Workflow demonstrated: make a copy of the site, redesign it based on the style system, then paste it into the design prompt [08:38]
  • Final state: the result is a new site built in the style of an Apple product page [08:45]
  • Closing: the speaker mentions having an entire two-hour masterclass on how to build $10,000 websites [08:54]
  • Closing: the speaker says they will leave a link and says goodbye, ending the video [08:57]
Shown on screen — grab and go
PROMPTThe 'AI slop' energy-drink site prompt
website for a fictional energy drink. make sure it has all the classic markings of ai slop for the site
Merged from three near-identical OCR reads of the same Claude Code chat box at 00:43, 00:53, and 00:55; only spacing was restored. shown at 0:43
CODECommand to open the design-system.html file
open /Users/~/Desktop/energy/design-system.html
Read directly off the Claude Code terminal output shown at 02:06. shown at 2:06
CODEHUD Mono design-system spec description
A STRICT GREYSCALE TERMINAL-HUD SYSTEM. HAIRLINES, MONOSPACE TELEMETRY, CONDENSED DISPLAY TYPE. NO GRADIENTS. NO COLOUR. NO DECORATION THAT DOES NOT CARRY DATA.
Legible header text from the design-system.html spec sheet shown on screen at 01:09. shown at 1:09
How this brief was shaped: Deep-Dive (coding / tutorial / how-to) · confidence Low

Transcript walks through concrete steps and a verbatim Claude Code prompt (screenshot a reference design, paste it in, apply as a design system) to redesign a live site, and the OCR shows a technical settings/connectors screen rather than any recipe, review, or debate content. This reads as a tool-by-tool coding tutorial rather than a simple resource listicle, though the seven-resources framing also has a workflow/SOP flavor.

The lens sets this brief's structure, never its facts — every claim is held to the same citation and fact-check standard.

Jump to a moment
0:00- Why AI websites look like slop0:14- Site #11:22- Site #22:15- Site #34:07- Site #45:04- Site #56:58- Site #68:13- Site #79:05- Build anything with AI
Their links, sorted & clickable
🏛️ Communities & courses1👉skool.com
← Back to Pulse Dashboard
Was this brief useful?