# Resources

> Curated tools, articles, videos, and templates I actually use for designers and builders working in AI and product.

90 resources total.

- **[Mobbin - UI & UX design inspiration](https://mobbin.com/)**: A go-to library for real-world UI patterns and UX flows from popular apps.
- **[https://youtu.be/XOtHjA8THCw?si=SZA1MIvui32yhJWA](https://youtu.be/XOtHjA8THCw?si=SZA1MIvui32yhJWA)**
- **[3dicons](https://3dicons.co)**: 1,440+ open-source 3D icons. CC0 license, no attribution needed.
- **[Absurd Design](https://absurd.design)**: Surrealist hand-drawn illustrations for distinctive projects
- **[Aceternity UI](https://ui.aceternity.com)**: Stunning animated components using Framer Motion. The 'magic effects' library.
- **[Animate.css](https://animate.style)**: 50+ ready-to-use CSS animations requiring zero JavaScript
- **[Anime.js](https://animejs.com)**: Lightweight, powerful CSS/SVG/DOM animations with simple API
- **[Ant Design](https://ant.design)**: Enterprise React UI library with 91.5k+ GitHub stars
- **[AOS](https://michalsnik.github.io/aos)**: Animate on scroll library with simple data-attribute setup
- **[Banani](https://banani.co/references)**: Free Mobbin alternative with 1,000+ app screens. No registration required.
- **[DaisyUI](https://daisyui.com)**: Most popular Tailwind CSS component library. Reduces HTML by 70%.
- **[Fontshare](https://www.fontshare.com/)**: Quality fonts. Free. A collection of professional-grade fonts free for personal and commercial use.
- **[Framer Motion](https://motion.dev)**: 12M+ monthly npm downloads. Physics-based animations for React.
- **[Google Fonts](https://fonts.google.com/)**: Browse and download fonts for web and product design.
- **[GSAP](https://gsap.com)**: Industry standard animation library, now completely FREE. Includes ScrollTrigger.
- **[Headless UI](https://headlessui.com)**: Completely unstyled UI components from Tailwind Labs with perfect Tailwind integration
- **[Heroicons](https://heroicons.com)**: 450+ clean SVG icons from the Tailwind creators
- **[Humaaans](https://humaaans.com)**: Mix-and-match customizable people with diverse representation
- **[Lordicon](https://lordicon.com)**: 39,600+ animated icons with hover, loop, and morph triggers
- **[LottieFiles](https://lottiefiles.com)**: 800,000+ free/premium animations with creator tools
- **[Lucide](https://lucide.dev)**: 1,500+ consistent open-source icons. Community-driven successor to Feather.
- **[Magic UI](https://magicui.design)**: 150+ free animated React components with 3D effects. Make AI-generated UIs feel crafted.
- **[Radix UI](https://radix-ui.com)**: Unstyled, accessible UI primitives. Used by Linear, Vercel, and Supabase.
- **[React Spring](https://react-spring.dev)**: Physics-based spring dynamics for natural-feeling motion
- **[Shadcn Blocks](https://shadcnblocks.com)**: 1,110+ blocks and components for shadcn/ui with CLI installation
- **[shadcn/ui](https://ui.shadcn.com)**: Copy-paste React components built on Radix UI and Tailwind. The most popular component system for 2025.
- **[Tabler Icons](https://tablericons.com)**: 5,900+ icons with consistent 2px strokes
- **[unDraw](https://undraw.co)**: Customizable SVG illustrations. Change colors via hex code before download.
- **[Velvetyne](https://velvetyne.fr)**: Experimental open-source fonts. Free and distinctive.
- **[Accessibility Insights](https://accessibilityinsights.io)**: Microsoft's free tool with FastPass automated checks and guided testing
- **[Accessible Colors](https://accessible-colors.com)**: Auto-suggests closest accessible alternative when colors fail WCAG
- **[Affinity](https://www.affinity.studio/)**: All-in-one creative suite with vector, raster, and publishing tools. One-time purchase Adobe Creative Cloud alternative for Mac, Windows, and iPad.
- **[Adobe LLM Optimizer](https://business.adobe.com/products/llm-optimizer.html)**: Enterprise GEO tracking across ChatGPT, Gemini, Perplexity, Claude
- **[Anima](https://animaapp.com)**: Complete design to deploy pipeline with one-click deployment
- **[Axe DevTools](https://deque.com/axe)**: Industry standard with 3 billion+ downloads. Catches 57% of issues, zero false positives.
- **[Blush](https://blush.design)**: Multiple artist collections through Figma/Sketch plugins
- **[Bolt.new](https://bolt.new)**: Full-stack development in browser with zero configuration. Perfect for weekend hackathons.
- **[Builder.io Visual Copilot](https://builder.io/m/design-to-code)**: AI converts Figma to React, Vue, Svelte, Angular with Tailwind support
- **[Colormind](https://colormind.io)**: AI generates palettes from movies, art, and games. Daily dataset changes.
- **[Convex](https://convex.dev)**: Reactive backend platform with real-time sync, serverless functions, and a built-in database. Great for modern web apps.
- **[Coolors](https://coolors.co)**: Generate color palettes instantly. Press spacebar to generate. 10M+ palettes created.
- **[Cursor](https://cursor.sh)**: AI-first code editor built on VS Code. Used by 7M+ developers.
- **[Figma Contrast Checker](https://figma.com/color-contrast-checker)**: Built-in Figma tool with color blindness simulation
- **[Fontjoy](https://fontjoy.com)**: AI-powered font pairing generator. Click to generate harmonious combinations instantly.
- **[Framer](https://framer.com)**: Designer-favorite with AI layout generation and fast load times
- **[Fronty](https://fronty.com)**: Convert any image to HTML/CSS. Product Hunt #1 Product of the Day.
- **[Huemint](https://huemint.com)**: See AI-generated colors applied to templates (logos, websites, graphics) before committing
- **[Iconify](https://iconify.design)**: Aggregates 200,000+ icons from 100+ sets with unified API
- **[Khroma](https://khroma.co)**: AI learns your color preferences to generate personalized palettes
- **[Locofy.ai](https://locofy.ai)**: Figma to production code. Supports React, Next.js, React Native with pixel-perfect accuracy.
- **[Lovable](https://lovable.dev)**: Most beginner-friendly AI app builder with natural language and Supabase integration
- **[Neon](https://neon.tech)**: Serverless Postgres with branching, autoscaling, and a generous free tier. Build faster with instant database provisioning.
- **[Replit Agent](https://replit.com)**: AI builds entire apps from planning through deployment
- **[Rive](https://rive.app)**: Create interactive animations with state machines
- **[Schema Markup Generator](https://technicalseo.com/tools/schema-markup-generator)**: Generate JSON-LD structured data for AI and search engines
- **[Schemantra](https://schemantra.com)**: Supports 1,400+ Schema.org types with knowledge graph tools
- **[Stark](https://getstark.co)**: Figma plugin for contrast checking, vision simulation, and focus order testing
- **[Storyset](https://storyset.com)**: Customizable AND animated illustrations in browser. Completely free.
- **[Supabase](https://supabase.com)**: Open-source Firebase alternative with PostgreSQL. Powers Bolt, Lovable.
- **[v0 by Vercel](https://v0.dev)**: Generate production-quality React components from text descriptions using shadcn/ui
- **[WAVE](https://wave.webaim.org)**: Visual accessibility evaluation with inline annotations. Excellent for learning.
- **[WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker)**: Industry standard for checking WCAG accessibility compliance
- **[Webflow](https://webflow.com)**: Produces the cleanest code output. Semantic HTML/CSS that's production-grade.
- **[60fps](https://60fps.design)**: Micro-interactions and animation examples for polished interfaces
- **[Awwwards](https://www.awwwards.com/)**: Website awards and best web design trends. A curated showcase of cutting-edge web design and development.
- **[Color Hunt](https://colorhunt.co)**: Community of trending color palettes, Product Hunt style
- **[Commerce Cream](https://commercecream.com)**: Shopify store design inspiration
- **[Fontpair](https://fontpair.co)**: Hand-picked Google Font combinations curated by experts
- **[Fonts In Use](https://fontsinuse.com)**: Archive of fonts in real-world applications across media
- **[Footer Design](https://footer.design)**: Creative footer design examples
- **[Free Design Resources](https://freedesignresources.net/)**: A mix of free design resources across UI, graphics, mockups, and more.
- **[Godly - Web design inspiration](https://godly.website/)**: A curated directory of high-quality website and app design references.
- **[Minimal Gallery](https://minimal.gallery)**: Hand-picked minimalist design examples. Curated daily by a single designer for exceptional quality.
- **[SaaS Landing Page](https://saaslandingpage.com)**: 890+ SaaS landing pages showing fonts, colors, and tech stacks used
- **[Supahero](https://supahero.co)**: Hero section inspiration and examples
- **[Typewolf](https://typewolf.com)**: Industry standard for typography inspiration, trends, and font identification
- **[v-fonts](https://v-fonts.com)**: Browse and explore variable fonts
- **[Astro Docs](https://docs.astro.build)**: Astro static site generator documentation
- **[Framer Motion Docs](https://motion.dev/docs)**: Motion (formerly Framer Motion) animation library
- **[GSAP Docs](https://gsap.com/docs)**: GreenSock animation platform documentation
- **[Your Website Works for Google. But Does It Work for AI?](https://www.linkedin.com/posts/nasifsalaam_i-found-out-why-ai-systems-cant-see-most-activity-7366440054954557444-pfPx)**: A quick guide on why many business websites are effectively invisible to AI systems, and what to change so your site is readable by modern assistants.
- **[MDN Web Docs](https://developer.mozilla.org)**: Comprehensive web technology reference by Mozilla
- **[Next.js Docs](https://nextjs.org/docs)**: Complete Next.js framework documentation
- **[Radix UI Docs](https://radix-ui.com/primitives/docs)**: Documentation for accessible UI primitives
- **[React Docs](https://react.dev)**: Official React documentation and learning resources
- **[shadcn/ui Docs](https://ui.shadcn.com/docs)**: Complete documentation for shadcn/ui component library
- **[Supabase Docs](https://supabase.com/docs)**: Supabase backend and database documentation
- **[Tailwind CSS Docs](https://tailwindcss.com/docs)**: Official Tailwind CSS documentation and reference
- **[TypeScript Docs](https://www.typescriptlang.org/docs)**: Official TypeScript language documentation
- **[Vercel Docs](https://vercel.com/docs)**: Vercel deployment and hosting documentation