better-design 0.7.1 → 0.7.6
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 +39 -33
- package/dist/index.js +2345 -1296
- 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,45 @@ 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. The installer detects your installed
|
|
11
|
+
Run it once. The installer detects your installed MCP clients (Claude Code, Cursor, VS Code, Windsurf, Zed, Cline, JetBrains, and more), writes the config merge-safe, and drops an auto-invoke rule so agents use Better Design on UI work automatically. Get an API key at [better-design.com/mcp](https://better-design.com/mcp).
|
|
12
12
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
| Flag | Description |
|
|
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.
|
|
13
|
+
> 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
14
|
|
|
32
15
|
## Tools
|
|
33
16
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
|
37
|
-
|
|
|
38
|
-
| `
|
|
39
|
-
| `
|
|
40
|
-
| `
|
|
41
|
-
| `
|
|
42
|
-
| `
|
|
43
|
-
| `
|
|
44
|
-
| `
|
|
45
|
-
|
|
46
|
-
|
|
17
|
+
The server exposes MCP tools only; it does not register prompts.
|
|
18
|
+
|
|
19
|
+
| Tool | Purpose |
|
|
20
|
+
| --- | --- |
|
|
21
|
+
| `find-design` | 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.) |
|
|
22
|
+
| `resolve-design-system` | Deprecated alias of `find-design`, kept one release for backward compatibility. |
|
|
23
|
+
| `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. |
|
|
24
|
+
| `create-design-system` | Start a custom design system generation job. |
|
|
25
|
+
| `check-design-system-status` | Poll a generated design system and return the install command when ready. |
|
|
26
|
+
| `preview-design-system` | Return a token-true visual preview for a catalog design system. |
|
|
27
|
+
| `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. |
|
|
28
|
+
| `get-ui-principle` | Load or search visual UI principles. |
|
|
29
|
+
| `get-ux-principle` | Load or search flow and interaction principles. |
|
|
30
|
+
| `get-review-rules` | Return the Better Design self-review checklist. |
|
|
31
|
+
| `resolve-icon-library` | Find an icon library for an app or project style. |
|
|
32
|
+
| `search-icons` | Search icons by name, library, and variant. |
|
|
33
|
+
| `install-icons` | Generate local icon components in the target project. |
|
|
34
|
+
| `detect-icon-library` | Read an existing icon-library manifest and report the active library. |
|
|
35
|
+
|
|
36
|
+
## Setup Behavior
|
|
37
|
+
|
|
38
|
+
`npx better-design` prompts for an API key, clients, install scope, and whether to add auto-invoke rules. For non-interactive runs, set `BETTER_DESIGN_API_KEY` and pass `--global` or `--project`.
|
|
39
|
+
|
|
40
|
+
Client configs are merged into existing JSON, JSONC, TOML, or dedicated config files without removing other MCP servers. Existing files are backed up before writes, and files that contain bearer tokens are written with owner-only permissions.
|
|
41
|
+
|
|
42
|
+
The installer resolves scope per client before writing. If a client supports the requested scope, it uses that scope. If a client supports only one scope, the installer falls back to that supported scope and marks the summary, for example `installed project (only scope this client supports)`. Auto-invoke rule targets use the same resolved per-client scope, so project-only clients such as Continue get project rules while global-only clients keep manual or global rule guidance.
|
|
43
|
+
|
|
44
|
+
Relevant configuration:
|
|
45
|
+
|
|
46
|
+
| Option | Description |
|
|
47
|
+
| --- | --- |
|
|
48
|
+
| `BETTER_DESIGN_API_KEY` | API key used for non-interactive setup. |
|
|
49
|
+
| `BETTER_DESIGN_API_URL` | Overrides the MCP API base URL for generated client configs. |
|
|
50
|
+
| `--global` | Install at user/global scope when the client supports it. |
|
|
51
|
+
| `--project` | Install in the current project when the client supports it. |
|
|
52
|
+
| `--help` | Print setup usage. |
|