A curated toolkit for designing and building distinctive web interfaces — from visual research and component libraries to motion, design systems, and agent-ready tools.
Start with references, choose a component foundation, add motion with intent, then use the design-system resources to keep the result coherent.
- Design Inspiration
- Visual Foundations
- UI Component Libraries
- Animation & Interactive Effects
- MCP & Agent Tools
- UI Skills & Design Systems
- Guides
Reference libraries for finding visual directions, page patterns, and interaction ideas before designing.
- Curated Design - Browse hand-picked website inspiration across industries and styles.
- Refero Styles - Explore real websites organized by visual style.
- SaaSpo - Study SaaS websites, product pages, and conversion patterns.
- Collect UI - Browse daily UI concepts by interface pattern.
- Recent Design - Discover recently launched websites and emerging directions.
- Motion Sites - Find animated websites, sections, templates, and motion references.
- Design Engineer Tools - Discover tools for designing and building expressive interfaces.
- Component Gallery - Compare common UI component patterns across design systems.
- Landdding - Collection of web designs
Typography, color, and icon resources for establishing a coherent visual language before assembling components.
- Google Fonts - Browse and use open-source web typefaces.
- Coolors - Generate, refine, and test color palettes.
- Lucide - Use a clean, consistent open-source icon set.
- Phosphor Icons - Choose flexible icons across multiple weights and styles.
- Tabler Icons - Browse a large collection of customizable SVG icons.
- Iconoir - Add lightweight open-source icons to web interfaces.
Copyable foundations and expressive components for moving from a visual direction to production code.
- shadcn/ui - Accessible, customizable component source code you own.
- ReUI - React components and application blocks for product interfaces.
- Kokonut UI - Animated React components built with Tailwind CSS, shadcn/ui, and Motion.
- Canvas UI - Creative, framework-agnostic canvas and WebGL effects over live HTML.
- Beautiful UI - Reusable interface components and visual effects.
- BeUI - Modern components for polished web projects.
- Rare UI - Distinctive animated components for more expressive interfaces.
Libraries and playgrounds for purposeful movement, transitions, and interactive visual effects.
- Motion - Build production-grade JavaScript and React animations.
- Anime.js - Animate CSS, SVG, DOM attributes, and JavaScript objects with a lightweight engine.
- Lottie - Find and implement lightweight vector animations.
- Anim8 - Create polished animation assets and interactions.
- Transitions - Use copy-and-paste transition components and interaction patterns.
- Particles by Casberry - Experiment with interactive Three.js and WebGL particle systems.
Bring high-quality interface references directly into AI-assisted design and development workflows.
- Mobbin MCP - Give coding agents access to Mobbin's product-design reference library.
- 60fps Design MCP - Search app screens and interaction references from AI coding tools.
Rules and reusable systems that help a collection of screens feel like one intentional product.
- UI Skills - Apply practical constraints when building polished interfaces with agents.
- Impeccable - Give design and coding agents a structured UI/UX improvement workflow.
- Coss UI - Explore open-source components, patterns, and design guidance.
- Design System Checklist - Plan, build, document, and maintain a complete design system.
- You Don't Need Animations - Emil Kowalski on choosing purposeful motion instead of animating every interaction.
Found a useful web design or development resource? Open a pull request with the link, a short description, and the most relevant section.