better-design 0.1.0 → 0.7.0
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/README.md +50 -0
- package/dist/index.js +2772 -0
- package/dist/index.js.map +1 -0
- package/package.json +62 -7
package/README.md
ADDED
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
# better-design-mcp
|
|
2
|
+
|
|
3
|
+
Design systems, UI/UX principles, icons, and code review for AI coding agents. [better-design.com](https://better-design.com)
|
|
4
|
+
|
|
5
|
+
## Setup
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npx better-design-mcp setup
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
Detects your MCP clients, writes the config (merge-safe, backed up), and adds an auto-invoke rule so your agent uses Better Design on UI work. Get an API key at [better-design.com/mcp](https://better-design.com/mcp).
|
|
12
|
+
|
|
13
|
+
<details>
|
|
14
|
+
<summary>Manual setup & flags</summary>
|
|
15
|
+
|
|
16
|
+
Claude Code:
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
claude mcp add --scope user better-design --transport http https://better-design.com/api/mcp --header "Authorization: Bearer YOUR_API_KEY"
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
Every other client: per-client config at [better-design.com/mcp](https://better-design.com/mcp).
|
|
23
|
+
|
|
24
|
+
`setup` flags: `--client <ids>` (skip detection) · `--project` (vs default `--global`) · `--api-key <key>` · `--no-rule` (skip the CLAUDE.md/AGENTS.md rule) · `--dry-run` · `--yes`.
|
|
25
|
+
|
|
26
|
+
Supported clients: Claude Code, Cursor, VS Code (Copilot), Windsurf, Zed, Cline, Claude Desktop, OpenCode, Amp, Codex CLI, Continue.dev.
|
|
27
|
+
|
|
28
|
+
</details>
|
|
29
|
+
|
|
30
|
+
## What you can ask
|
|
31
|
+
|
|
32
|
+
- **"use better-design"** → pick a system from the catalog; the agent installs it (tokens + every component) via shadcn.
|
|
33
|
+
- **"create a design system that…"** → generates a custom one and hands back a single `npx shadcn add` command for your Next.js project.
|
|
34
|
+
- **Building any UI** → it auto-loads design principles + WCAG/visual review rules so the output isn't generic AI slop.
|
|
35
|
+
|
|
36
|
+
## Tools
|
|
37
|
+
|
|
38
|
+
| Tool | Description |
|
|
39
|
+
|------|-------------|
|
|
40
|
+
| `resolve-design-system` | Find systems by industry, personality, or style |
|
|
41
|
+
| `get-design-system-docs` | Install a full system (tokens + every component) via shadcn |
|
|
42
|
+
| `preview-design-system` | Render an inline visual preview of a catalog system |
|
|
43
|
+
| `create-design-system` | Generate a custom system; returns its project link |
|
|
44
|
+
| `check-design-system-status` | Poll a generation; returns the install command + preview when ready |
|
|
45
|
+
| `get-ui-principle` | UI principles (spacing, color, hierarchy, typography, depth…) |
|
|
46
|
+
| `get-ux-principle` | UX principles (forms, navigation, errors, onboarding…) |
|
|
47
|
+
| `get-review-rules` | WCAG 2.1 + visual design review checklists |
|
|
48
|
+
| `resolve-icon-library` · `search-icons` · `install-icons` · `detect-icon-library` | Find, search, and scaffold inline SVG icons |
|
|
49
|
+
|
|
50
|
+
> After install, set `"style": "new-york"` in `components.json` before running the shadcn command (the default `base-nova` style rewrites Radix `asChild` and breaks components). The returned install instructions include this.
|