Skip to content

tools.md

Latest commit

 

History

History
496 lines (384 loc) · 11.4 KB

tools.md

File metadata and controls

496 lines (384 loc) · 11.4 KB

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

Vibecoder Component Collection

Fancy Components

Motion Primitives

Aceternity UI

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

🖼️ 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

Adobe Color

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

Tailwind Color Shades

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

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

Iconify

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

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

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

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

Tailwind CSS Docs

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

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

A List Apart

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

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

💡 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! 🛠️