# UI/UX Tools & Resources

Essential tools, websites, and resources for modern UI/UX development with Claude Code.

---

## 🎨 Design Inspiration

### Component Galleries

**Shadcn UI Examples** ⭐
- URL: https://ui.shadcn.com/examples
- Type: React component examples
- Why: Production-ready examples, copy-paste code
- Use for: Seeing modern patterns, learning component composition

**21st.dev Community Components**
- URL: https://21st.dev/community/components
- Type: Community-submitted modern components
- Why: Real-world examples, trending designs
- Use for: Inspiration, discovering new patterns

**Vibecoder Component Collection**
- URL: https://vibecoder.me/categories/ui-libraries
- Type: Curated UI library collection
- Why: Comprehensive library comparison
- Use for: Finding the right component library

**Fancy Components**
- URL: https://www.fancycomponents.dev/
- Type: Advanced animated components
- Why: Cutting-edge animations and effects
- Use for: Premium feel, micro-interactions

**Motion Primitives**
- URL: https://motion-primitives.com/
- Type: Animation library
- Why: Smooth, professional animations
- Use for: Adding polish to components

**Aceternity UI**
- URL: https://ui.aceternity.com/
- Type: Premium component library
- Why: Unique, modern designs
- Use for: SaaS products, portfolios

### Design System Examples

**Tailwind UI**
- URL: https://tailwindui.com/
- Type: Official Tailwind components
- Why: Professional, well-tested
- Use for: Learning Tailwind patterns

**Material Design 3**
- URL: https://m3.material.io/
- Type: Google's design system
- Why: Comprehensive, well-documented
- Use for: Learning design system structure

**Apple Human Interface Guidelines**
- URL: https://developer.apple.com/design/human-interface-guidelines/
- Type: Apple's design principles
- Why: Best-in-class UX thinking
- Use for: Understanding great design principles

---

## 🖼️ UI Inspiration

### General Inspiration

**Dribbble**
- URL: https://dribbble.com/
- Type: Design showcase
- Why: Trending designs from designers
- Use for: Visual inspiration, color schemes
- Tip: Search "web design 2024" for current trends

**Behance**
- URL: https://www.behance.net/
- Type: Design portfolio platform
- Why: Full project case studies
- Use for: Understanding design processes

**Awwwards**
- URL: https://www.awwwards.com/
- Type: Award-winning web design
- Why: Cutting-edge web experiences
- Use for: High-end inspiration (be careful not to over-design)

**Mobbin**
- URL: https://mobbin.com/
- Type: Mobile UI patterns
- Why: Real app screenshots, organized by pattern
- Use for: Mobile-specific inspiration
- Note: Paid ($10/month) but worth it

**Land-book**
- URL: https://land-book.com/
- Type: Landing page gallery
- Why: Curated landing pages
- Use for: Marketing pages, hero sections

### Specific Components

**UI Patterns**
- URL: https://ui-patterns.com/
- Type: Pattern library
- Why: Organized by component type
- Use for: Finding best practices for specific components

**Page Flows**
- URL: https://pageflows.com/
- Type: User flow examples
- Why: Complete user journeys
- Use for: Understanding user experience

---

## 🛠️ Development Tools

### Design Tools

**Figma**
- URL: https://figma.com/
- Type: Design tool
- Why: Industry standard, great for handoff
- Use for: Design-to-code workflows
- Tip: Install Figma to Code plugins

**Penpot**
- URL: https://penpot.app/
- Type: Open-source Figma alternative
- Why: Free, open-source
- Use for: Design work without subscription

### Color Tools

**Coolors** ⭐
- URL: https://coolors.co/
- Type: Color palette generator
- Why: Fast, intuitive, export to code
- Use for: Creating color schemes
- Tip: Lock colors you like, generate rest

**Contrast Ratio Checker**
- URL: https://contrast-ratio.com/
- Type: WCAG contrast checker
- Why: Simple, immediate feedback
- Use for: Ensuring accessibility

**Adobe Color**
- URL: https://color.adobe.com/
- Type: Color wheel & schemes
- Why: Professional color theory tools
- Use for: Advanced color harmonies

**Tailwind Color Shades**
- URL: https://javisperez.github.io/tailwindcolorshades/
- Type: Tailwind color generator
- Why: Generate full Tailwind color scales
- Use for: Custom Tailwind colors

### Typography Tools

**Google Fonts**
- URL: https://fonts.google.com/
- Type: Free web fonts
- Why: Huge selection, web-optimized
- Use for: Finding fonts
- Tip: Filter by "Trending" for popular choices

**Font Pair**
- URL: https://www.fontpair.co/
- Type: Font pairing suggestions
- Why: Pre-matched font combinations
- Use for: Choosing heading + body fonts

**Typescale**
- URL: https://typescale.com/
- Type: Typography scale generator
- Why: Creates harmonious type scales
- Use for: Setting up typography system

**Fluid Type Scale**
- URL: https://www.fluid-type-scale.com/
- Type: Responsive typography calculator
- Why: Generate fluid (responsive) font sizes
- Use for: Advanced responsive typography

### Icon Libraries

**Lucide Icons** ⭐
- URL: https://lucide.dev/
- Type: Icon library (fork of Feather)
- Why: Beautiful, consistent, many icons
- Use for: Most projects
- Install: `npm install lucide-react`

**Hero Icons**
- URL: https://heroicons.com/
- Type: Icon library by Tailwind team
- Why: Pairs well with Tailwind
- Use for: Tailwind projects

**Phosphor Icons**
- URL: https://phosphoricons.com/
- Type: Flexible icon family
- Why: Multiple weights, extensive
- Use for: When you need variety

**Iconify**
- URL: https://iconify.design/
- Type: Unified icon framework
- Why: Access 100+ icon sets
- Use for: Finding any icon

### Animation Tools

**Framer Motion**
- URL: https://www.framer.com/motion/
- Type: React animation library
- Why: Production-ready, powerful
- Use for: React animations
- Install: `npm install framer-motion`

**GSAP**
- URL: https://greensock.com/gsap/
- Type: JavaScript animation library
- Why: Industry standard, powerful
- Use for: Complex animations

**Lottie**
- URL: https://lottiefiles.com/
- Type: JSON-based animations
- Why: Designer-friendly, lightweight
- Use for: Illustrations, loading states

---

## 🧪 Testing & Validation Tools

### Accessibility

**WAVE** ⭐
- URL: https://wave.webaim.org/
- Type: Accessibility checker
- Why: Visual feedback, easy to use
- Use for: Quick accessibility audits

**Axe DevTools**
- URL: https://www.deque.com/axe/devtools/
- Type: Browser extension
- Why: Detailed accessibility reports
- Use for: Development-time checking

**Color Oracle**
- URL: https://colororacle.org/
- Type: Color blindness simulator
- Why: See your design as color blind users do
- Use for: Color accessibility testing

### Responsive Design

**Responsively**
- URL: https://responsively.app/
- Type: Desktop app for responsive testing
- Why: View multiple breakpoints simultaneously
- Use for: Responsive development

**Browser DevTools**
- Built into Chrome, Firefox, Edge
- Why: Free, powerful, always available
- Use for: Daily development

### Performance

**Lighthouse**
- Built into Chrome DevTools
- Type: Performance auditor
- Why: Comprehensive metrics
- Use for: Performance, accessibility, SEO

**PageSpeed Insights**
- URL: https://pagespeed.web.dev/
- Type: Google's performance tool
- Why: Real-world metrics
- Use for: Production site testing

### Visual Regression

**Percy**
- URL: https://percy.io/
- Type: Visual testing platform
- Why: Automated screenshot comparison
- Use for: Catching unintended changes

**Chromatic**
- URL: https://www.chromatic.com/
- Type: Visual testing for Storybook
- Why: Integrated with Storybook
- Use for: Component library testing

---

## 📚 Learning Resources

### Documentation

**MDN Web Docs**
- URL: https://developer.mozilla.org/
- Type: Web technology docs
- Why: Authoritative, comprehensive
- Use for: HTML, CSS, JavaScript reference

**Tailwind CSS Docs**
- URL: https://tailwindcss.com/docs
- Type: Tailwind documentation
- Why: Excellent docs, searchable
- Use for: Tailwind reference

**CSS-Tricks**
- URL: https://css-tricks.com/
- Type: CSS articles and guides
- Why: Practical examples, well-explained
- Use for: Learning CSS techniques

### Courses & Tutorials

**Frontend Masters**
- URL: https://frontendmasters.com/
- Type: Video courses
- Why: High-quality, expert instructors
- Topics: React, CSS, Design Systems

**Level Up Tutorials**
- URL: https://levelup.video/
- Type: Video tutorials
- Why: Practical, real-world focused
- Topics: Modern web development

**Scrimba**
- URL: https://scrimba.com/
- Type: Interactive coding
- Why: Learn by doing, hands-on
- Topics: CSS, React, JavaScript

### Blogs & Articles

**Smashing Magazine**
- URL: https://www.smashingmagazine.com/
- Type: Web design/development blog
- Why: In-depth articles, current trends

**A List Apart**
- URL: https://alistapart.com/
- Type: Web design thinking
- Why: Thoughtful, principle-driven

**Dev.to**
- URL: https://dev.to/
- Type: Developer community
- Why: Practical tips, community insights

---

## 🤖 AI & Automation Tools

### AI Design Tools

**v0.dev** ⭐
- URL: https://v0.dev/
- Type: AI UI generation (by Vercel)
- Why: Generate React components from prompts
- Use for: Rapid prototyping, inspiration
- Tip: Use to get ideas, then refine with Claude

**Galileo AI**
- URL: https://www.usegalileo.ai/
- Type: AI design tool
- Why: Generate full page designs
- Use for: Quick mockups

### Chrome Extensions

**WhatFont**
- Type: Font identifier
- Why: Identify fonts on any website
- Use for: Researching designs

**ColorZilla**
- Type: Color picker
- Why: Pick colors from any webpage
- Use for: Extracting color schemes

**Dimensions**
- Type: Measurement tool
- Why: Measure spacing and sizes
- Use for: Analyzing designs

**Responsive Viewer**
- Type: Multi-viewport viewer
- Why: Test multiple sizes at once
- Use for: Responsive testing

---

## 🎓 Design Systems

**Component Gallery**
- URL: https://component.gallery/
- Type: Component examples from design systems
- Why: Learn from the best
- Use for: Component patterns

**Adele**
- URL: https://adele.uxpin.com/
- Type: Design system repository
- Why: Collection of public design systems
- Use for: Research, inspiration

**Design Systems Repo**
- URL: https://designsystemsrepo.com/
- Type: Curated design systems
- Why: Real-world examples
- Use for: Learning structure

---

## 💡 Workflow Recommendations

### Essential Daily Tools

1. **Chrome DevTools** - Inspect, test, debug
2. **Figma** - Design and collaborate
3. **VS Code** - Code editor
4. **Coolors** - Quick color schemes
5. **Lucide Icons** - Icon library

### Weekly Tools

1. **Dribbble/Behance** - Fresh inspiration
2. **Lighthouse** - Performance checks
3. **WAVE** - Accessibility audits
4. **Responsively** - Responsive testing

### Project Setup Tools

1. **Shadcn UI** - Component library
2. **Tailwind CSS** - Styling
3. **Framer Motion** - Animations
4. **Radix UI** - Headless components (via Shadcn)

---

## 🔖 Quick Links Bookmark Folder

Copy these into a "UI/UX Tools" bookmark folder:

```
📁 UI/UX Tools
  📁 Inspiration
    🔖 Shadcn UI Examples
    🔖 21st.dev
    🔖 Dribbble
    🔖 Mobbin

  📁 Colors
    🔖 Coolors
    🔖 Contrast Ratio
    🔖 Tailwind Color Shades

  📁 Typography
    🔖 Google Fonts
    🔖 Font Pair
    🔖 Typescale

  📁 Icons
    🔖 Lucide
    🔖 Hero Icons

  📁 Testing
    🔖 WAVE
    🔖 PageSpeed Insights
    🔖 Responsively App

  📁 Learning
    🔖 MDN
    🔖 Tailwind Docs
    🔖 CSS-Tricks
```

---

**Equip yourself with the right tools and build better UIs!** 🛠️
