Video summary

7 Free Websites for STUNNING AI Design!

Main summary

Key takeaways

Technology

Summary

The video presents seven resources for improving AI-generated website design beyond generic gradients, emojis, and basic layouts. The main approach is to use design references, prompts, reusable components, or MCP integrations with Claude Code to guide redesigns and build consistent design systems.

1. Awwwards

A gallery of award-winning websites, useful when starting from a blank page. The presenter demonstrates taking a screenshot of a reference site and asking Claude to create an HTML-based design system from it, including colors, typography, spacing, and components.

2. Godly

A collection of web and app designs organized into sections such as home screens and calls to action. The presenter uses an animation from the site as inspiration and asks Claude to incorporate it into the example website.

3. Motion Sites

A showcase of animation-heavy sites featuring parallax, scrolling effects, 3D visuals, and animated backgrounds. It offers prompts for recreating or adapting designs, and many background videos are free to use. Some assets and its Claude Code MCP are paid.

The demo applies overlapping cards, 3D icons, and a cursor-following effect.

4. Inspo MCP

Provides browsable design references, palettes, components, and typography. Its MCP integration lets Claude search for suitable sites. The presenter asks it to find an AI-agency website, reviews its recommendations in a browser, and adapts a footer style from one of the references.

5. UI Skills

Links to free GitHub repositories and design resources for areas including animation, React, Next.js, forms, and 3D. After connecting its MCP to Claude Code, the presenter asks it to identify relevant skills and improve the example site’s animation.

The video also recommends Front-End Design, UI UX Pro Max, Impeccable, and Taste for creating or substantially redesigning sites.

6. 21st.dev

Offers ready-made UI components and sections, from individual buttons and calls to action to pricing and reviews. The presenter selects a pricing-section example, copies its prompt into Claude, and replaces a hard-to-read pricing layout with a clearer design featuring a mouse-reactive star-field background.

7. Refero Styles

Provides design-system prompts and downloadable Markdown files based on existing brands and websites. The files include details such as colors, typography, and components. The presenter uses an Apple-inspired design system to restyle the example site as a product page.

Recurring Workflow

Across the demonstrations, the recurring workflow is to select a reference or component, give it to Claude Code with clear instructions, and adapt it to the existing site rather than simply copying it. The presenter also notes that some resources are free, while certain assets or MCP features require payment.

Main Speaker and Resources

The video’s presenter, Duncan Rogoff, narrates the demonstrations. The showcased resources are Awwwards, Godly, Motion Sites, Inspo MCP, UI Skills, 21st.dev, and Refero Styles.

Rate this summary

Your feedback will help improve summaries.

Improve this summary

Reprocess with a stronger model when the summary feels incomplete or inaccurate.

Pro

Translate summary in another language

Pro

Ask questions to this video

Chat for follow-up questions, clarifications, and source-backed answers.

Coming soon

Share this summary

Original video