design-system-selector 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +91 -0
- package/dist/cli.js +3836 -0
- package/dist/index.js +3834 -0
- package/package.json +68 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 TheLostByGass
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
# Design System Selector
|
|
2
|
+
|
|
3
|
+
Break free from the Tailwind/shadcn monoculture. Answer 5 quick questions about your project and get a curated design system recommendation — complete with install commands, tradeoff notes, and MCP config for your AI editor.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```sh
|
|
8
|
+
# Run directly (no install needed)
|
|
9
|
+
npx design-system-selector
|
|
10
|
+
|
|
11
|
+
# Or install globally
|
|
12
|
+
npm install -g design-system-selector
|
|
13
|
+
|
|
14
|
+
# Or via Homebrew
|
|
15
|
+
brew tap TheLostByGass/tap
|
|
16
|
+
brew install design-system-selector
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
Requires Node.js 20 or later.
|
|
20
|
+
|
|
21
|
+
## How It Works
|
|
22
|
+
|
|
23
|
+
The CLI asks you 5 questions about your project:
|
|
24
|
+
|
|
25
|
+
1. **Visual style** — minimalist, expressive, corporate, or playful
|
|
26
|
+
2. **Accessibility needs** — critical (AAA + EU compliance), important (AA), or standard
|
|
27
|
+
3. **Opinion level** — opinionated, balanced, or headless/unstyled
|
|
28
|
+
4. **Team experience** — beginner, intermediate, or advanced
|
|
29
|
+
5. **Color preference** — neutral, vibrant, monochrome, or custom
|
|
30
|
+
|
|
31
|
+
Based on your answers, it recommends a primary design system plus two alternatives. Each recommendation includes:
|
|
32
|
+
|
|
33
|
+
- Why it was matched to your preferences
|
|
34
|
+
- Accessibility rating (AA/AAA)
|
|
35
|
+
- Tradeoffs to be aware of
|
|
36
|
+
- One-line install command
|
|
37
|
+
- MCP config snippet for AI-assisted development
|
|
38
|
+
|
|
39
|
+
## Design Systems
|
|
40
|
+
|
|
41
|
+
10 systems are evaluated, covering a range of philosophies and complexity levels:
|
|
42
|
+
|
|
43
|
+
| System | Philosophy | Accessibility | Components |
|
|
44
|
+
| ----------------- | ---------------------- | ------------- | ------------------ |
|
|
45
|
+
| Radix UI + Themes | Minimalist | AAA | 30 |
|
|
46
|
+
| Chakra UI | Expressive, Playful | AA | 60 |
|
|
47
|
+
| Mantine | Corporate, Minimalist | AA | 120 |
|
|
48
|
+
| Ant Design | Corporate | AA | 150 |
|
|
49
|
+
| Park UI | Minimalist, Expressive | AA | 40 |
|
|
50
|
+
| Ark UI | Minimalist | AAA | 35 |
|
|
51
|
+
| NextUI (HeroUI) | Playful, Expressive | AA | 50 |
|
|
52
|
+
| Headless UI | Minimalist | AAA | 12 |
|
|
53
|
+
| Open Props | Minimalist, Expressive | AA | 0 (tokens only) |
|
|
54
|
+
| Panda CSS | Minimalist, Corporate | AA | 0 (styling engine) |
|
|
55
|
+
|
|
56
|
+
## MCP Integration
|
|
57
|
+
|
|
58
|
+
Use `--mcp-only` to get a machine-readable MCP server config for your top recommendation:
|
|
59
|
+
|
|
60
|
+
```sh
|
|
61
|
+
design-system-selector --mcp-only
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
This outputs JSON you can paste directly into your editor's MCP configuration (Claude Code, Cursor, etc.).
|
|
65
|
+
|
|
66
|
+
## Project Scaffolding
|
|
67
|
+
|
|
68
|
+
After picking a design system, the CLI offers to scaffold a starter project with your chosen system pre-configured — including dependencies, example components, and recommended project structure.
|
|
69
|
+
|
|
70
|
+
## CLI Options
|
|
71
|
+
|
|
72
|
+
```
|
|
73
|
+
-h, --help Show help
|
|
74
|
+
-v, --version Show version
|
|
75
|
+
--mcp-only Output MCP config JSON (skip interactive UI)
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
## Contributing
|
|
79
|
+
|
|
80
|
+
```sh
|
|
81
|
+
git clone https://github.com/TheLostByGass/design-system-selector.git
|
|
82
|
+
cd design-system-selector
|
|
83
|
+
npm install
|
|
84
|
+
npm run dev # Run in development
|
|
85
|
+
npm test # Run tests
|
|
86
|
+
npm run build # Lint, typecheck, test, and build
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
## License
|
|
90
|
+
|
|
91
|
+
MIT
|