better-design 0.7.1 → 0.8.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 +35 -32
- package/dist/index.js +2760 -1569
- package/dist/index.js.map +1 -1
- package/package.json +9 -8
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# better-design
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Design systems, UI principles, icons, and code review for AI coding agents. [better-design.com](https://better-design.com)
|
|
4
4
|
|
|
5
5
|
## Install
|
|
6
6
|
|
|
@@ -8,39 +8,42 @@ MCP server that gives AI coding agents design systems, UI principles, icons, and
|
|
|
8
8
|
npx better-design
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
-
Run it once.
|
|
11
|
+
Run it once. No signup needed: a free key is created automatically and written into your installed MCP clients (Claude Code, Cursor, VS Code, Windsurf, Zed, Cline, JetBrains, and more), merge-safe, with an auto-invoke rule.
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
The free key has a query limit; the tools link you to turn it into a free account (same key, unlimited, history kept). Already have a key? Set `BETTER_DESIGN_API_KEY`. Manage keys at [better-design.com/mcp](https://better-design.com/mcp).
|
|
14
14
|
|
|
15
|
-
|
|
16
|
-
|------|-------------|
|
|
17
|
-
| `--client <ids>` | Comma-separated client ids to configure (skips detection) |
|
|
18
|
-
| `--global` | Install at user/global scope (default) |
|
|
19
|
-
| `--project` | Install at project scope (current directory) |
|
|
20
|
-
| `--api-key <key>` | Skip prompt for API key |
|
|
21
|
-
| `--no-rule` | Don't write the CLAUDE.md / AGENTS.md auto-invoke rule |
|
|
22
|
-
| `--dry-run` | Show what would change without writing |
|
|
23
|
-
| `--yes, -y` | Non-interactive; use detected clients & defaults |
|
|
24
|
-
| `--help, -h` | Show help |
|
|
25
|
-
|
|
26
|
-
## What you can ask
|
|
27
|
-
|
|
28
|
-
- **"use better-design"** → pick a system from the catalog; installs tokens + every component via shadcn.
|
|
29
|
-
- **"create a design system that…"** → generates a custom one and hands back a single `npx shadcn add` command.
|
|
30
|
-
- **Building any UI** → auto-loads design principles + WCAG / visual review rules so output isn't generic AI slop.
|
|
15
|
+
> 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.
|
|
31
16
|
|
|
32
17
|
## Tools
|
|
33
18
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
|
37
|
-
|
|
|
38
|
-
| `
|
|
39
|
-
| `
|
|
40
|
-
| `
|
|
41
|
-
| `get-
|
|
42
|
-
| `
|
|
43
|
-
| `get-
|
|
44
|
-
| `
|
|
45
|
-
|
|
46
|
-
|
|
19
|
+
The server exposes MCP tools only; it does not register prompts.
|
|
20
|
+
|
|
21
|
+
| Tool | Purpose |
|
|
22
|
+
| --- | --- |
|
|
23
|
+
| `find-design-system` | Search the Better Design catalog and return design system IDs. (For building an app, prefer `create-design-system` to generate the user's own brand.) |
|
|
24
|
+
| `get-design-system-docs` | Return shadcn install commands and component source for a design system. Default path in any real project (filesystem + terminal): build real React components. |
|
|
25
|
+
| `create-design-system` | Start a custom design system generation job. |
|
|
26
|
+
| `get-design-system-status` | Poll a generated design system and return the install command when ready. |
|
|
27
|
+
| `preview-design-system` | Return a token-true visual preview for a catalog design system. |
|
|
28
|
+
| `get-design-system-html` | Export a framework-free HTML/CSS kit (real tokens + each system's real component material: card depth, button gradient/rim, switch fill, badge radius) for inline chat canvases only (ChatGPT canvas / Claude artifact) with no filesystem or build step; otherwise use `get-design-system-docs` and build React. Takes a catalog `designSystemId` OR a generated `projectId`; lists covered vs interactive-excluded components. |
|
|
29
|
+
| `get-ui-principle` | Load or search visual UI principles. |
|
|
30
|
+
| `get-ux-principle` | Load or search flow and interaction principles. |
|
|
31
|
+
| `get-review-rules` | Return the Better Design self-review checklist. |
|
|
32
|
+
| `find-icon-library` | Find an icon library for an app or project style. |
|
|
33
|
+
| `find-icons` | Search icons by name, library, and variant. |
|
|
34
|
+
| `install-icons` | Generate local icon components in the target project. |
|
|
35
|
+
| `detect-icon-library` | Read an existing icon-library manifest and report the active library. |
|
|
36
|
+
|
|
37
|
+
## Setup Behavior
|
|
38
|
+
|
|
39
|
+
`npx better-design` auto-creates a free key when none is set, then prompts for clients, scope, and auto-invoke rules. Non-interactive runs (agents, or `-y`/`--yes`) install silently. Configs are merged into your existing files (backed up first, never clobbering other MCP servers); scope falls back per client when one isn't supported.
|
|
40
|
+
|
|
41
|
+
Options:
|
|
42
|
+
|
|
43
|
+
| Option | Description |
|
|
44
|
+
| --- | --- |
|
|
45
|
+
| `-y`, `--yes` | Non-interactive: skip prompts, auto-create a key. |
|
|
46
|
+
| `BETTER_DESIGN_API_KEY` | Use your own key instead of auto-provisioning. |
|
|
47
|
+
| `--global` | Install at user/global scope when the client supports it. |
|
|
48
|
+
| `--project` | Install in the current project when the client supports it. |
|
|
49
|
+
| `--help` | Print setup usage. |
|