frontend-design-resources

KO | EN

gitlite — search

#react #llm #go #android #deep-learning #linux #macos #nodejs #awesome #kubernetes #awesome-list #pytorch #ios #open-source

frontend-design-resources

(★ 304)

All-in-one resource kit for frontend devs & designer

파일 탐색기

최종 버전 다운로드 (.zip)

README.md

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Frontend & Design Resources

A curated collection of the best resources for frontend development and web design — including icons, UI libraries, animation tools, inspiration sites, and more.

---

## How to Use

- Browse categories for resources you need.
- Each link is labeled for quick identification.
- Suggestions are included to expand your toolkit.

---

## Table of Contents

- [Logos](#logos)
- [Icons](#icons)
- [Typography](#typography)
- [Stock Assets & Design Resources](#stock-assets--design-resources)
- [Backgrounds & Patterns](#backgrounds--patterns)
- [Screenshot & Mockups](#screenshot--mockups)
- [Screen Recording Tools](#screen-recording-tools)
- [UI Components & Libraries](#ui-components--libraries)
- [Animation Libraries](#animation-libraries)
- [CSS Tools & Generators](#css-tools--generators)
- [JavaScript Utilities](#javascript-utilities)
- [Code Playgrounds](#code-playgrounds)
- [Design Systems](#design-systems)
- [Prototyping Tools](#prototyping-tools)
- [Design Inspiration](#design-inspiration)
- [Color Palettes & Tools](#color-palettes--tools)
- [Showcase & Portfolio Platforms](#showcase--portfolio-platforms)
- [Bonus: Fun/Utility](#bonus-funutility)

---

## Logos

- [World Vector Logo](https://worldvectorlogo.com/) — Free SVG vector logos of popular brands.
- [Brandfetch](https://brandfetch.com/) — Instantly search and download official brand logos and assets.
- [Seeklogo](https://seeklogo.com/) — Large collection of free vector logos in multiple formats.
- [Logopond](https://logopond.com/) — Creative logo design inspiration and showcase.
- [Freepik - Logos](https://www.freepik.com/free-logos) — Thousands of free and premium logo vectors.
- [Simple Icons](https://simpleicons.org/) — SVG icons for popular brands.

---

## Icons

- [HugeIcons](https://hugeicons.com/icons) — Large icon collection
- [UXWing](https://uxwing.com/) — Free icons for web & design
- [Font Awesome](https://fontawesome.com/icons) — Popular icon toolkit
- [Iconify](https://icon-sets.iconify.design/) — Unified icon framework
- [Feather Icons](https://feathericons.com/) — Simple, clean open-source icons
- [Lucide](https://lucide.dev/) — Clean, consistent open-source icons
- [Tabler Icons](https://tabler.io/icons) — Sharp, customizable SVG icon set

---

## Typography

- [Google Fonts](https://fonts.google.com/) — Free web fonts
- [Adobe Fonts](https://fonts.adobe.com/) — Premium font library
- [Fontjoy](https://fontjoy.com/) — AI-powered font pairing tool
- [Type Scale](https://typescale.com/) — Typography scale generator

---

## Stock Assets & Design Resources

- [Unsplash](https://unsplash.com/) — High-quality free photos
- [Pexels](https://pexels.com/) — Free stock photos and videos
- [Pixabay](https://pixabay.com/) — Free images, vectors, and illustrations
- [Freepik](https://freepik.com/) — Free and premium design resources
- [Burst](https://burst.shopify.com/) — Free stock photos by Shopify
- [Freepik](https://www.freepik.com/) — Free and premium vectors, icons, logos, templates, and more for designers.

---

## Backgrounds & Patterns

- [PatternCraft](https://patterncraft.megh.me/) — Beautiful backgrounds for your next big thing
- [Hero Patterns](https://heropatterns.com/) — SVG background patterns
- [SVG Backgrounds](https://www.svgbackgrounds.com/) — Free customizable SVG backgrounds

---

## Screenshot & Mockups

- [PostSpark Screenshot](https://postspark.app/screenshot) — Generate device mockups from screenshots
- [Shots.so](https://shots.so/) — Create beautiful device mockups
- [Mockup Photos](https://mockup.photos/) — Free mockup images

---

## Screen Recording Tools

- [Cursorful](https://chromewebstore.google.com/detail/eihpmapodnppeemkhkbhikmggfojdkjd?utm_source=item-share-cb) — Chrome extension for screen recording
- [Loom](https://www.loom.com/) — Fast video messaging for work
- [CleanShot](https://cleanshot.com/) — Advanced screen recording (Mac)

---

## UI Components & Libraries

- [Uiverse](https://uiverse.io/) — Community-driven UI elements
- [Aceternity UI](https://ui.aceternity.com/) — Modern React components
- [Shadcn/UI](https://ui.shadcn.com/) — Customizable React components
- [ReactBits](https://www.reactbits.dev/) — Useful React component snippets
- [HeroUI](https://www.heroui.com/) — Beautiful React components
- [MagicUI](https://magicui.design/) — Animated React components
- [Chakra UI](https://chakra-ui.com/) — Accessible React component library
- [Headless UI](https://headlessui.com/) — Completely unstyled, accessible UI primitives
- [Park UI](https://park-ui.com/) — Open-source React components
- [DaisyUI](https://daisyui.com/) — Tailwind CSS component library
- [Float UI](https://floatui.com/) — Open-source Tailwind components
- [Flowbite](https://flowbite.com/) — Tailwind CSS components
- [Atomix UI](https://atomix-ui.vercel.app/) — Modern UI components
- [Radix UI](https://www.radix-ui.com/) — Unstyled, accessible React components
- [Material UI](https://mui.com/) — Popular React UI framework
- [NextBunny ](https://nextbunny.co/) — High-quality React components built for Next.js
- [Zennit ](https://zennitui.com/) — Copy-paste React + Tailwind components straight into your project, no installs, no hassle

---

## Animation Libraries

### JavaScript Animation

- [GSAP](https://gsap.com/) — Robust JavaScript animation platform
- [Motion One](https://motion.dev/) — Fast animation library
- [Anime.js](https://animejs.com/) — Lightweight and flexible JavaScript animation library.
- [Framer Motion](https://www.framer.com/motion/) — Production-ready React animation
- [LottieFiles](https://lottiefiles.com/) — Animate SVGs with JSON

### CSS Animation

- [Animate.css](https://animate.style/) — Cross-browser CSS animations
- [Hover.css](https://ianlunn.github.io/Hover/) — CSS hover effects
- [AniJS](https://anijs.github.io/) — Declarative CSS animations

---

## CSS Tools & Generators

- [CSS Grid Generator](https://grid.layoutit.com/) — Visual CSS Grid builder
- [Flexbox Froggy](https://flexboxfroggy.com/) — Learn Flexbox with a game
- [CSS Clip-Path Maker](https://bennettfeely.com/clippy/) — Visual clip-path generator
- [Box Shadow Generator](https://box-shadow.dev/) — CSS box-shadow generator
- [Gradient Generator](https://cssgradient.io/) — CSS gradient maker
- [Neumorphism.io](https://neumorphism.io/) — Soft UI CSS generator

---

## JavaScript Utilities

- [Particles.js](https://particles.js.org/) — Particle backgrounds
- [Locomotive Scroll](https://github.com/locomotivemtl/locomotive-scroll) — Smooth scrolling library
- [Lenis](https://lenis.darkroom.engineering/) — Smooth scroll for modern web
- [SwiperJS](https://swiperjs.com/) — Modern touch slider
- [ScrollReveal](https://scrollrevealjs.org/) — Animate elements on scroll
- [Splide](https://splidejs.com/) — Lightweight, flexible slider

---

## Code Playgrounds

- [CodePen](https://codepen.io/) — Frontend code playground
- [CodeSandbox](https://codesandbox.io/) — Online code editor for web development
- [StackBlitz](https://stackblitz.com/) — Instant dev environment
- [JSFiddle](https://jsfiddle.net/) — Test JavaScript, CSS, HTML online
- [Replit](https://replit.com/) — Collaborative online IDE

---

## Design Systems

- [Material Design](https://material.io/) — Google's design system
- [Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/) — Apple's design principles
- [Ant Design](https://ant.design/) — Enterprise-class UI design language
- [Atlassian Design System](https://atlassian.design/) — Atlassian's design system
- [Carbon Design System](https://carbondesignsystem.com/) — IBM's design system

---

## Prototyping Tools

- [Figma](https://figma.com/) — Collaborative design and prototyping
- [Sketch](https://sketch.com/) — Digital design toolkit (Mac)
- [Adobe XD](https://www.adobe.com/products/xd.html) — UI/UX design and prototyping
- [InVision](https://invisionapp.com/) — Digital product design platform
- [Principle](https://principleformac.com/) — Animation and interaction design

---

## Design Inspiration

- [Supahero](https://supahero.io) — UI inspiration
- [BentoGrids](https://bentogrids.com) — Bento grid layouts
- [CTA Gallery](https://cta.gallery) — Call-to-action inspiration
- [Landing Love](https://landing.love) — Landing page gallery
- [SaaSpo](https://saaspo.com) — SaaS landing page inspiration
- [Godly Website](https://godly.website) — Creative web design showcase
- [Dark Design](https://dark.design) — Dark-themed design inspiration
- [Navbar Gallery](https://navbar.gallery) — Navigation UI inspiration
- [60FPS Design](https://60fps.design) — High-performance UI inspiration
- [Refero](https://refero.design) — Curated design references
- [Land Book](https://land-book.com) — Landing page inspiration
- [Lapa Ninja](https://lapa.ninja) — Landing page gallery
- [21st Dev Templates](https://21st.dev) — Modern templates
- [Landingfolio](https://landingfolio.com) — Landing page inspiration
- [Shadcnblocks](https://shadcnblocks.com) — Shadcn UI blocks
- [Mobbin](https://mobbin.com) — Mobile app design patterns
- [Screenlane](https://screenlane.com) — UI inspiration
- [Minimal Gallery](https://minimal.gallery) — Minimalist web design
- [Httpster](https://httpster.net) — Inspirational websites
- [Site Inspire](https://siteinspire.com) — Web design showcase
- [Awwwards](http://awwwards.com) — Award-winning web design
- [Behance](http://behance.net) — Creative portfolio platform
- [Dribbble](https://dribbble.com/) — Design portfolio & inspiration
- [The FWA](http://thefwa.com) — Cutting-edge digital work

---

## Color Palettes & Tools

- [Adobe Color](https://color.adobe.com/) — Color palette generator
- [Coolors](https://coolors.co/) — Fast color palette generator
- [Color Hunt](https://colorhunt.co/) — Curated color palettes
- [Happy Hues](https://www.happyhues.co/) — Curated palettes with live preview

---

## Showcase & Portfolio Platforms

- [Dribbble](https://dribbble.com/) — Showcase your work
- [Behance](http://behance.net) — Creative portfolios
- [Awwwards](http://awwwards.com) — Web design awards

---

## Bonus: Fun/Utility

- [Readme Typing SVG](https://readme-typing-svg.herokuapp.com/demo/) — Animated typing SVG for README files

---

> _Contributions & suggestions are welcome!_

frontend-design-resources

파일 탐색기

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

frontend-design-resources

파일 탐색기

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README