|
1 | | -# ⚡ DesignForge — Your Free Design Command Center |
2 | | - |
3 | | -**Aggregate. Combine. Build Premium.** DesignForge collects the best **100% free** UI/UX design resources from across the internet and presents them in one curated hub. No paid tools. No subscriptions. Just the best open-source design ecosystem. |
4 | | - |
5 | | -## 🎯 The Problem |
6 | | - |
7 | | -Free design resources are scattered across the web. You hunt through bookmarks, Google searches, and GitHub repos just to find what you need. DesignForge solves this by acting as a **central command center** for all free UI/UX resources. |
8 | | - |
9 | | -## ✨ What's Inside |
10 | | - |
11 | | -### 🧩 UI Components |
12 | | -| Resource | What It Does | |
13 | | -|---|---| |
14 | | -| [shadcn/ui](https://ui.shadcn.com) | Copy-paste React components. Radix + Tailwind. Best in class | |
15 | | -| [Aceternity UI](https://ui.aceternity.com) | Stunning animated components with Framer Motion | |
16 | | -| [MagicUI](https://magicui.design) | Magical animations — sparkles, meteors, glows, beams | |
17 | | -| [DaisyUI](https://daisyui.com) | Tailwind component classes. 50+ components, 35+ themes | |
18 | | -| [Flowbite](https://flowbite.com) | 1000+ Tailwind components. React, Vue, HTML versions | |
19 | | - |
20 | | -### 🎨 Icons & Illustrations |
21 | | -| Resource | What It Does | |
22 | | -|---|---| |
23 | | -| [Lucide Icons](https://lucide.dev) | 5000+ beautiful, tree-shakeable icons | |
24 | | -| [Tabler Icons](https://tabler.io/icons) | 5800+ MIT icons. Outline + filled | |
25 | | -| [Heroicons](https://heroicons.com) | Tailwind's official icon set. 292 icons | |
26 | | -| [Storyset](https://storyset.com) | Free animated SVG illustrations | |
27 | | -| [unDraw](https://undraw.co) | Open-source SVG illustrations. Any color | |
28 | | - |
29 | | -### 🎬 Animation & Motion |
30 | | -| Resource | What It Does | |
31 | | -|---|---| |
32 | | -| [Framer Motion](https://motion.dev) | Production-grade React animation library | |
33 | | -| [GSAP](https://gsap.com) | Professional-grade animation (free on localhost) | |
34 | | -| [AutoAnimate](https://auto-animate.formkit.com) | One line — automatic smooth animations | |
35 | | -| [LottieFiles](https://lottiefiles.com) | JSON animations from After Effects | |
36 | | - |
37 | | -### 🧊 3D, Canvas & Special FX |
38 | | -| Resource | What It Does | |
39 | | -|---|---| |
40 | | -| [Three.js](https://threejs.org) | 3D scenes in the browser | |
41 | | -| [React Three Fiber](https://r3f.docs.pmnd.rs) | Three.js as React components | |
42 | | -| [tsParticles](https://particles.js.org) | Particle effects — confetti, snow, stars | |
43 | | -| [Recharts](https://recharts.org) | Composable React charts. Fully free | |
44 | | - |
45 | | -## 🚀 Quick Start |
46 | | - |
47 | | -### One-Command Setup |
| 1 | +# Numb.Design — AI-Powered Frontend Builder |
| 2 | + |
| 3 | +Tell your AI agent what to build. Numb.Design installs only the packages you need — nothing extra. Premium frontends in 5 minutes from 100% free resources. |
| 4 | + |
| 5 | +## Core Philosophy |
| 6 | + |
| 7 | +- **Zero bloat** — Install only what the project actually needs |
| 8 | +- **100% free** — Every resource listed is free and open-source |
| 9 | +- **AI-native** — Your AI agent browses, picks, and installs. You just describe the output |
| 10 | + |
| 11 | +## Quick Start |
| 12 | + |
48 | 13 | ```bash |
49 | | -bash <(curl -sL https://design-forge-beta.vercel.app/cli/setup.sh) |
| 14 | +npx numb-design init |
50 | 15 | ``` |
51 | 16 |
|
52 | | -This will: |
53 | | -- Create a Next.js project (if none exists) |
54 | | -- Install framer-motion, lucide-react, clsx, tailwind-merge |
55 | | -- Initialize shadcn/ui with essential components |
56 | | -- Install MagicUI, Recharts, Tabler Icons |
| 17 | +Or use the interactive setup wizard: |
57 | 18 |
|
58 | | -### Manual Installation |
59 | 19 | ```bash |
60 | | -# Core |
61 | | -npm install framer-motion lucide-react clsx tailwind-merge |
| 20 | +bash <(curl -fsSL https://numb.design/cli/setup.sh) |
| 21 | +``` |
| 22 | + |
| 23 | +The wizard asks what you're building, your style preferences, and what features you need — then generates a plan with exact install commands. |
| 24 | + |
| 25 | +## Features |
| 26 | + |
| 27 | +### AI-Powered Selection |
| 28 | +Your AI agent analyzes your requirements and selects exactly the right packages. No more guessing, no more bloat — only what you need. |
| 29 | + |
| 30 | +### Zero Bloat Guarantee |
| 31 | +Only the packages you need are installed. Change your mind? Unused packages are automatically removed. Your workspace stays clean. |
62 | 32 |
|
63 | | -# shadcn/ui |
64 | | -npx shadcn@latest init |
65 | | -npx shadcn@latest add button card input badge dialog dropdown-menu |
| 33 | +### 5-Minute Frontends |
| 34 | +Describe your vision once. The AI handles package selection, installation, and setup. A stunning frontend in minutes, not hours. |
66 | 35 |
|
67 | | -# Extras |
68 | | -npm install magicui recharts @tabler/icons-react |
| 36 | +## How It Works |
| 37 | + |
| 38 | +1. **Tell your AI agent what you need** — "Build me a premium landing page." |
| 39 | +2. **Numb.Design picks the packages** — The CLI scans the requirement and installs only what's needed. shadcn/ui for components? Framer Motion for animations? Geist for fonts? Done. |
| 40 | +3. **Instant, clean frontend** — A fully working frontend from free, open-source packages. Run cleanup to remove old packages — your space stays pristine. |
| 41 | + |
| 42 | +## CLI Commands |
| 43 | + |
| 44 | +```bash |
| 45 | +# Initialize a new project |
| 46 | +npx numb-design init |
| 47 | + |
| 48 | +# Add packages |
| 49 | +npx numb-design add shadcn-ui lucide framer-motion |
| 50 | + |
| 51 | +# Generate from template |
| 52 | +npx numb-design template landing-page |
| 53 | + |
| 54 | +# Search available packages |
| 55 | +npx numb-design search buttons |
69 | 56 | ``` |
70 | 57 |
|
71 | | -## 🏗️ Project Structure |
| 58 | +## Project Structure |
| 59 | + |
72 | 60 | ``` |
73 | | -design-forge/ |
| 61 | +numb-design/ |
74 | 62 | ├── src/ |
75 | 63 | │ ├── app/ # Next.js app router pages |
76 | | -│ ├── components/ # React components (Header, Hero, Cards, etc.) |
| 64 | +│ ├── components/ # React components |
77 | 65 | │ ├── data/ # Resource definitions & metadata |
78 | | -│ └── lib/ # Utility functions (cn helper) |
| 66 | +│ └── lib/ # Utility functions |
79 | 67 | ├── cli/ |
80 | | -│ └── setup.sh # One-command bootstrap script |
| 68 | +│ └── setup.sh # Interactive bootstrap wizard |
| 69 | +├── packages/ |
| 70 | +│ └── numb-design/ # npm CLI package source |
81 | 71 | └── public/ # Static assets |
82 | 72 | ``` |
83 | 73 |
|
84 | | -## 🤝 Credits & Attribution |
85 | | - |
86 | | -DesignForge is a **curation directory** — it does not host, redistribute, or modify any of the listed tools. Every resource belongs to its respective creator and is used under its open-source license (MIT, Apache 2.0, CC0, or similar). |
| 74 | +## Resources |
87 | 75 |
|
88 | | -**Please support these amazing projects:** |
89 | | -- ⭐ Star their repos |
90 | | -- 🐛 Report bugs to them |
91 | | -- 💖 Consider sponsoring if you can |
| 76 | +Every package is hand-curated across categories: UI components, icons, animations, 3D, charts, forms, auth, email, payments, fonts, and more. |
92 | 77 |
|
93 | | -## 📜 License |
| 78 | +## License |
94 | 79 |
|
95 | | -This curation project is MIT licensed. The individual tools listed retain their own licenses. |
| 80 | +MIT |
0 commit comments