AI Agent Toolkit · Zero Bloat · 100% Free

Tell Your AI Agent What to Build
We Install Only What You Need.

A single NPM command. Your AI agent describes the output — DesignForge picks the exact packages, nothing more. No bloat, no conflicts, no unused dependencies.

Change your mind? We clean up the old packages too.

100+
Free Packages
1
Command to Start
Zero
Bloat
5min
To First Build
Powered by these tools
shadcn/uishadcn/ui
DaisyUIDaisyUI
Radix UIRadix UI
MantineMantine
Chakra UIChakra UI
FlowbiteFlowbite
BootstrapBootstrap
Tailwind CSSTailwind CSS
Pico CSSPico CSS
Open PropsOpen Props
LucideLucide
Tabler IconsTabler Icons
HeroiconsHeroicons
Phosphor IconsPhosphor Icons
Remix IconRemix Icon
Feather IconsFeather Icons
Google FontsGoogle Fonts
FontsourceFontsource
DaFontDaFont
CoolorsCoolors
Adobe ColorAdobe Color
Color HuntColor Hunt
Framer MotionFramer Motion
GSAPGSAP
Anime.jsAnime.js
shadcn/uishadcn/ui
DaisyUIDaisyUI
Radix UIRadix UI
MantineMantine
Chakra UIChakra UI
FlowbiteFlowbite
BootstrapBootstrap
Tailwind CSSTailwind CSS
Pico CSSPico CSS
Open PropsOpen Props
LucideLucide
Tabler IconsTabler Icons
HeroiconsHeroicons
Phosphor IconsPhosphor Icons
Remix IconRemix Icon
Feather IconsFeather Icons
Google FontsGoogle Fonts
FontsourceFontsource
DaFontDaFont
CoolorsCoolors
Adobe ColorAdobe Color
Color HuntColor Hunt
Framer MotionFramer Motion
GSAPGSAP
Anime.jsAnime.js
LottieFilesLottieFiles
AutoAnimateAutoAnimate
Three.jsThree.js
React Three FiberReact Three Fiber
p5.jsp5.js
Babylon.jsBabylon.js
tsParticlestsParticles
Chart.jsChart.js
D3.jsD3.js
RechartsRecharts
ApexChartsApexCharts
Apache EChartsApache ECharts
UnsplashUnsplash
PexelsPexels
PixabayPixabay
SVG RepoSVG Repo
React Hook FormReact Hook Form
FormikFormik
ZodZod
DribbbleDribbble
AwwwardsAwwwards
StorysetStoryset
Animate.cssAnimate.css
Animate on ScrollAnimate on Scroll
GSAP ScrollTriggerGSAP ScrollTrigger
LottieFilesLottieFiles
AutoAnimateAutoAnimate
Three.jsThree.js
React Three FiberReact Three Fiber
p5.jsp5.js
Babylon.jsBabylon.js
tsParticlestsParticles
Chart.jsChart.js
D3.jsD3.js
RechartsRecharts
ApexChartsApexCharts
Apache EChartsApache ECharts
UnsplashUnsplash
PexelsPexels
PixabayPixabay
SVG RepoSVG Repo
React Hook FormReact Hook Form
FormikFormik
ZodZod
DribbbleDribbble
AwwwardsAwwwards
StorysetStoryset
Animate.cssAnimate.css
Animate on ScrollAnimate on Scroll
GSAP ScrollTriggerGSAP ScrollTrigger
The Problem

Frontend Setup Is Still Too Hard

You shouldn\'t need to hand-pick packages, read compatibility docs, and clean up abandoned dependencies just to build a UI. Your AI agent should handle all of that.

Too Much Bloat

Installed a massive UI library for one button? A full animation suite for one fade-in? Most projects carry 80% unused dependencies. Wasted space, slower builds.

Dependency Hell

Found the perfect component library? Hope it doesn't conflict with the other three you already installed. npm audit becomes your daily ritual.

Wasted Time Curating

Hunting for the right packages, checking compatibility, reading docs, managing versions. Every project starts with hours of setup before a single line of UI code.

How It Works

Three Steps from Idea to UI

Your AI agent handles the discovery. DesignForge handles the installation. You just tell it what to build.

01

Tell Your AI Agent What You Need

"Build me a premium landing page." That's it. Your AI agent analyzes your requirement and determines the exact packages needed — nothing more, nothing less.

Learn more
02

DesignForge Picks the Packages

Our CLI scans the requirement and installs only what's needed. shadcn/ui for components? Framer Motion for animations? Geist for fonts? Done. The rest stays out.

03

Instant, Clean Frontend

A fully working frontend built from free, open-source packages. Change your mind? Run cleanup — old packages and code are removed. Your space stays pristine.

Learn more
All Resources

The Package Catalog

Every package hand-curated. Your AI agent browses and picks only what\'s needed for your build.

19 packages

UI Components

Copy-paste & component libraries for React, Vue, Tailwind, and more

Aceternity UI

Aceternity UI

Stunning animated React components with Framer Motion. Premium landing pages.

npm i @aceternity/ui
Ark UI

Ark UI

Headless UI library for React, Vue, Solid. Accessible, unstyled primitives.

npm i @ark-ui/react
Chakra UI

Chakra UI

Simple, modular React components. Great accessibility out of the box.

npm i @chakra-ui/react
DaisyUI

DaisyUI

Tailwind CSS component classes. 50+ components, 35+ themes.

npm i daisyui
Flowbite

Flowbite

1000+ Tailwind components for HTML, React, Vue, and Figma.

npm i flowbite
MagicUI

MagicUI

Magical animations — sparkles, meteors, glows, beams. Drop-in React components.

npm i magicui
Mantine

Mantine

100+ React components with hooks. Dark mode, notifications, dates, and more.

npm i @mantine/core @mantine/hooks
Open Props

Open Props

CSS custom properties for design tokens. Animations, colors, spacing, borders.

npm i open-props
Park UI

Park UI

Beautiful, headless UI components built with Ark UI + Panda CSS.

npm i @park-ui/panda
Pico CSS

Pico CSS

Minimal CSS framework. Semantic HTML, zero classes, beautiful defaults.

npm i @picocss/pico
Radix UI

Radix UI

Headless, accessible React UI primitives. The foundation of shadcn/ui.

npm i @radix-ui/react-dialog
shadcn/ui

shadcn/ui

Copy-paste React components built with Radix UI + Tailwind. Best in class.

npx shadcn@latest init
Sky UI

Sky UI

Beautiful, open-source Tailwind CSS components for your next project. Copy-paste, free as the sky.

Copy components from sky-ui.com
Ariakit

Ariakit

Accessible React UI components. Formerly Reakit. Great for custom design systems.

npm i ariakit
Bootswatch

Bootswatch

Free Bootstrap themes. 20+ themes for any Bootstrap project.

Dub UI

Dub UI

Open-source React components by Dub.co. Clean, modern, copy-paste.

npx dub-ui init
Materialize CSS

Materialize CSS

CSS framework based on Material Design. Components, animations, and more.

npm i materialize-css
Origin UI

Origin UI

Beautiful React components built with Tailwind CSS and Framer Motion.

npx originui init
React Aria

React Aria

Adobe's headless React hooks for building accessible UI components.

npm i react-aria-components
10 packages

Icons & Illustrations

Beautiful free icons, illustrations, and SVG resources

Feather Icons

Feather Icons

Simply beautiful open-source icons. 280+ icons, minimal and clean.

npm i react-feather
Heroicons

Heroicons

Tailwind CSS official icon set. 292 icons in outline/solid. By Tailwind Labs.

npm i @heroicons/react
Phosphor Icons

Phosphor Icons

Free, flexible icon family with 6 weights. React, Vue, and SVG.

npm i @phosphor-icons/react
Remix Icon

Remix Icon

2800+ open-source neutral-style icons. System icons for every use case.

npm i remixicon
Storyset

Storyset

Free animated SVG illustrations with customizable colors and scenes.

Tabler Icons

Tabler Icons

5800+ MIT-licensed icons. Outline + filled styles for React, Vue, and SVG.

npm i @tabler/icons-react
unDraw

unDraw

Open-source SVG illustrations with any color. Free forever, no attribution.

Huge Icons

Huge Icons

Free, open-source SVG icons library. 3000+ icons with consistent 24px grid.

npm i @hugeicons/react
Icons8

Icons8

Free icons, illustrations, photos, and music. Huge library with style consistency.

Lucide Icons

Lucide Icons

5000+ beautiful, tree-shakeable icons for React, Vue, Svelte, and SVG.

npm i lucide-react
9 packages

Fonts & Typography

Free fonts, typefaces, and typography tools for any project

DaFont

DaFont

Archive of free downloadable fonts. Categorized by style and popularity.

FontJoy

FontJoy

AI-powered font pairing generator. Get perfect font combinations instantly.

Fontshare

Fontshare

Quality free fonts by Indian Type Foundry. Professional-grade typefaces.

Fontsource

Fontsource

Self-host open-source fonts as npm packages. No Google Fonts dependency.

npm i @fontsource/inter
Google Fonts

Google Fonts

Thousands of free, open-source fonts. The largest free font library on the web.

Type Scale

Type Scale

Visual type scale calculator. Generate sizes, preview, and get CSS code.

1001 Free Fonts

1001 Free Fonts

Huge collection of free fonts for personal and commercial use.

Fonts by Behance

Fonts by Behance

Free fonts shared by designers on Behance. Unique and creative typefaces.

FontSpace

FontSpace

Free fonts by independent designers. Handwritten, display, script, and more.

11 packages

Colors & Palettes

Color systems, palette generators, and contrast tools

Adobe Color

Adobe Color

Adobe's color wheel and palette generator. Extract themes from images.

Color Hunt

Color Hunt

Curated color palettes by designers. Trending combinations updated daily.

Coolors

Coolors

Fast color palette generator. Generate, save, and export color schemes.

Eva Design Colors

Eva Design Colors

Deep learning color generator. Accessible color systems for UI.

Realtime Colors

Realtime Colors

Visualize color palettes on a real website. See colors in context.

Contrast Ratio

Contrast Ratio

Check WCAG contrast ratios between text and background colors.

Huemint

Huemint

AI color palette generator for branding, UI, and illustration.

MyColor.space

MyColor.space

Generate color palettes from any color using harmonic rules.

Open Color

Open Color

Open-source color scheme. 13 colors with 10-step scales. Great for UI.

npm i open-color
Radix Colors

Radix Colors

Accessible color system with dark/light modes. 9-step scales for each color.

npm i @radix-ui/colors
Tailwind CSS Colors

Tailwind CSS Colors

Beautiful, balanced color palette included with Tailwind CSS.

10 packages

Animation & Motion

Animation libraries for smooth, engaging user experiences

Anime.js

Anime.js

Lightweight JavaScript animation library. Works with CSS, SVG, DOM attributes.

npm i animejs
AOS (Animate on Scroll)

AOS (Animate on Scroll)

Scroll-triggered animations. Add animations to elements as they scroll into view.

npm i aos
Framer Motion

Framer Motion

Production-grade React animation library. Gestures, spring physics, layout animations.

npm i framer-motion
GSAP

GSAP

Professional-grade animation library. ScrollTrigger, timeline, morphing. Free on localhost.

npm i gsap
Animista

Animista

CSS animation library with ready-to-use animations. Choose, copy, and play.

AutoAnimate

AutoAnimate

One line of code — automatic smooth animations for any UI. Zero configuration.

npm i @formkit/auto-animate
GreenSock (GSAP)

GreenSock (GSAP)

The gold standard for web animation. Scroll, stagger, morph, timeline control.

npm i gsap
LottieFiles

LottieFiles

JSON animations from After Effects. Massive free animation library.

npm i lottie-react
Motion One

Motion One

Lightweight animation library built on Web Animations API. Fast and small.

npm i motion
React Spring

React Spring

Spring-physics based React animation library. Natural, fluid motion.

npm i @react-spring/web
8 packages

Transitions & Effects

CSS transitions, hover effects, and micro-interactions

Animate.css

Animate.css

Ready-to-use CSS animations. Bounce, fade, slide, zoom — 100+ effects.

npm i animate.css
Transition.css

Transition.css

Drop-in CSS transitions library. Smooth state changes with minimal code.

CSS Filter Generator

CSS Filter Generator

Interactive CSS filter generator. Adjust brightness, contrast, blur and more.

CSShake

CSShake

Pure CSS shake animations. 100+ shake classes for attention-grabbing effects.

Easings.net

Easings.net

Visual easing curve reference. CSS/JS easing functions with live preview.

Hover.css

Hover.css

CSS hover effects for buttons, links, and elements. 2D transitions, shadows, icons.

Magic Effects

Magic Effects

CSS3 animation library with special effects. Bling, magic, and perspective.

Neomorphism.io

Neomorphism.io

Neumorphic design generator. Soft UI shadows and effects.

6 packages

3D, Canvas & Special FX

3D rendering, particle effects, and interactive graphics

Babylon.js

Babylon.js

Powerful 3D engine for the web. Game-ready, AR/VR, and interactive scenes.

npm i @babylonjs/core
p5.js

p5.js

Creative coding library for artists and designers. Canvas drawing, generative art.

npm i p5
Three.js

Three.js

The most popular 3D JavaScript library. 3D scenes, models, immersive experiences.

npm i three
Paper.js

Paper.js

Vector graphics scripting framework. Clean canvas drawing API.

npm i paper
React Three Fiber

React Three Fiber

Three.js as declarative React components. Build 3D scenes with React patterns.

npm i @react-three/fiber three
tsParticles

tsParticles

Particle effects — confetti, snow, stars, connections. Lightweight, customizable.

npm i @tsparticles/react
8 packages

Charts & Data Viz

Chart libraries and data visualization tools

Apache ECharts

Apache ECharts

Powerful charting library from Apache. 30+ chart types, large datasets.

npm i echarts
ApexCharts

ApexCharts

Modern interactive chart library. 20+ chart types. Free and open-source.

npm i apexcharts
Chart.js

Chart.js

Simple yet flexible JavaScript charting. 8 chart types, animated, responsive.

npm i chart.js
D3.js

D3.js

Data visualization library. Full control over SVG output. Most powerful option.

npm i d3
Nivo

Nivo

Rich React chart library built on D3. 30+ components, responsive, animations.

npm i @nivo/core
Recharts

Recharts

Composable React chart library. All chart types. Declarative, customizable, free.

npm i recharts
Frappe Charts

Frappe Charts

Simple, modern chart library for GitHub-inspired data visualizations.

npm i frappe-charts
Visx

Visx

Visualization components by Airbnb. Expressive, low-level D3 + React integration.

npm i @visx/group @visx/shape
7 packages

Images & Media

Free stock photos, SVGs, and media resources

Humaaans

Humaaans

Mix-and-match illustrations of people. Customize body parts, outfits, poses.

Pexels

Pexels

Free stock photos, videos, and music. Curated library with easy search.

Pixabay

Pixabay

Over 2 million free images, videos, and music. CC0 license, no attribution.

Unsplash

Unsplash

Beautiful free stock photos. High-resolution, no copyright, massive library.

Blush

Blush

Free customizable illustrations. Create unique illustration sets for any project.

Iconscout Freebies

Iconscout Freebies

Free illustrations, icons, and 3D assets. Curated free collection.

SVG Repo

SVG Repo

Free SVG vectors and icons. Huge collection, searchable, downloadable.

9 packages

Gradients & Patterns

Gradient generators, pattern libraries, and textures

Gradient Hunt

Gradient Hunt

Trending gradient palettes. Thousands of beautiful gradient combinations.

Mesh Gradients

Mesh Gradients

Free mesh gradient collection. Soft, organic gradient blends for backgrounds.

Claymorphism Generator

Claymorphism Generator

CSS claymorphism effect generator. Soft, clay-like 3D shapes.

CSS Gradient

CSS Gradient

Gradient generator with live preview. Linear, radial, conic gradients.

Glassmorphism Generator

Glassmorphism Generator

CSS glassmorphism effect generator. Adjust blur, opacity, and background.

Hero Patterns

Hero Patterns

Free repeatable SVG background patterns. Easy to customize colors and scales.

Pattern Pad

Pattern Pad

Free SVG pattern generator. Create unique patterns for backgrounds and surfaces.

SVG Backgrounds

SVG Backgrounds

Free customizable SVG background patterns. Easy to embed and style.

UI Gradients

UI Gradients

Curated gradient color combinations for UI design. Copy and use instantly.

6 packages

Forms & Validation

Form libraries, validation, and input masking tools

Cleave.js

Cleave.js

Format your input content. Credit cards, phone numbers, dates, and more.

npm i cleave.js
Formik

Formik

Build forms in React without tears. Handles validation, submission, and more.

npm i formik
React Hook Form

React Hook Form

Performant React forms with easy validation. Uncontrolled, reduces re-renders.

npm i react-hook-form
Zod

Zod

TypeScript-first schema validation. Perfect for form validation with React.

npm i zod
Formspree

Formspree

Free form backend. Submit forms without a server. 50 submissions/month free.

Inputmask

Inputmask

Input masking library. Phone numbers, dates, currency, and custom masks.

npm i inputmask
6 packages

Layout & Grid

CSS frameworks, grid systems, and layout generators

Bootstrap

Bootstrap

The most popular CSS framework. Grid, components, responsive, utility classes.

npm i bootstrap
CSS Grid Garden

CSS Grid Garden

Learn CSS Grid through an interactive game. Great for mastering grid layouts.

Flexbox Froggy

Flexbox Froggy

Learn CSS Flexbox through an interactive game. Master flex layouts.

Tailwind CSS

Tailwind CSS

Utility-first CSS framework. Fastest way to build custom layouts and designs.

npm i tailwindcss @tailwindcss/postcss
CSS Layout Generator

CSS Layout Generator

Generate CSS grid and flexbox layouts visually. Copy the code instantly.

LayoutIt!

LayoutIt!

Bootstrap grid generator. Drag and drop to create responsive layouts.

14 packages

Design Inspiration

Curated galleries, references, and design showcases

Awwwards

Awwwards

Website awards and inspiration. Best-designed websites from around the world.

Collect UI

Collect UI

Daily UI inspiration archive. UI patterns organized by component type.

DesignMD AI

DesignMD AI

AI-powered design inspiration and reference platform for modern interfaces.

DesignMD App

DesignMD App

Design reference app showcasing the best motion and interaction designs.

Dribbble

Dribbble

Design inspiration gallery. Millions of shots from top designers worldwide.

Get Design MD

Get Design MD

Curated design inspiration hubs — motion, UI, and interaction design references.

Mobbin

Mobbin

Mobile app design patterns. Thousands of screens from top apps (free tier).

Refero

Refero

Curated design inspiration for landing pages, dashboards, and components.

UI Sources

UI Sources

Micro-interaction and motion design inspiration with downloadable prototypes.

Landing Folio

Landing Folio

Best landing page designs. Inspiration for conversion-optimized pages.

Lapa Ninja

Lapa Ninja

Landing page inspiration. 7000+ landing page screenshots for reference.

Motion Sites

Motion Sites

Curated gallery of the best motion design websites and animated interfaces.

One Page Love

One Page Love

One-page website inspiration. Beautiful single-page designs for reference.

Site Inspire

Site Inspire

Web design inspiration gallery. Filter by type, style, and industry.

5 packages

Prototyping & Preview

Tools for prototyping, previewing, and testing designs

Figma

Figma

Free collaborative design tool. Prototyping, design systems, and handoff.

Hoverify

Hoverify

Browser extension for design tools. CSS inspector, color picker, responsive test.

Penpot

Penpot

Open-source design and prototyping platform. Figma alternative. Free forever.

Responsive Design Checker

Responsive Design Checker

Test responsive layouts across multiple devices. Free browser tool.

Screenfly

Screenfly

Test websites on various device screens. Mobile, tablet, desktop, and TV.

CLI & Package Manager

One Command to Start

Install everything you need with a single npx command. No config chasing, no dependency hell.

design-forge — bash
$npx design-forge-cli init

design-forge-cli

v1.0.0 · Published on npm

npm
1

Install CLI Tool

npx design-forge-cli init

Interactive setup for your project

2

Quick Resource Install

npx design-forge-cli add shadcn-ui lucide framer-motion

Install multiple resources at once

3

Apply Template

npx design-forge-cli template landing-page

Scaffold a pre-built template

4

Search Resources

npx design-forge-cli search buttons

Find resources from the terminal

View on GitHub
Built With

Powered by Open Source

DesignForge is built entirely on free and open-source tools. Each one made this possible — please support them.

Legal Notice: DesignForge does not host, distribute, or modify any of the listed tools. All trademarks, logos, and brand names belong to their respective owners. Each resource is used under its respective open-source license. If you are a creator of a listed resource and wish to have it removed, please open an issue on our GitHub repository.