A purple gradient, a centered headline, and three icon cards underneath. If you’ve seen any landing pages built with AI in the last few months, you know the look. Claude, ChatGPT, and their peers are writing great code these days. But without specific instructions, their designs always default to the same safe, standard solutions.
The good news is that you can change that. Give the AI real templates and building blocks that designers have already created. We’ve put together 26 resources, categorized by use case, and show you how to feed them to Claude in three steps. This selection is based on a list shared by developer Prajwal Tomar on X. We’ve adapted it for teams in Germany and added some legal notes.
Why do AI interfaces so often look the same?
Without guidance, AI models fall back on the most common patterns in their training data. That’s why so many AI-generated interfaces look so similar. The solution is concrete references: screenshots of designs you like, ready-made component libraries, and a file containing your colors, fonts, and spacing.
This is relevant for marketing teams because Claude is doing much more than just writing text these days. With Claude Code or Artifacts, you can create landing pages, internal tools, and prototypes in just a few hours. Whether the result looks like your brand or just another generic AI page depends entirely on the instructions you provide.
Using Claude for free and want to get a solid overview? Check out our guide on Claude’s free features, limits, and best alternatives.
Component libraries and inspiration sources: two different things
The resources in this list fall into two groups, and different rules apply to each.
Component libraries like shadcn/ui or Magic UI are built for you to integrate into your projects. Most are open source and under the MIT license, which allows for commercial use. You copy the code, customize it, and publish it.
Inspiration galleries like Mobbin or Godly showcase designs from real companies. These designs belong to the respective companies and designers and are generally protected by copyright. Use them to gather ideas for layout, color palettes, or animations. Replicating an entire page one-to-one, however, is legally risky and doesn't really help your brand.
How to give Claude design instructions in three steps
- Define the direction: Pick two or three designs from the galleries below that you like. Show Claude the screenshots and describe what you like about each one, for example, the typography of one page and the pricing table layout of another.
- Specify real components: Tell Claude which library to use, for example, shadcn/ui for all UI elements. This ensures it uses proven building blocks instead of creating new ones from scratch every time.
- Add your own touch: Adjust colors, text, and spacing until the interface looks like you. Keep what works and ditch the rest.
A prompt for steps 1 and 2 could look like this: "Build a landing page for our product. Use the first screenshot as a guide for the layout and the second for the typography. Use shadcn/ui for all components and refer to the DESIGN.md file in the project folder for colors, fonts, and spacing."
At bakedwith, we use a design system file like this for our own brand. Claude uses it to pull our colors, fonts, and spacing, for example, for the graphics in our articles.
Get a free strategy call and discover how AI can help you automate workflows, create better content, and scale your marketing.
Book a call
The five resources to get you started
If you're short on time, start with these five:
shadcn/ui is the foundation that many other libraries are built on. The project has over 125,000 stars on GitHub (as of October 2026). Because it's so widely used, Claude knows the components well and usually gets them right on the first try.
21st.dev provides a ready-to-use prompt for every component. Just paste it into Claude Code, and the component will be created directly in your project. The provider offers a free daily quota, with more copies available through a membership.
Magic UI provides those little touches like counting numbers, scrolling client logo banners, or animated borders. The library is designed to work with shadcn/ui and has over 22,000 GitHub stars.
Mobbin is especially useful for app projects. You can see how popular apps handle onboarding or paywalls. According to the provider, the Pro plan can be connected to AI agents via MCP, allowing Claude to search the library itself.
DESIGN.md is the least well-known but particularly handy for Claude. You download a design system as a single file, place it next to the README in your project folder, and instruct Claude to follow it.
All 26 resources by use case
Component libraries for your projects
- shadcn/ui: UI elements like buttons, forms, dialogs, and tables that you copy into your project. MIT license.
- 21st.dev: Components, templates, and themes with prompts to copy for Claude Code.
- Magic UI: Animated components designed for shadcn/ui. MIT licensed.
- Aceternity UI: Eye-catching hero sections and effects you can copy, featuring free components plus a pro version.
- Motion Primitives: Open-source animated components for React and Tailwind. MIT licensed.
- Uiverse: A large community collection of UI elements in HTML and CSS, Tailwind, or React, also available for commercial projects.
- SmoothUI: Animated components that integrate directly into shadcn/ui.
- Shadcnblocks: Hundreds of ready-made page sections based on shadcn/ui, mostly paid.
- MicroKit: Small micro-interactions like animated buttons, hover effects, and tabs. MIT license.
Design systems that Claude can read
- DESIGN.md: Hundreds of design systems, each as a single file.
- Refero Styles: Styles from real websites with a matching DESIGN.md file, great for comparing colors, fonts, and spacing.
Inspiration for entire websites
- Mobbin: Screens from real apps and websites, updated weekly.
- Godly: A curated collection of exceptionally well-designed websites.
- Minimal Gallery: Selected, minimalist websites with new entries added daily.
- Awwwards: A well-known award for web design, great for checking out the latest agency work.
- Landing.love: Landing pages captured on video so you can see how the animations actually play out.
Inspiration for individual page sections
- Supahero: Hero sections only, the top part of a page.
- Navbar Gallery: Navigation bars.
- Footer Design: Footers, sortable by type and style.
- CTA Gallery: Call-to-action sections.
- Pricing Pages: Pricing pages from SaaS companies, online shops, and agencies.
Animation
- Motion In: Interactive sections with physics and cursor effects, each with a prompt for your AI.
- Anime.js: Lightweight JavaScript library for custom animations, over 73,000 GitHub stars, MIT license.
Icons, illustrations, and fonts
- 3dicons: Free 3D icons, also available for commercial projects without attribution.
- Kitbitz: Hand-drawn illustrations, free for commercial use and, according to the provider, connectable via MCP.
- Font In Logo: Shows which fonts well-known brands use in their logos.
What you should look out for
- The next cookie-cutter look: If everyone uses the same libraries, sites start to look the same again. Your colors, fonts, and copy make the difference.
- Less animation: One or two well-placed animations look high-end. If you add every animation you find, the site will look cluttered and slow down.
- Licenses and costs: Most libraries here are free and under an MIT license. However, Aceternity UI, Magic UI, Shadcnblocks, 21st.dev, and Motion In have paid tiers. Check what you're allowed to use before going live.
- Hosting fonts in compliance with data privacy: Since a ruling by the Munich Regional Court in January 2022, dynamically loading Google Fonts without consent is considered a data privacy violation. Have Claude host fonts locally instead and verify this in the final code.
- Contrast and accessibility: Fancy gradients and light gray text look nice, but they're often hard to read. For many digital consumer services, the Accessibility Strengthening Act (Barrierefreiheitsstärkungsgesetz) has been in effect since June 28, 2025.
- Galleries are just for inspiration: Use them for ideas on layout and style, but don't copy entire pages.
And if one of these libraries saves you a lot of work: most are maintained by small teams or individuals. A star on GitHub or a purchased Pro plan goes a long way.
Design libraries are shortcuts, not a substitute for brand identity: "Tools like shadcn/ui save weeks of development time. But the difference between a generic AI site and an authentic brand experience lies in the fine-tuning. Use libraries for the foundation, but invest the saved time into your own typography and content." — Jens Bohse, Co-Founder
Conclusion: Better AI interfaces start with better templates
Claude builds great interfaces once it has the right references. If you provide two or three examples, specify a component library, and include your brand's design system file, you'll get results that actually look like your company. The five resources in the table above are enough to get you started.
The best way to start: take an existing page you want to improve, find three examples on Godly or Mobbin, and have Claude rebuild the page using shadcn/ui. Before you start, add a DESIGN.md file with your brand colors and fonts to your project folder.
If you'd like to use Claude in your marketing and sales processes, we'd be happy to help through our AI consulting services.
FAQ: Frequently asked questions about designing with Claude
Can Claude do web design?
Yes, Claude writes clean frontend code and implements layouts reliably. Without specific instructions, however, it defaults to standard patterns. By providing screenshots, a component library, and a design system file, the results become much more unique.
What is shadcn/ui?
shadcn/ui is an open-source collection of UI components for React, such as buttons, forms, dialogs, and tables. You copy the components directly into your project and can customize them however you like. The project is under an MIT license and has over 125,000 stars on GitHub.
Am I allowed to copy designs from galleries like Mobbin?
No, at least not one-to-one. The designs shown belong to their respective companies and are generally protected by copyright. You are welcome to use ideas for layout, color schemes, or interactions, but rebuilding an entire site is risky.
What is a DESIGN.md file?
A Markdown file that describes a project's design system: colors, fonts, spacing, and component rules. You place it in the project folder, and Claude follows these guidelines when building the interface. You can find templates on sites like designmd.ai and Refero Styles.
Which design resources for Claude are free?
Most of them. shadcn/ui, Motion Primitives, MicroKit, and Anime.js are completely free and released under the MIT license. Magic UI, Aceternity UI, and 21st.dev offer free options with paid tiers, while Shadcnblocks is primarily paid.
Posted by:
Jens is the co-founder of bakedwith, a boutique consultancy firm specialising in smart automation and AI. He helps medium-sized companies and corporations to optimise processes, reduce manual work and achieve growth through efficient workflows. Previously, he was Growth Lead at OMR and worked as a freelancer, helping numerous companies optimise their CRM and automation systems. Jens is passionate about combining growth and efficiency to enable teams to focus on what matters most.
.webp)
.webp)
